Hello everyone,

In this post, I am going to explain some features of HTML/CSS that can protect your content on your website. Protection of the website content is a common problem that needs to be taken seriously, especially if you have unique content and you do not want this content to appear on any other websites.

Let me begin with sharing a feature of CSS that disables the selection of some or any text on your website. In order to accomplish this we can use user-select property in CSS. Also for images we can disable the user-drag property along with the right click however disabling the right click can decrease the user experience so please think twice before disabling it.

This is the CSS code to disable user-select and user-drag:

/* Disables the selection */
.disableselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge*/
   user-select: none;          /* Non-prefixed version, currently 
                                  not supported by any browser */
}

/* Disables the drag event 
(mostly used for images) */
.disabledrag{
   -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
   user-drag: none;
}

This is the HTML code to be able to use the selection and drag disable. In the example you will see a normal text, a non-selectable text, a selectable but non-copyable text and a protected image. I used oncontextmenu property of img to disable the right click. When the user right clicks, he/she is going to see "All Rights Reserved ©" :

<p> You are free to select me :) </p>
<p class="disableselect"><b> You can not select me!</b></p>
<p oncopy="return false;" oncut="return false;" 
oncontextmenu="window.alert('Nice try! Even Ctrl+C or Ctrl+X will not work!');return false;">
<i>You can select but can not copy me ;)</i></p>

<img oncontextmenu="window.alert('All Rights Reserved &copy;');return false;" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YBEyT732tI3guqfe8-srsv5Ca8yBjUQZGgy2r6B-0FJvWTTGU3xmxRsYsX72IrnTDLLX3GZKt2RZNRuOr7MM-UBncFV9sIDkPI12a6XtRRDJRbBqvXOsqgeE75bqH4b73M_Aui-ifs0/s1600/logos-min.png" 
class="disableselect disabledrag"/>

Here is the result. Try it :)



If you would like to disable right click for all images on your website, we need to use JQuery:

$('img').bind('contextmenu', function(e) {
  window.alert('All Rights Reserved \u00A9');  
  return false;
});

This is the result;



These methods are basic methods to prevent others from stealing your content, however it is not entirely possible to stop a determined person from doing that. Anything displayed on the screen has already been downloaded and cached so this information can easily be accessed by the user. Also most of the modern web browsers support some development tools to view or edit the elements on the website so this is another way to access the content. 

Finally, you should know that preventing the visitor's abilities for the entire website is usually a bad practice and should be avoided.

Please leave a comment if you have any questions or comments!