[教學]如何用語法保護網頁文章著作權__(3) 超連結偽裝術

(Pic from: 123rf.com)先來個前情提要，「上一篇」 的測試區在部分 WIN7 + IE8 會失效的情形，由於最終找到了替代方案，使得本篇內容得以繼續連載下去。

「第二篇」防盜機制的缺點在於，只能防範初階複製者，就像機車上了大鎖，一般的竊賊覺得破壞大鎖麻煩，為了節省時間就另外尋找目標了。第二篇的機制很明顯地告訴訪客，我不讓你複製全文，因此覺得麻煩的人就不會複製了。而對於中階竊賊，他覺得他時間很多，也不怕麻煩，願意把機車扛回家慢慢鋸大鎖，例如網頁另存新檔，鉅細靡遺地把 html 標籤慢慢剔除來獲取全文；或是想辦法找到瀏覽器 javascript 的開關，不斷地進行開關的動作來複製全文。雖然這麼閒的人不多，但對於不怕麻煩的閒人，有沒有機制可以防範他們呢？

　

一、構思防盜機制

會被中階竊賊鋸大鎖的主要原因在於──機車上了大鎖，一眼就看到有防盜機制，只要執行複製指令發現文章內容被切掉，就知道用了 javascript 這道大鎖，以下是我針對此點防範的構思：

1. 從心理學上而言，如果我們不切掉文章內容，而是允許訪客全文複製，那麼訪客還會去關掉 javascript、或是網頁另存新檔嗎？相信找不到這麼沒事找事做的人。所以，降低中階盜賊戒心的方法就是──讓其誤以為網頁沒有防盜機制，可以全文複製，這樣就成功了一半。

2. 在「上一篇」你如果有自己實作的話，假設你設定了 200 字以上不允許複製全文的話，那麼當選取的內容跨越數個段落，將會發現──複製貼上內容的段落不見了，除了版權宣告以外的字會黏在一起(成為一個段落)。這一點在上一篇是無妨，因為已經明確告訴訪客，我就是不讓你全文複製；但是在本篇就不行了，因為很明顯複製的內容有點問題，段落消失會讓中階盜賊起疑心的，本篇必須解決此問題，讓複製的段落跟原文一模一樣。

3. 最後，根據「保護網頁著作權的初階構思__（一）文章篇」，最好的防盜方法是「四、多放置超連結」，如果我們在純文字複製的內容裡面，暗藏一些很不明顯的超連結指向我們網頁，這樣子瀏覽中階盜賊網頁的訪客，看到這些超連結就知道原文出處在哪裡了。



二、設計防盜機制

根據以上的構思，我設計了以下的防盜機制：

1. 在被複製的全文內容裡，尋找所有的刮號，例如 「」、（）、[]、{}、""、() 等這些符號，把部分刮號的內容加上我們網頁的超連結，如此整篇文章乍看之下沒有任何問題，但只要有人去點刮號內的超連結，就會發現原文出處其實在我們家。

2. 如果整篇文章找不到半個刮號(應該很困難吧？)，那麼在文章中每二～四個段落，找兩個中文字 (或一個英文字) 加上超連結。

3. 在文章的內容裡面偷藏版權宣告，由於是夾雜在文字當中，位置不能突兀讓前後句不通順，也不能出現在太顯眼的位置，我會選擇放在文章中段以後，找到逗號後插入。

4. 在字數很少的情況下，偷藏版權宣告很容易被發現，因此我會設定複製一定字數以上(例如 300 字) 才啟動語法，好保護版權宣告的隱蔽性。

除了以上的機制，相信根據我的防盜構思，你也可以想出你的防盜機制出來。其實困難的是想法，作法常常不難，只要有一點 javascript 的底子，想法多半能透過程式碼實現。


三、安裝程式碼

雖然我提出了四點的機制，由於篇幅的關係，本篇選擇第 3、4 點來實作。同樣的，如果有安裝過「第一篇」或「第二篇」程式碼到範本的話，請將原本 </body> 後面的程式碼刪除。做完以上動作後，一樣找到 </body>，在它的後面一行加入以下程式碼：

1. <script type="text/javascript">
2. //<![CDATA[
3. var Copyright_Setting = {
4.   allowText: 300,
5.   copyright1: "本文出處：",
6.   copyright2: "WFU BLOG",
7.   keySet1: 87,
8.   keySet2: 70,
9.   k1: 0,
10.   k2: 0
11. };
12.  
13. function Add_Copyright() {
14.   function del(){
15.     body_element.removeChild(newdiv);
16.   }
17.   function addLink(text){
18.     var k = text, l = (k.length) * 2 / 3, m = Math.ceil(l);
19.  for (var i = m; i< k.length; i++) {
20.    if(k.charCodeAt(i) == 65292 || k.charCodeAt(i) == 44) {
21.         var n = text.substring(0, i + 1), o = text.substring(i + 1), p;
22.         if (k.charCodeAt(i) == 65292) p = n + pagelink + "，" + o;
23.         if (k.charCodeAt(i) == 44) p = n + pagelink + "," + o;
24.      return p;
25.    }
26.  }
27.   }
28.   var body_element = document.getElementsByTagName('body')[0];
29.   var selection;
30.   var pagelink = Copyright_Setting.copyright1 +"&lt;a href='"+ document.location.href +"'&gt;"+ Copyright_Setting.copyright2 +"&lt;/a&gt;"; 
31.   var newdiv = document.createElement('div');
32.   newdiv.style.position = 'absolute';
33.   newdiv.style.left = '-99999px';
34.   body_element.appendChild(newdiv);
35.  
36.   if(window.getSelection){
37.     selection = window.getSelection();
38.     var a = selection + "";
39.     if(a.length > Copyright_Setting.allowText && Copyright_Setting.k2 == 0) {
40.       newdiv.appendChild(selection.getRangeAt(0).cloneContents());
41.       var copytext = newdiv.innerHTML;
42.       newdiv.innerHTML = addLink(copytext)
43.       selection.selectAllChildren(newdiv);
44.       window.setTimeout(del,5);
45.     }
46.   }
47.   if(document.selection) {
48.     var y = document.documentElement.scrollTop || document.body.scrollTop;
49.     var range = document.selection.createRange();
50.     selection = range.text;
51.     if(selection.length > Copyright_Setting.allowText && Copyright_Setting.k2 == 0) {
52.       var copytext = addLink(range.htmlText)
53.       newdiv.innerHTML = copytext;
54.       range.moveToElementText(newdiv);
55.       range.select();
56.       window.setTimeout(del,5);
57.       window.scrollTo(0,y);
58.     }
59.   }
60. }
61.  
62. function Copyright_Keydown(event){
63.   event = (event) ? event : ((window.event) ? window.event : "");
64.   var key = (event.keyCode) ? event.keyCode : event.which;
65.   if(Copyright_Setting.k2 != 1){
66.     if(Copyright_Setting.k1 == 0){
67.       if(key == Copyright_Setting.keySet1) {Copyright_Setting.k1 = 1}
68.       else {Copyright_Setting.k1 = 0}
69.     }
70.     else {  
71.       if(key == Copyright_Setting.keySet2) {Copyright_Setting.k2 = 1}
72.       else {Copyright_Setting.k1 = 0; Copyright_Setting.k2 = 0}
73.     }
74.   }
75. }
76.  
77. document.body.oncopy = Add_Copyright;
78. document.body.onkeydown = Copyright_Keydown;
79. document.body.ondragstart = function(){return false};
80. //]]>
81. </script>

以上紅字部分的參數可以自訂──

D：訪客複製時如果超過這個參數的字數，才啟動「附加原文出處」的機制。預設為 300 字，可依個人需求修改，500 或 1000 都可；如果字數設太少的話，可以自行看看複製後效果的隱蔽性是否足夠。

E：附加版權的字串，可自行修改。

F：附加版權超連結的文字，通常設為自己的部落格名稱。

其實如果按照 E、F 的原始設定，我覺得自己的部落格名稱容易被認出來，而被中階盜賊察覺，建議可以改為類似以下文字──

E：更多範例請參考─

F：此網頁

這樣的改法藏在眾多文字之中，既不易被複製者發覺，訪客也容易去按。本篇的「五、複製效果測試」就是採用這樣的字串。

以下跟「上一篇」的設定一模一樣──

G：允許自己複製的第一個暗碼，87 代表按下 w 鍵。

H：允許自己複製的第二個暗碼，70 代表按下 f 鍵。

G～H 的意思是，按下複製之前，只要依序按下 w 及 f 鍵，按的速度沒有限制，就可解開附加版權的機關，能夠進行全文複製。「這個網頁」的後半部可以查詢每個鍵的鍵值，把想要更改的鍵值依序填入 G 行及 H 行即可，請注意大小寫的鍵值不同。

接下來是各部分的程式碼說明，不瞭解程式碼可跳過，直接看「五、複製效果測試」。


四、程式碼說明

流程與架構基本上與「上一篇」是一模一樣的，因此只針對不同處說明──

AD：附加版權的格式更改，把 <br/> 的換行語法全去掉，才能有效隱藏在文字之中不被察覺。

AM：複製的字數超過預設值、或是沒有按過允許複製的密技鍵，就對複製的內容動手腳。

AN～AP：上一篇的作法是將選取內容 window.getSelection() 轉換成字串的格式再加工，但轉換成字串時 html 標籤 (如 <br/>、<p/>) 會不見，這就是段落會消失的原因。為了保存 html 標籤，參考了「此網頁」的語法，得以對選取內容的 innerHTML 進行加工。

Q：選取的內容丟到 addLink 函數處理。

R：插入版權宣告的位置大約為全文的 2/3 處，這裡也可改為自己想要放的位置，例如 4/5。

S～T：從複製內容的 2/3 處一直到結束，尋找全形逗號 "，"(也就是 charCodeAt 為 65292) 或半形逗號 "," (也就是 charCodeAt 為 44)。如果你整篇文章都不使用逗號，而是用空格讓句子分斷的話，請自行找一下空格的 charCodeAt 值，再修改這裡的程式碼。

U～V：找到全形逗號時，在逗號後面加上版權宣告的超連結，句末補上全形逗號，把偽裝做完整。

W：若找到半形逗號時，在逗號後面加上版權宣告的超連結，句末補上半形逗號，保持偽裝一致性。

AZ：這裡是 IE 部分把選取區的 innerHTML 做加工的改法。

以下部分同「上一篇」，因此不再贅述。


五、複製效果測試

由於本篇測試效果的字數需求比較多，在本文用測試區的話效果會比較差，建議前往測試網頁進行以下步驟測試：

點此看測試網頁

1. 選取超過 300 字，字數越多越好，跨越多個段落。
2. 複製後開一篇新文章貼上，存檔。
3. 尋找 "更多範例請參考─此網頁" 字串，這就是超連結隱身之處，你覺得會不會很顯眼或突兀呢？當然，這個字串是可以自訂的，也可以更改語法多放幾個地方。
4. 如果用滑鼠選取超過 300 個字元後，依序按下 w 及 f 鍵 (注意是小寫) 再進行複製，則不會附加隱藏超連結。


六、"阻止全文轉載" 與 "超連結偽裝術" 比較

這兩種防盜機制孰優孰劣，我個人的看法倒是覺得很難分別。「阻止全文轉載」可以防初階盜賊，不能防中階有技術的盜賊；「超連結偽裝術」可以防各種等級的盜賊，但無法防 "再次細心檢查文章內容" 的盜賊。那麼究竟是中階盜賊的數量比較多呢？還是會細心檢查文章內容的盜賊多呢？我沒做過市調，所以沒有答案。

然而，本篇為倚天劍的進階招法，高等劍術還在鍛鍊中，最終篇倚天、屠龍相互搭配，應該有機會一統江湖。神器要使得好，基本功不可少，接下來必須循序漸進，先補足一些其他基本功的內容，最終篇得再等等。

著作權保護系列文章：