Rahul

Posted on Nov 6, 2020

Preventing copying text in a webpage 😁

#css #html #webdev #javascript

This feature is really important if you have a very very unique content website or an online eBook. So here is the basic post and required post for all of you. In this post, we'll see how to prevent copying text in a webpage and I have got a bonus too.

Do you want development news right on your default chrome or firefox page? Then get the amazing daily.dev extension. There are only PROS of getting this extension no CONS.

Lez Go 👊

Simple and Basic ONE!

-> This is the simple tutorial for preventing copying of an element on the web-page. Ex. p, div, main.
So here is how we can do that.

<div id="test" onmousedown='return false;' onselectstart='return false;'>
<!-- So we're disabling the texts coming under div tag-->

Let's see an example-

See you can't select the text now. 👊

Using CSS

-> You can directly disable by using CSS by just applying these properties to the whole body, you can move them to a class and apply that class to the elements you want to disable select.

/* Prevent text selection of a <body> element in all major browsers */
h2 {
    -youbkit-touch-callout: none; /* iOS Safari */
        -youbkit-user-select: none;   
/* Chrome 6.0+, Safari 3.1+, Edge & Opera 15+ */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none;       /* IE 10+ and Edge */
    user-select: none;      /* Non-prefixed version,
                  currently supported by Chrome and Opera */
}

Here is the example for that-

Disabling Right Click

-> So technically no chances of copying.

We will use JavaScript and jQuery

document.oncontextmenu = new Function("return false;");

///JavaScript

$(document).ready(function () {
    $("body").on("contextmenu",function(e){
        return false;
    });
});

// jQuery

The main motive is to capture the onContextMenu event, and return false in the event handler. So, this will block the access from mouse right click as well from the keyboard.

Do you want development news right on your default chrome or firefox page? Then get the amazing daily.dev extension. There are only PROS of getting this extension no CONS.

Thanks For Reading.

If it's helpful. Then Like, Share and React. 😁😎

Top comments (30)

Shrihan • Nov 6 '20

Well, I can copy using DevTools 😂
Nice article, though 👍

Rahul • Nov 6 '20

Cheater😁

AmgedAlmogahed • Nov 6 '20

Google lens can copy any text any where

Rahul • Nov 6 '20

Found the second cheater.

ItsThatHexagonGuy • Nov 6 '20

Pretty sure that this also makes the content inaccessible

Rahul • Nov 6 '20

Yea it will maybe.

Pacharapol Withayasakpunt • Nov 6 '20 • Edited

Whatever you may try, one can always use Puppeteer, DevTools or View Page Source.

However, I would want to send signals to say, you are not intended to copy, unless you want to break the law. (And disable easy-copying, without breaking a11y, e.g. tab.)

Rahul • Nov 6 '20

Hahaa yea.

jan paul • Nov 6 '20

user-select: none ?

Rahul • Nov 6 '20

Yea simple. (See the browser support too brother)

jan paul • Nov 6 '20

i use css shims for this :-)

Rahul • Nov 6 '20

amazing.

Aayushi Sharma • Nov 6 '20

I think we can access content using Request module.

Rahul • Nov 6 '20

I found the 4th cheater.

Shrihan • Nov 6 '20

This is also identical to using, say, cURL or HTTPie.
I cheated two times🙄😂

Rahul • Nov 6 '20

I'm requesting the Dev community to ban you 😂😂😂😂

Adam Crockett 🌀 • Nov 6 '20

It's better to choose a correct license I promise there is no merritt to any of the above techniques. Get the LAW on your side.

Rahul • Nov 6 '20

Ahh!! 🤣

Adam Crockett 🌀 • Nov 6 '20 • Edited

🚨🚔 DMCA anyone who dares oppose your IP

William Weiss • Nov 6 '20

So I tried the example in my favorite browser, curl, and had no problem copying...

Mahmoud AlSharif • Nov 6 '20

Thanks for sharing!
There is also more robust solutions like rendering text within the canvas or even better transform the text to SVG in the backend.