Stop People Copying Your Content with only HTML & CSS

Posted on: November 27, 2019
Blog Web

Stopping people from copying content from your website isn’t the best idea. But, people do opt to do it. Usually, people will go for the simple approach of using Javascript. But I’m going to tell you of a new way I recently came across.

There are multiple CSS extensions and CSS directives which disabled the user selection of text on an element. Further, you can actually even disable the mouse right-click with an attribute.

Copy and paste mac

So, how do we do this? Firstly, adding an attribute to a page element, seen below will disable the right-click.

oncontextmenu="return false" 

Or if you’re looking to remove right-click on the whole body:

<body oncontextmenu="return false">

The directive in CSS of user-select: none; will disable any highlight and copying on the page or element. It’s supported in modern browsers, with the exception of Safari on iOS and Mac OSX.

Here’s an example with all prefixes. But of course you wont need this if you’re using a compiler.

.nocopy {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

Prefixes listed against browser usage:

iOS Safari-webkit-touch-callout: none;
Chrome/Safari/Opera-webkit-user-select: none;
Konqueror-khtml-user-select: none;
Firefox-moz-user-select: none;
Internet Explorer/Edge-ms-user-select: none;

We wouldn’t ever recommend using this setting in a live or production website as it’s very unfriendly for any user using your site. But, it’s an interesting feature that a few years ago would have only been achievable via Javascript.

Northern Digital Shortlisted
Northern Digital Shortlisted
Posted on: December 6, 2019

Today we’ve been shortlisted for a Northern Digital Award on our work on a current client of ours, Nemesis Now. We couldn’t be happier with the site and neither could Nemesis Now Let’s hope we win. Short and sweet…

Read more
Stop People Copying Your Content with only HTML & CSS
Stop People Copying Your Content with only HTML & CSS
Posted on: November 27, 2019

Stopping people from copying content from your website isn’t the best idea. But, people do opt to do it. Usually, people will go for the simple approach of using Javascript. But I’m going to…

Read more
Magento, why you should upgrade your store.
Magento, why you should upgrade your store.
Posted on: November 21, 2019

Taking the step from Magento 1 to Magento 2 might seem daunting, but once you’ve migrated to Magento 2 you’ll be taking advantage of the latest features and functionality. Updating to Magento 2 also…

Read more