Many times, we don't want the content on our web pages to be copied, such as original content, novels, articles, etc.
On the web front-end, there seem to be many ways to prevent copying through JavaScript programming, such as disabling the copy event, prohibiting right-click menu, etc.
However, what will be introduced in this article is not these common methods, but converting text into canvas , and the text drawn on canvas cannot be copied.
Target
The goal we want to achieve is as follows,when copying files from the web page, some of the text is not selectable.
After copying and pasting, you will find that some text is missing.
Isn't it amazing?how is it achieved? Below is the secret.
Theory
In a specified text container, convert some text into a canvas of the same size as the text, and draw the text on the canvas, forming a combination of text and images. In this way, when selecting text, the image cannot be selected, thus achieving the anti-copy effect of this article.
Source
<html>
<body>
<p id="p1">
JShaman是专业的JavaScript代码混淆平台，用于JS加密、JS混淆。<br>
</p>
<script>
function word_2_canvas(target, word,index){
var c1 = document.createElement("canvas");
c1.width = 20;
c1.height = 20;
c1.id = "c"+index;
document.body.appendChild(c1);
var t1 = document.getElementById("c"+index).outerHTML;
c1.id = "";
document.getElementById(target).innerHTML = document.getElementById(target).innerHTML.replace(word, t1)
}
function vanvas_fill_word(word,index){
var c2;
c2 = document.getElementById("c"+index).getContext("2d");
c2.font = '16px Microsoft YaHei';
c2.fillText(word, 1, 18);
}
word_2_canvas("p1","淆",1);
word_2_canvas("p1","加",2);
word_2_canvas("p1","台",3);
vanvas_fill_word("淆",1);
vanvas_fill_word("加",2);
vanvas_fill_word("台",3);
</script>
</body>
</html>
Security Enhancement
It can be seen from the above JavaScript source code which words have been converted into images.
To prevent source code analysis and subsequent countermeasures, we can use the JShaman JavaScript Obfuscator to obfuscate and encrypt JavaScript source code. Key information such as text in the encrypted code can be hidden, as shown in the following figure.
Top comments (3)
this won't stop someone from using their phone to screenshot it :)
or even better, google translate can scan it and translate it to any language and you can copy that.
Where there is a will there is a way. The only way to really secure it is to put it behind an account login and only allow access to trusted users ,and even then, it'll get out.
Oh, I've tossed whole pages of books I'm reading to friends to show them funny or beautiful writing. I'm thankful as a whole that such features aren't blocked, because we as humans have long since made a habit of sharing media. But I don't believe such sharing is allowed per some legal agreement I sign somewhere using x-y-z reading app. But...whatever. In that sense - like you said, where there's a will there's a way. But I do think most sharing ultimately helps a product over hurts it.
Ah, I just checked the site. I assumed it was a free extension. Got me there! I do believe people should be paid for their talents. Only catch is I don't have any use for this currently. But it's something good to know about, pending something in the future does arise. I did try to faux-demo it with some dummy code. But the key was the catch. Either way, thanks for the heads up!