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.

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.