Stop User from using "Print Scrn" / "Printscreen" key of the Keyboard for any Web Page

JavascriptHtmlWebpage Screenshot

Javascript Problem Overview


I am currently doing a project, in which I need to stop the user from taking the snapshot of any Web Page, for which he can use the "Print Scrn" / "Printscreen" key available in any of the normal keyboards.

I have been trying to find its solution, but in vain. If possible, I need to take into account of the "Screengrab" add-on of the Firefox browser, by stopping it also.

Any help is greatly appreciated, and I am using PHP (as server-side language) & jQuery for my project.

Javascript Solutions


Solution 1 - Javascript

I hate the "it's not possible" sentence. Here's all solutions combined to help you:

1- You can grab the solution from Haluk:

<script type="text/javascript"> $(document).ready(function() {
    $(window).keyup(function(e){
      if(e.keyCode == 44){
        $("body").hide();
      }

    }); }); 
</script>

HOWEVER, you hide body, but's already "printed" to clipboard. You can fire another event that copy some text to your clipboard, as you can see on this answer "Edit as of 2016" https://stackoverflow.com/questions/22581345/click-button-copy-to-clipboard-using-jquery , it's something like this:

function copyToClipboard() {
  // Create a "hidden" input
  var aux = document.createElement("input");
  // Assign it the value of the specified element
  aux.setAttribute("value", "Você não pode mais dar printscreen. Isto faz parte da nova medida de segurança do sistema.");
  // Append it to the body
  document.body.appendChild(aux);
  // Highlight its content
  aux.select();
  // Copy the highlighted text
  document.execCommand("copy");
  // Remove it from the body
  document.body.removeChild(aux);
  alert("Print screen desabilitado.");
}

$(window).keyup(function(e){
  if(e.keyCode == 44){
    copyToClipboard();
  }
}); 

This will block a part of your problem. If user focus on another object outside this windows he will be able to take screenshots. **But there's another solution to that as well, simply disable the hole body when window get's unfocused. Full solution, from your dear brazillian friend:

function copyToClipboard() {
  // Create a "hidden" input
  var aux = document.createElement("input");
  // Assign it the value of the specified element
  aux.setAttribute("value", "Você não pode mais dar printscreen. Isto faz parte da nova medida de segurança do sistema.");
  // Append it to the body
  document.body.appendChild(aux);
  // Highlight its content
  aux.select();
  // Copy the highlighted text
  document.execCommand("copy");
  // Remove it from the body
  document.body.removeChild(aux);
  alert("Print screen desabilitado.");
}

$(window).keyup(function(e){
  if(e.keyCode == 44){
    copyToClipboard();
  }
}); 

$(window).focus(function() {
  $("body").show();
}).blur(function() {
  $("body").hide();
});

Here's the example working:

Here i try to unfocus the window, on unfocus i hide content and show modal

Solution 2 - Javascript

This is not possible.

Solution 3 - Javascript

You can't disable screen grabbing from the Web browser, it would only be possible by installing additional software on the user's PC.

There are some IRM (Information Rights Management) tools available that do that e.g. by protecting Windows/DirectX API calls and also monitoring video memory such as Oracle IRM or such as Microsoft's IRM technology.

Especially the latter might be of interest as there is also a Rights Management Add-on for Internet Explorer.

But as other already said, any IRM/DRM technology is controversy and you should understand that it most often will limit or annoy your users.

Solution 4 - Javascript

Thankfully, this outrageous idea is not possible to implement reliably, neither the "disable screen grab" part nor the "disable user's Firefox extensions" one. And even if it were, as @kbok points out in his comment above, you don't have a right to do this.

The only way to protect your content online is copyright laws - mentioning those is often enough to scare people away from misusing it! - or not showing it at all.

Solution 5 - Javascript

Try this

$(document).keyup(function(e){
  if(e.keyCode == 44) return false;
});

Hope it works

Solution 6 - Javascript

You can change the contents of the clipboard using JavaScript or Flash. This already helps a bit.

Solution 7 - Javascript

Like @Sjoerd said, this is not possible.

If it is pictures you want to protect, I suggest you for example display lower quality images that are watermarked instead and only display the non watermarked high quality ones when appropriate.

But yeah... If you want them to be impossible to copy... don't put them online.

Solution 8 - Javascript

There is no direct method to do that, however, there is a way to protect your content as much as possible from prnt scrn.

The idea is this:

  1. make your content inaccessible if java is disabled, and use some script like Artist Scope's copy protect.

  2. Detecting prnt scrn will send a message to the admin with the registered user info, this means that restricted content that is accessible by members only can benefit from this. sending IP addresses sounds like a good idea, but banning IPs is not, so you won't gain a lot of benefit from that.

  3. Once outside your website's window, your content will be covered with an overlay that can't be removed unless you get back to your website and activate it, which will re-activate the prnt scrn detection code mentioned in the previous point.

  4. If the device is a mobile, you can either hide images, or as in my case, redirect to a "we're sorry" page.

  5. snipping tool and other similar browser extensions and add-ons will be useless. except one tool that I have found called full page screen capture

  • this tool captures web content after about 3 seconds from pressing button, which is enough time to dismiss the overlay and get back to your content
  • a good turnaround is to start a counter when "dismiss overlay" is clicked that will need 5 seconds or more, ie. after this extension has already taken a snapshot
  1. There's also an indirect method to prevent video capture, still working on it, will post it here or in my blog.

  2. If your content is really that much worth it, users might still capture it using their cameras, there might be a method for that too! But I sill need to do some research before talking about it.

I will be updating this post in my blog for other techniques that I've used/ will use for more protection. Please check this quiz (still under development) for a demo.

Solution 9 - Javascript

You can copy to clipboard something else, when user click key print screen. This is example and I copy user text.

<p id="test">test</p>

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

}
$(document).ready(function(){
	$(window).keyup(function(e){
      if(e.keyCode == 44){
      	copyToClipboard('test');
      };
	});
});

Solution 10 - Javascript

Why do you want to prevent the print screen?

If it's some photos you want to protect, you might want to put it in low resolution, and include some kind of copyright logo programmatically in php.

I think that's pretty much it.

Solution 11 - Javascript

Here is another solution:

<script type="text/javascript"> $(document).ready(function() {
    $(window).keyup(function(e){
      if(e.keyCode == 44){
        $("body").hide();
      }
      
    }); }); </script>

This is similar to @ZX12R's solution. The upside is this code will work even if the print screen catching software is a 3rd party tool (eg snagIt).

You can replace $("body").hide(); with something which will suit you better. For instance you can hide all the pictures $("img").hide(); and maybe show them back a second later.

The downside is it will not work if the web page is not the active window.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKnowledge CravingView Question on Stackoverflow
Solution 1 - JavascriptMarcelo RochaView Answer on Stackoverflow
Solution 2 - JavascriptSjoerdView Answer on Stackoverflow
Solution 3 - JavascriptDirk VollmarView Answer on Stackoverflow
Solution 4 - JavascriptPekkaView Answer on Stackoverflow
Solution 5 - JavascriptZX12RView Answer on Stackoverflow
Solution 6 - JavascriptLeoView Answer on Stackoverflow
Solution 7 - JavascriptSvishView Answer on Stackoverflow
Solution 8 - JavascriptjassarView Answer on Stackoverflow
Solution 9 - JavascriptPiotr KazuśView Answer on Stackoverflow
Solution 10 - JavascriptSRKXView Answer on Stackoverflow
Solution 11 - JavascriptHalukView Answer on Stackoverflow