How to protect the content and images from theft using JavaScript and CSS - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

How to protect the content and images from theft using JavaScript and CSS

In this article today I am going to explain How to protect the content and image from theft using JavaScript and CSS

Implementation:

 I have a page and want to disable the right click on it. Add the below given script in head section of page.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script type="text/javascript">
        $(document).bind("contextmenu", function (e) {
            e.preventDefault();
        });
</script> 

If you want to show message on right click so add the below given script.
  <script type="text/javascript">
        $(document).bind("contextmenu", function (e) {
            e.preventDefault();
            alert("Right Click is disabled!!!");
        });
</script>

This script will disable the mouse right click. If any image on page user can easily drag and drop the image to desktop.

How to protect the content and image from theft using JavaScript and CSS

So set the CSS property pointer-events of image to none. Add the given style in Head section of page.

  <style>
   img {
  pointer-events: none;
}
   </style>


  In this article we have learn How to protect the content and images from theft using Javascript and CSS in Asp.net(C#, VB). I hope you enjoyed this article.

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon