Are people copying content from your website? Good content always gets copied, thereby causing a loss to the original creator.

Websites of competitors end up copying your content without consent. Blog content, Ecommerce product content, etc., are always in threat.

This tutorial will show you how to use Javascript and CSS to prevent people from copying text from your website.

Let's follow simple steps which will completely prevent people from copying text from your website.

3 steps to prevent Copy Paste of Website Content using Javascript and CSS

1. Disable mouse right-click (context menu) to prevent copy paste

Right Click of mouse and copying text is the most common method that people follow. Let's prevent this seamlessly with just a few lines of code.

At first, we have to listen to the context menu event. We can do that by adding an event listener - addEventListener("contextmenu") and prevent it from its default behaviour that is, the menu opening up by - e.preventDefault().

document.addEventListener("contextmenu", (e) => {
  e.preventDefault();
}, false);

If you observe, we are not just targeting the "Right Mouse Click" event alone. But, the contextmenu itself, as this will even cover the "Touch Screen" devices.

2. Disable Clipboard

We have gotten rid of the biggest problem in the first step. Now, let's disable the keyboard shortcut that people commonly use - "CONTROL/CMD + C" and "CONTROL/CMD + V".

Here we will listen to the browser copy event. We will prevent the default behaviour here by - e.preventDefault().

document.addEventListener("copy", (e) => { 
  e.preventDefault();
}, false);

3. Prevent Selection and Highlight using CSS

Now that most of the work is already done using JavaScript in the above steps, but, we will take extra caution here to prevent selection and highlighting of text.

Though user-select: none should be good enough, but, we will go ahead and add *::selection { background: none } to further remove the background color of the selected text. By doing this, people won't be able to see if the text has been selected.

* { user-select: none; }
*::selection { background: none; }
*::-moz-selection { background: none; }

Legal notice

The above steps have made your website more secure and less prone to people copying your content.

You can still protect your content in the following ways-

• Watermarking Images and Videos - Adding watermark with opacity of 50% will be a good first solution. People who copy your images and videos, will now be attributing your content.
• Contact the owner of the website - Contact the website owner and request them to takedown the content.
• Whois and Hosting Company - Check the website's hosting using whois and other tools online. Contact the hosting company and request them to take down the copying website with DMCA notice.

Hope you will be able to protect your content and prevent competitors from copying and pasting your website content.