Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Is it possible to prevent the users from taking screenshot of webpage?
While browsing through the internet a user might find the need to capture something in order to present or to show to someone, but sometimes there might be sensitive information on a webpage which the developer might not want the user to screenshot it.
The user can press the function key along with windows key and space bar to take a screen shot. In MacOS we would have to use the command and shift and 3 for taking a screenshot.
In this article, we are going to have a look at how can we prevent the user from taking a screenshot of the webpage.
How to prevent the user to take screenshots?
The commands of taking a screenshot cannot be disabled as these are the inbuilt features and are controlled by the OS. We can use HTML, CSS and JavaScript but still can’t block users from taking screenshots. It is a difficult task to prevent the user from taking screenshots as the user can copy and paste the content of the website or can also use some third party software to do so.
Whereas, we can use some methods to avoid the user taking screenshots of the webpage to some extent.
Example
In the following example, we inserted some text and then enclosed it within a div and then in the CSS section. After that, we used the media query and set the display to none. This way the content will be visible to the user but the user will not be able to print the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of disabling the printing </title>
<style>
@media print {
html,
body {
display: none;
}
}
</style>
</head>
<body>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>
Example
In the next example, we will be warning the user by displaying a message on the screen to not to copy or screenshot the content of the web-page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of disabling the printing </title>
<style>
html {
user-select: none;
}
</style>
</head>
<body>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>
In the above code, we used the same paragraph that we used in the previous example and this time in the CSS section, we used the user-select property and set its value to none. Now the user will be able to see the content on the screen but will not be able to select it. The output will be the following
Example
In the next example, we will be warning the user by displaying a message on the screen to not to copy or screenshot the content of the web-page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of printing a warning message to the user </title>
<script>
alert("Please!! do not try to take any kinds of screenshot of the content");
</script>
</head>
<body>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</div>
</body>
</html>
In the above code, we again used the same paragraph and used a single line of code from JavaScript, which will give a warning to the user, if the user is trying to take a screenshot of the webpage.
Conclusion
It is impossible to completely prevent the user from taking any kind of screenshots or copying and then pasting your content on some other third party website. The printing screen is an inbuilt feature which every operating system like windows and MacOS offers and these features can’t be disabled as they are controlled by the OS. We can only prevent the user from copying the content to a certain degree and not more than that.
14K+ Views
