WangLiwenMany 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.
