How to protect web page from being copied using javascript?

Some stupid websites may use javascript to disable copy/paste. You can not select the text on their website. You can not use Ctrl C to copy content from the webpage. You can not even right-click on the protected website. Here is the code to prevent the user from copying the protected content:

<div align="center"><noscript>
   <div style="position:fixed; top:0px; left:0px; z-index:3000; height:100%; width:100%; background-color:#FFFFFF">
   <div style="font-family: Trebuchet MS; font-size: 14px; background-color:#FFF000; padding: 10pt;">In order for you to see this content, you should enable Javascript!</div>
   </div>
   </noscript>
</div>

<script type="text/javascript">
function disableSelection(e)
{
    if(typeof e.onselectstart!="undefined")
        e.onselectstart=function(){return false};
    else if(typeof e.style.MozUserSelect!="undefined")e.style.MozUserSelect="none";
    else e.onmousedown=function(){return false};
    e.style.cursor="default"
}
window.onload=function(){disableSelection(document.body)}
</script>

<script type="text/javascript">
document.oncontextmenu=function(e){
    var t=e||window.event;
    var n=t.target||t.srcElement;
    if(n.nodeName!="A")return false
};
document.ondragstart=function(){return false};
</script>

<style type="text/css">
* : (input, textarea) {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
}
</style>

<style type="text/css">
img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
}
</style>

<script type="text/javascript">
window.addEventListener("keydown",function(e){
    if(e.ctrlKey&&(e.which==65||e.which==66||e.which==67||e.which==70||e.which==73||e.which==80||e.which==83||e.which==85||e.which==86))      {e.preventDefault()}
});
document.keypress=function(e){
    if(e.ctrlKey&&(e.which==65||e.which==66||e.which==70||e.which==67||e.which==73||e.which==80||e.which==83||e.which==85||e.which==86)){}
    return false;
}
</script>

<script type="text/javascript">
document.onkeydown=function(e){
    e=e||window.event;
    if(e.keyCode==123||e.keyCode==18){return false}
}
</script>

This anti-copy script, of course, needs the help of javascript. If you disable the javascript in the browser(in Firefox, you can do this by typing “about:config” in the address bar and clicking the option “javascript.enabled” to set the value to false), it will display a white mask to cover the content underneath so you can not see the real content.

To break the script and copy the content that is not allowed to be copied, you should disable the javascript first, then right-click on the page, click “Inspect Element”, and delete the node of the mask layer.

Another javascript code to prevent copy:

<script id="wpcp_disable_selection" type="text/javascript">
//<![CDATA[
var image_save_msg='You Can Not Save images!';
var no_menu_msg='Context Menu disabled!';
var smessage = "Content is protected !!";

function disableEnterKey(e)
{
  if (e.ctrlKey){
     var key;
     if(window.event)
          key = window.event.keyCode;     //IE
     else
          key = e.which;     //firefox (97)
    //if (key != 17) alert(key);
     if (key == 97 || key == 65 || key == 67 || key == 99 || key == 88 || key == 120 || key == 26 || key == 85  || key == 86 || key == 83 || key == 43)
     {
          show_wpcp_message('You are not allowed to copy content or view source');
          return false;
     }else
     	return true;
     }
}

function disable_copy(e)
{	
  var elemtype = e.target.nodeName;
  var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
  elemtype = elemtype.toUpperCase();
  var checker_IMG = '';
  if (elemtype == "IMG" && checker_IMG == 'checked' && e.detail >= 2) {show_wpcp_message(alertMsg_IMG);return false;}
  if (elemtype != "TEXT" && elemtype != "TEXTAREA" && elemtype != "INPUT" && elemtype != "PASSWORD" && elemtype != "SELECT" && elemtype != "OPTION" && elemtype != "EMBED")
  {
    if (smessage !== "" && e.detail == 2)
      show_wpcp_message(smessage);
    
    if (isSafari)
      return true;
    else
      return false;
  }	
}
function disable_copy_ie()
{
  var elemtype = window.event.srcElement.nodeName;
  elemtype = elemtype.toUpperCase();
  if (elemtype == "IMG") {show_wpcp_message(alertMsg_IMG);return false;}
  if (elemtype != "TEXT" && elemtype != "TEXTAREA" && elemtype != "INPUT" && elemtype != "PASSWORD" && elemtype != "SELECT" && elemtype != "OPTION" && elemtype != "EMBED")
  {
    //alert(navigator.userAgent.indexOf('MSIE'));
      //if (smessage !== "") show_wpcp_message(smessage);
    return false;
  }
}	
function reEnable()
{
  return true;
}
document.onkeydown = disableEnterKey;
document.onselectstart = disable_copy_ie;
if(navigator.userAgent.indexOf('MSIE')==-1)
{
  document.onmousedown = disable_copy;
  document.onclick = reEnable;
}
function disableSelection(target)
{
    //For IE This code will work
    if (typeof target.onselectstart!="undefined")
    target.onselectstart = disable_copy_ie;
    
    //For Firefox This code will work
    else if (typeof target.style.MozUserSelect!="undefined")
    {target.style.MozUserSelect="none";}
    
    //All other  (ie: Opera) This code will work
    else
    target.onmousedown=function(){return false}
    target.style.cursor = "default";
}
//Calling the JS function directly just after body load
window.onload = function(){disableSelection(document.body);};
//]]>
</script>
<script id="wpcp_disable_Right_Click" type="text/javascript">
  //<![CDATA[
  document.ondragstart = function() { return false;}
  /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  Disable context menu on images by GreenLava Version 1.0
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
      function nocontext(e) {
         return false;
      }
      document.oncontextmenu = nocontext;
  //]]>
</script>

<style>
.unselectable
{
-moz-user-select:none;
-webkit-user-select:none;
cursor: default;
}
html
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>

<script id="wpcp_css_disable_selection" type="text/javascript">
var e = document.getElementsByTagName('body')[0];
if(e)
{
  e.setAttribute('unselectable',on);
}
</script>

This is even better as it works through CSS when javascript is disabled.

Comments are closed, but trackbacks and pingbacks are open.