[教學]保護網頁著作權的初階構思__(2) 網頁篇

(Pic from: 123rf.com)在上一章「文章篇」，如果我們的網頁整個被搬走，損失的是想法及創意；而當網頁還包括了圖像、影音，整個被搬走時損失的可大了，我們還得負擔嫖竊者的流量，哪天不小心爆個量我們就被停權了。

因而「網頁篇」的重要性比「文章篇」來的大，不過好消息是，保護「網頁」比保護「純文章」來得便利、省時許多，只要學會了技巧不需要比保護「文章」來得多花心思。


一、圖片加浮水印

防止圖片被盜連、保護網頁空間的流量是必須的，而最好的方法就是加浮水印。或許有人對於幫大量圖片加浮水印視為畏途，不過有個免費軟體 Picture-Shark 非常好用，簡單幾個步驟就能幫大量圖片批次做出非常漂亮的浮水印，因此建議參考此「教學網頁」學會操作此軟體，就不太會發生網站圖片整個被搬走的慘劇了。


二、圖片不加浮水印

其實還是有多種理由讓某些站長們不想幫圖片加浮水印，有的怕破壞美感，有的是攝影作品網站不適合加，有的是不一定擁有肖像權所以最好不要加，那該怎麼防盜連呢？

1. 使用特殊語法：請參考此網站「圖片防盜鏈常用方法」，有些方法滿有趣的，讓使用者下載錯的檔案、下載到切成一半的圖片、下載到有浮水印的圖片..等等，有興趣可以參考看看。

只不過部分方法與「分享」的前提相抵觸，放上網路又不讓人完整下載，因此個人不喜歡；不過如果是營利的網站，收費才給下載完整圖片，那麼這些機制就是合理的。

另外就是無論使用什麼樣的語法，遇到有耐心的盜賊打開網頁原始碼、或是使用瀏覽器的 debug 工具，還是能找到該圖片的連結，仍然存在被盜連的風險。

2. 放進內嵌文件：另一個權宜之計也許是將圖片丟到 PDF、製作 Flash 檔等，如同「文章篇」第 6 點，將之內嵌到網頁中，只不過用 PDF 檔麻煩，而製作 Flash 也沒那麼簡單。

3. 存錢買網頁空間：如果是非常高品質的圖片，不想加浮水印又不想被盜連，最保險的方法就是放在支援 htaccess 的網頁空間了，可惜付錢的方案非本文終旨，因而就此略過。免付費的網頁空間也有少數支援 htaccess 的功能，但是站長們得不定時擔心該公司何時會倒，常常得花心力再尋找新的網頁空間。「這個網頁」介紹了一個支援 htaccess 的免費網頁空間 000webhost，心臟比較大的站長可以評估是否賭一把。


三、網頁加上「防盜碼」

我看過某站長的網頁，內容是自己拍的藝人簽唱會過程及許多整理的相片、文字敘述等等，站長當然是沒有藝人的肖像權，也不適合在這些圖片加上版權宣告。結果他精心整理的網頁，沒兩天竟然出現在該藝人的官方後援會網站，原封不動整個網頁全部搬過去，後來後援會留言版被人罵轉載也不註明出處，該後援會才說「有啊，我們有註明」，我仔仔細細地將後援會網頁從第一行看到最後一行，才看到最後小小的一行：內容來源為網路。嗯～個人非常地為那位站長不值。

網頁有圖片的話可以加浮水印防盜，而非圖片的網頁，或是以上情形的網頁，或是像「正妹報時（美人時計）彙整」這樣的網頁，應該如何防盜呢？「機車防盜碼」是為機車烙上獨一無二的一組號碼，我們的網頁也有一組獨一無二的識別 ID，就是「網址」。如果我們在網頁原始碼中加入一組 javascript，每次執行都檢查網址正不正確，不正確時跳出警語，就能有效遏阻原始碼被搬走。

<script>
var t=encodeURIComponent(window.location);
if(t.search("wayne-fu.blogspot")<0){
alert("This page is originally from WFU BLOG:http://wayne-fu.blogspot.com/")
}
</script>
以上為語法的範例，意思為將我們網站的網址編碼處理，接著用 search 函數尋找我們的網址字串，如果沒有找到，就表示我們的網頁原始碼被搬家了，立即用 alert 顯示警告語，宣示原始網頁出處。

請將紅色部分 "wayne-fu.blogspot" 改為自己網頁的字串，但請注意如果網址需要有斜線 "/" 的部分，請將所有斜線字串 "/" 改為 "%2F"；而藍色部分警告語的內容也請自行更改。當然，如果想要修理一下盜賊，除了 alert 警語，想要添加什麼 javascript 請發揮自己的創意。其實，用 alert 是警告成分居多，不用 alert 而默默地在盜賊的網頁搞花樣他也很難發覺～～


四、原始碼加密

進階盜賊看得懂程式碼，複製完我們的原始碼，如果被他發現了我們的「防盜碼」，只要他將防盜碼那一段語法全部刪除，我們的網頁還是會被偷了。因此，除了加裝「防盜碼」以外，我們還得替原始碼買個保險──「加密處理」。

1. 簡易加密

原始碼最簡易的加密方式是將網頁原始的 HTML 碼利用 javascript 的 escape 函數編碼，例如「這個網頁」。當然初階盜賊看不懂這樣的編碼，但稍有程度的只要使用 unescape 就可以還原回去。

雖然簡易加密沒有用處，不過這樣的簡易編碼有個好處，可以快速地將 HTML 碼轉換成 javascript，以利進階的加密之用。

2. 進階加密

使用 javascript 加密就有無數種可能性了，要嘛有付費軟體，要嘛自己寫方程式編碼，不過不用這麼累，也有免錢又方便的方案，使用 google 搜尋「+加密+在線+javascript」就有用不完的在線加密工具可以使用。以「Free Javascript Obfuscator」、「BIN2HEX」這兩個線上加密網站舉例說明：

A. 先在「簡易加密」提到的網站，將網頁原始碼貼進去，按下 "開始編碼" 後會得到一串 「document.write(unescape("........."))」 的編碼，將這一串內容剪下。

B. Free Javascript Obfuscator：把 A 點剪下的內容貼到 "input:" 欄內，按下最下方的 "obfuscate" 即完成編碼，將 "obfuscated:" 欄內所有加密內容貼回「簡易加密」的網頁 <script> 與 </script> 之間，現在我們可以按 "預視結果" 看看這堆亂碼的執行結果是不是跟原本的一模一樣啊？如果 OK 的話，就可以把全部內容貼到自己網頁了。

C. BIN2HEX：把 A 點剪下的內容貼到 "粘貼代碼：" 欄內，按下 "編碼" 即完成編碼，將加密內容貼回「簡易加密」的網頁 <script> 與 </script> 之間，之後按 B 點進行即可。

3. 高階混淆

如果有辦法弄到 「Jasob」這套 javascript 最強悍的混淆軟體，其效果遠勝前兩種加密方法，因為加密後的內容有一些機制可以還原、或是有方法看得到，而 Jasob 處理過後的程式碼就算未加密也完全看不懂，尤其是程式碼越長混淆效果越佳。可惜這是付費軟體，不過有三十天的試用期，所以短期有加密需求時不妨試試看。


進行了這麼複雜的加密動作後，其實中上層級的盜賊還是有辦法可以看到內容，不過這畢竟是少數，以他們的實力，駭我們小老百姓的網頁、部落格是能拿到什麼利益呢？遇上了也只好認了，至少我們做了我們該做的，絕大多數中下階層的盜賊已經被我們防堵住了。

只不過全網頁加密有個缺點，這會造成日後修改網頁內容不易，因為加密結果不易還原(我們自己就能還原那還要加密嗎？)，要改幾個字而以還要找出原來的備份，沒有備份就慘了。因此建議加密之前原內容絕對要備份，而大部分文字的部分就不需要加密了，只要視選取的連續性與方便度，選取部分重要的 HTML 標籤、圖片、「防盜碼」的語法、及這之間夾雜的文字來加密即可。

另外，在上一章「文章篇」中，只要我們運用各種提到的各種技巧，能夠逼使竊取者需要複製網頁原始碼才能搬走我們的網頁，此時利用第三、第四點的「防盜碼」及「原始碼」加密，就能有效地遏止網頁被盜了。


五、防網頁被框架

2014.5.7 補充

防止網頁被框架，WFU 已經找出最佳的保護程式碼，請參考這篇「如何讓網站不被 7headlines 用 IFRAME 內嵌框架」。

所有保密防諜的動作都做了，網頁還是有可能被移花接木，例如對方使用 <iframe> 標籤就可以把我們的網頁包覆在他的網頁之中，這樣看起來我們的網頁就成了他網頁的一部份，而且廣告錢一樣是他在賺，這是非常無良的一種舉動，在「這篇文章」也詳細說明了網頁被蓋台的後果及提供對策，在 </head> 之前加入以下語法：。

<script language="javascript">
<!–
if (top.location != location) top.location.href = location.href;
//–>
</script>
這原理很簡單，因為網頁被框架後，最上層的網頁(對方網頁)與我們網頁的網址是不同的，利用 javascript 偵測目前的網頁與最上層網頁是否相同，就能解決這個問題了，如果網址不同時，強制將我們的網址推到最上層。

不過奇怪的是 Blogger 似乎不吃以上語法，至少 WFU BLOG 是失效的，搜尋了許多防止框架的語法也都失效，直到搜尋到「這個網頁」的語法才成功，一樣加在 </head> 前面：

<script language="javascript">
function location_top(){
if(top.location!=self.location){
top.location=self.location;
return false;
}
return true;
}
location_top()
</script>
至於文中作者提到「網上的高手也想到了破解的辦法，那就是在父框架中加入腳本var location=document.location或者var location=""，所以這個方法也就不推薦了」，自己試了一下，作者提到的破解辦法似乎起不了作用，所以本 BLOG 仍繼續使用此語法。

因此，請想辦法拿兩個不同的網址交互框架試試看吧，如果以上提供的兩個語法都失效的話，請再 google 別的「防止網頁被框架」的語法了。


如果本文提的五種方法都成功了，那麼相信自己的心血結晶也就有了安心的保障，可以全心將精力擺在網頁的內容，創造更多的價值。下一章的內容範圍比較小，只針對會進行「程式碼」教學或分享的站長們，提出這類型網頁防盜的一些個人構思。

著作權保護系列文章：