網頁篇
在上一章「文章篇」，如果我們的網頁整個被搬走，損失的是想法及創意；而當網頁還
包括了圖像、影音，整個被搬走時損失的可大了，我們還得負擔嫖竊者的流量，哪天不
小心爆個量我們就被停權了。
因而「網頁篇」的重要性比「文章篇」來的大，不過好消息是保護「網頁」比保護「純
文章」來得便利、省時許多，只要學會了技巧不需要比保護「文章」來得多花心思。
一、圖片加浮水印
防止圖片被盜連、保護網頁空間的流量是必須的，而最好的方法就是加浮水印。或許有
人對於幫大量圖片加浮水印視為畏途，不過有個免費軟體 Picture-Shark 非常好用，
簡單幾個步驟就能幫大量圖片批次做出非常漂亮的浮水印，因此建議參考此「教學網頁：
http://tinyurl.com/2mjrju」學會操作此軟體，就不太會發生網站圖片整個被搬走的
慘劇了。
二、圖片不加浮水印
其實還是有多種理由讓某些站長們不想幫圖片加浮水印，有的怕破壞美感，有的是攝影
作品網站不適合加，有的是不一定擁有肖像權所以最好不要加，那該怎麼防盜連呢？
1. 使用特殊語法：請參考此網站「圖片防盜鏈常用方法：http://ppt.cc/9vaA」，有
些方法滿有趣的，讓使用者下載錯的檔案、下載到切成一半的圖片、下載到有浮水印的
圖片..等等，有興趣可以參考看看。
只不過部分方法與「分享」的前提相抵觸，放上網路又不讓人完整下載，因此個人不喜
歡；不過如過是營利的網站，收費才給下載完整圖片，那麼這些機制就是合理的。
另外就是無論使用什麼樣的語法，遇到有耐心的盜賊打開網頁原始碼、或是使用瀏覽器
的 debug 工具，還是能找到該圖片的連結，仍然存在被盜連的風險。
2. 放進內嵌文件：另一個權宜之計也許是將圖片丟到 PDF、製作 Flash 檔等，如同「
文章篇：http://tinyurl.com/5wr5mln」第 6 點內嵌到網頁中，只不過 PDF 檔效果也
許不好，而製作 Flash 也沒那麼簡單。
3. 存錢買網頁空間：如果是非常高品質的圖片，不想加浮水印又不想被盜連，最保險
的方法就是放在支援 htaccess 的網頁空間了，可惜付錢的方案不在本文的討論範圍，
因而就此略過。免付費的網頁空間也有少數支援 htaccess 的功能，但是站長們得不定
時擔心該公司何時會倒，常常得花心力再尋找新的網頁空間。「這個網頁：
http://tinyurl.com/5tlrrga」介紹了一個支援 htaccess 的免費網頁空間
000webhost，心臟比較大的站長可以評估是否賭一把。
三、網頁加上「防盜碼」
我看過某站長的網頁，內容是自己拍的藝人簽唱會過程及許多整理的相片、文字敘述等
等，站長當然是沒有藝人的肖像權，也不適合在這些圖片加上版權宣告。結果他精心整
理的網頁，沒兩天竟然出現在該藝人的官方後援會網站，原封不動整個網頁全部搬過去
，後來後援會留言版被人罵轉載也不註明出處，該後援會才說「有啊，我們有註明」，
我仔仔細細地將後援會網頁從第一行看到最後一行，才看到最後小小的一行：內容來源
為網路。嗯～個人非常地為那位站長不值。
網頁有圖片的話可以加浮水印防盜，而非圖片的網頁，或是以上情形的網頁，或是像「
正妹報時（美人時計）彙整：http://tinyurl.com/6gzf9y6」這樣的網頁，應該如何防
盜呢？「機車防盜碼」是為機車烙上獨一無二的一組號碼，我們的網頁也有一組獨一無
二的識別 ID，就是「網址」。如果我們在網頁原始碼中加入一組 javascript，每次執
行都檢查網址正不正確，不正確時跳出警語，就能有效遏阻原始碼被搬走。
<script>
var t=encodeURIComponent(window.location);
if(t.search("wayne-fu.blogspot.com")<0){
alert("This page is originally from WFU BLOG:http://wayne-fu.blogspot.com/")
}
</script>
以上為語法的範例，意思為將我們網站的網址編碼處理(否則 search 函數無法處理)，
接著用 search 函數尋找我們的網址字串，如果沒有找到，表示網頁原始碼被搬家了，
立即用 alert 顯示警告語，宣示原始網頁出處。
請將 "wayne-fu.blogspot.com" 改為自己網頁的網址，但請注意如果網址需要有斜線
"/" 的部分，請將所有斜線字串 "/" 改為 "%2F"；而警語的內容也請自行更改。當然
，如果想要修理一下盜賊，除了 alert 警語，想要添加什麼 javascript 請發揮自己
的創意。其實，用 alert 是警告成分居多，不用 alert 而默默地在盜賊的網頁搞花
樣他也很難發覺～～
四、原始碼加密
進階盜賊看得懂程式碼，複製完我們的原始碼，如果被他發現了我們的「防盜碼」，只
要他將防盜碼那一段語法全部刪除，我們的網頁還是會被偷了。因此，除了加裝「防盜
碼」以外，我們還得替原始碼買個保險──「加密處理」。
1. 簡易加密
原始碼最簡易的加密方式是將網頁原始的 HTML 碼利用 javascript 的 escape 函數編
碼，例如「這個網頁：http://tinyurl.com/5voaag7」當然初階盜賊看不懂這樣的編碼
，但稍有程度的只要使用 unescape 就可以還原回去。
雖然簡易加密沒有用處，不過這樣的簡易編碼有個好處，可以快速地將 HTML 碼轉換成
javascript，以利進階的加密之用。
2. 進階加密
使用 javascript 加密就有無數種可能性了，要嘛有付費軟體，要嘛自己寫方程式編碼
，不過不用這麼累，也有免錢又方便的方案，使用 google 搜尋「+加密+在線+
javascript」就有用不完的在線加密工具可以加密。以「Free Javascript Obfuscator：
http://tinyurl.com/5ww9hv9」、「BIN2HEX：http://tinyurl.com/6dz49h4」這兩個
線上加密網站舉例說明：
A. 先在「簡易加密」提到的網站，將網頁原始碼貼進去，按下 "開始編碼" 後會得到
一串 「document.write(unescape(.........))」 的編碼，將這一串內容剪下。
B. Free Javascript Obfuscator：把 A 點剪下的內容貼到 "input:" 欄內，按下最下
方的 "obfuscate" 即完成編碼，將 "obfuscated:" 欄內所有加密內容貼回「簡易加密
」的網頁 <script> 與 </script> 之間，現在我們可以按 "預視結果" 看看這堆亂碼
的執行結果是不是跟原本的一模一樣啊？如果 OK 的話，就可以把全部內容貼到自己網
頁了。
C. BIN2HEX：把 A 點剪下的內容貼到 "粘貼代碼：" 欄內，按下 "編碼" 即完成編碼
，將加密內容貼回「簡易加密」的網頁 <script> 與 </script> 之間，之後按 B 點進
行即可。
3. 高階混淆
如果有辦法弄到 「Jasob：http://ppt.cc/I4yZ」這套 javascript 最強悍的混淆軟體
，其效果遠勝前兩種加密方法，因為處理過後的程式碼完全看不懂，尤其是程式碼越長
混淆效果越佳。這是付費軟體，不過有三十天的試用期，所以不妨試試看。
進行了這麼複雜的加密動作後，其實中上層級的盜賊還是有辦法可以看到內容，不過這
畢竟是少數，以他們的實力，駭我們小老百姓的網頁、部落格是能拿到什麼利益呢？遇
上了也只好認了，至少我們做了我們該做的，絕大多數中下階層的盜賊已經被我們防堵
住了。
只不過全網頁加密有個缺點，這會造成日後修改網頁內容不易，因為加密結果不易還原
(我們自己就能還原那還要加密嗎？)，要改幾個字而以還要找出原來的備份，沒有備份
就慘了。因此建議加密之前原內容絕對要備份，而大部分文字的部分就不需要加密了，
只要選取部分重要的 HTML 標籤、圖片的部分、以及「防盜碼」的部分加密即可。
另外，在上一章「文章篇」中，只要我們運用各種提到的各種技巧，能夠逼使竊取者需
要複製網頁原始碼才能搬走我們的網頁，此時利用第三、第四點的「防盜碼」及「原始
碼」加密，就能有效地遏止網頁被盜了。
五、防網頁被框架
所有保密防諜的動作都做了，網頁還是有可能被移花接木，例如對方使用 <iframe> 標
籤就可以把我們的網頁包覆在他的網頁之中，這樣看起來我們的網頁就成了他網頁的一
部份，而且廣告錢一樣是他在賺，這是非常無良的一種舉動，在「這篇文章：
http://tinyurl.com/66hmtov」也詳細說明了網頁被蓋台的後果及提供對策，在
</head> 之前加入以下語法：。
<script language="javascript">
<!–
if (top.location != location) top.location.href = location.href;
//–>
</script>
這原理很簡單，因為網頁被框架後，最上層的網頁(對方網頁)與我們網頁的網址是不同
的，利用 javascript 偵測目前的網頁與最上層網頁是否相同，就能解決這個問題了，
如果網址不同時，強制將我們的網址推到最上層。
不過奇怪的是 Blogger 似乎不吃以上語法，至少 WFU BLOG 是失效的，搜尋了許多防
止框架的語法也都失效，直到搜尋到「這個網頁：http://tinyurl.com/6g3metd」的語
法才成功，一樣加在 </head> 前面：
<script language="javascript">
function location_top(){
if(top.location!=self.location){
top.location=self.location;
return false;
}
return true;
}
location_top()
</script>
因此，請想辦法拿兩個不同的網址交互框架試試看吧，如果以上提供的兩個語法都失效
的話，請再 google 別的「防止網頁被框架」的語法了。
如果本文提的五種方法都成功了，那麼相信自己的心血結晶也就有了安心的保障，可以
全心將精力擺在網頁的內容，創造更多的價值。
原文出處：
http://www.wfublog.com/2011/09/blog-post_30.html
----
Blogger 調校資料庫
http://www.wfublog.com/
----
※ 發信站: 批踢踢實業坊(ptt.cc)
→
09/30 19:59, , 1F
09/30 19:59, 1F
→
09/30 20:00, , 2F
09/30 20:00, 2F
→
09/30 21:16, , 3F
09/30 21:16, 3F
→
09/30 21:17, , 4F
09/30 21:17, 4F
→
09/30 21:18, , 5F
09/30 21:18, 5F
→
09/30 21:23, , 6F
09/30 21:23, 6F
→
09/30 21:25, , 7F
09/30 21:25, 7F
→
09/30 21:26, , 8F
09/30 21:26, 8F
→
09/30 21:27, , 9F
09/30 21:27, 9F
→
09/30 22:26, , 10F
09/30 22:26, 10F
→
09/30 22:27, , 11F
09/30 22:27, 11F
→
09/30 22:30, , 12F
09/30 22:30, 12F
→
10/01 01:06, , 13F
10/01 01:06, 13F
※ 編輯: WFU (118.165.24.181), 05/21/2014 08:50:51