Restrict copying content with CSS and JS

One caveat is that you can't absolutely prevent content copying. However, you can restrict these actions.

This article will show you how to use CSS & JS code to restrict copying content on the website.

Normally, in order to copy a Text or Image, users will use operations such as Select, Drag & Drop and Right Click. Now, we're going to block it.

To prevent behaviors like Drag & Drop, Select, you just need to add the following CSS code:

* {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

To prevent right click, add the following JS:

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

Note: Older browsers may not support these features. See table below for details:

CSS: user-select

Element API: contextmenu event

For websites that use Joomla source code, you need to install the Custom HTML module to add them.

You can also add advanced settings like apply this restriction only to guests (Access) or to certain pages (Menu Assignment).

I hope this article will be useful to you!