Is it possible to prevent the users from taking screenshot of webpage?

CSS Web Development Front End Technology

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.