JavaScript奇技淫巧：網(wǎng)頁內(nèi)容防復(fù)制
JavaScript奇技淫巧：網(wǎng)頁內(nèi)容防復(fù)制
很多時(shí)候，我們不希望自己網(wǎng)頁上的內(nèi)容被復(fù)制，比如原創(chuàng)內(nèi)容、小說、文章等等。
在網(wǎng)頁前端，使用JavaScript編程，似乎有不少防復(fù)制方法，比如：禁用copy事件、禁止鼠標(biāo)右鍵菜單，等等。
但本文要介紹的，不是這些常用的方法，而是把文字變成canvas畫布，畫出的文字是不能被復(fù)制的。
效果展示
如下圖所示，從網(wǎng)頁中復(fù)制文件時(shí)，其中有些字是無法選中的。
復(fù)制后再粘貼，會發(fā)現(xiàn)缺失了一些文字：
技術(shù)原理
在指定的文字容器中，將某些文字轉(zhuǎn)化成大小與文字相同的canvas（畫布），并將文字畫在canvas上，形成了文字+圖片的組合。如此，選擇文字時(shí)，圖片無法選中，便實(shí)現(xiàn)了防復(fù)制的效果。
源碼
<html>
<body>
? ? <p id="p1">
? ? ? ? JShaman是專業(yè)的JavaScript代碼混淆平臺，用于JS加密、JS混淆。<br>
? ? </p>
? ? <script>
? ? ? ? //將指定文字換成canvas
? ? ? ? function word_2_canvas(target, word,index){
? ? ? ? ? ? var c1 = document.createElement("canvas");
? ? ? ? ? ? //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)
? ? ? ? }
? ? ? ? //以canvas上畫出文字
? ? ? ? function vanvas_fill_word(word,index){
? ? ? ? ? ? var c2;
? ? ? ? ? ? c2 = document.getElementById("c"+index).getContext("2d");
? ? ? ? ? ? //字體和大小
? ? ? ? ? ? c2.font = '16px Microsoft YaHei';
? ? ? ? ? ? //在Canvas上繪制文本
? ? ? ? ? ? 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>
安全性提升
在上面的JavaScript源碼中，可以看出哪些文字被轉(zhuǎn)化成為了圖片，為了防止源碼分析進(jìn)而被反制，可以用JShaman進(jìn)行JavaScript源代碼混淆加密，加密后的代碼中文字等關(guān)鍵信息可以被隱藏。
