張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室 第十一章 資料保護 張智星 jang@mirlab.org http://mirlab.org/jang 台大資工系 多媒體檢索實驗室
本章大綱 大綱 主題 網頁的資料雖然已經送到用戶端才呈現於瀏覽器，但我們還是使用JavaScript對資料進行程度不一的保護。 11-1：網址保護 11-2：網頁內容保護 11-3：程式內容保護 11-4：電子郵件隱藏
11-1:網址保護 本小節介紹基本的網址保護。
對使用者的過濾 方法 限制使用者的 IP 使用特殊的 port 需使用者進行密碼認證(最常使用)
客戶端的保護網頁 方法 使用 JavaScript 保護網頁。 防止對象 看不懂 JavaScript 的使用者 一般搜尋引擎的機器人程式 適用於：機密性不太高的網頁（只防君子、不防小人） 。 不適用於：隱密性極高的資料(應以伺服器端程式碼來保護)。
範例11-1 主題：以密碼保護的網頁(最簡單的方法) 連結：password01.htm (remote host, local host) 程式碼重點 說明 使用IF條件判斷，判斷密碼是否正確，再開視窗。 檢視原始檔即可破解此加密。 if(prompt('請輸入密碼：',"我的密碼") == "cs3431") openWin2();
範例11-2 主題：以密碼保護的網頁(帳密兩段式) 連結： password02.htm (remote host, local host) 程式碼重點 說明 使用IF判斷帳密是否正確，如都正確則開啟視窗。 檢視原始檔即可破解此加密。 if ((username!="Roger") && (username != "Jang")) … if (passwd!="cs3431")
範例11-3 主題：以密碼保護的網頁(編碼式) 連結： password03.htm (remote host, local host) 程式碼重點 說明 使用encode()自訂函式進行編碼，即使看得懂Javascript也無法解讀出目標網址。 function encode(inStr, seed){ …… }
範例11-4 主題：測驗編碼式的密碼保護 連結： passwordEncoding01.htm (remote host, local host) 程式碼重點 說明 這種編碼方式是一種簡單的「位置轉換編碼」，轉換量則根據 index^seed（index 和 seed 的 Bitwise XOR）決定。 for (var i=0; i<inStr.length; i++) { char = inStr.substring(i, i+1) index = refStr.indexOf(char) newIndex = index^seed; outStr += refStr.substring(newIndex, newIndex+1);}
11-2:網頁內容保護 本小節針對網頁內容保護作簡單的介紹。
基本網頁的保護 可做到以下六種： 典型範例參考： http://www.protware.com 不在狀態列顯示任何訊息。 取消滑鼠右鍵的預設功能。 不允許網頁上的任何文字被選取。 不允許列印。 不允許儲存。 不允許從不同的 domain 來開取此網頁。 典型範例參考： http://www.protware.com
取消滑鼠右鍵功能 原理 點選滑鼠右鍵時，會觸發 onContextmenu 事件，並顯示快顯功能表。 做法 將 onContextmenu 事件的值設為 false ，便可以取消滑鼠右鍵的功能。
範例11-5 主題：不能反白的網頁 連結： noHighlight01.htm (remote host, local host) 程式碼重點 說明 可達到的防護：不在狀態列顯示訊息、取消滑鼠右鍵的預設功能、不允許網頁上的文字被選取。 onMouseover=“window.status=‘’;return true;”：不顯示狀態列 onContextMenu=“window.event.returnValue=false” ：鎖右鍵 onSelectStart=“window.event.returnValue=false” ：鎖全選 onDragStart=“window.event.returnValue=false” ：鎖拖曳 保護並非滴水不漏，因為不同的瀏覽器會產生不同的效果（參考資料）。 <body onMouseover=“window.status=‘’;return true;” onDragStart=“window.event.returnValue=false” onContextMenu=“window.event.returnValue=false” onSelectStart="event.returnValue=false">
11-3:程式內容保護 本小節介紹對 JavaScript 程式碼進行簡單的保護或加密。
escape() 步驟 先撰寫未加密的原始網頁 randomText.htm (remote host, local host) 利用 escapeEncodeTest01.htm 來進行 escape() 的編碼(remote host, local host)。 將編碼後的字串拷貝到加密後的網頁，然後經由 unescape() 轉回原來的程式字串，再經由 eval() 來執行。 缺點 經由 escape() 編碼後，還是可以由編碼後的字串看到諸如「function」、「square」等有意義的字，比較容易猜到程式碼的內容。
範例11-6 主題：以 escape() 來加密 連結： escapeEncode01.htm (remote host, local host) 程式碼重點 說明 經由 escape() 編碼的結果，然後經由 unescape() 得回原先字串，再由 eval() 來執行。 eval(unescape(“……………”));
範例11-7 主題：使用 escape() 與 unescape() 編碼與解碼 連結： escapeEncodeTest01.htm (remote host, local host) 程式碼重點 說明 escape() 的編碼與unescape()的解碼。 <input type=button value="使用 escape() 進行編碼" onClick="text2.value=escape(text1.value)"> <input type=button value="使用 unescape() 進行解碼" onClick="text3.value=unescape(text2.value)">
「平移編碼」(shiftEncode) 步驟 先撰寫未加密的原始網頁。（範例11-8為 randomText.htm） 利用 shiftEncodeTest01.htm 進行 shiftEncode() 的編碼。 將編碼後的字串拷貝到加密後的網頁，經由shiftEncode() 來轉回原來的程式字串，再經由 eval() 來執行。 缺點 平移過後仍有ASCII 字元，若要完全避開這些字元，可將將程式碼進行「XOR編碼」（XOR Encoding）。
範例11-8 主題：以 shiftEncode() 及 escape() 來加密 連結： shiftEncode01.htm (remote host, local host) 程式碼重點 說明 利用escape() 、 shiftEncode()編碼後，將字串拷貝到加密後的網頁，然後經由 unescape() 及 shiftEncode() 來轉回原來的程式字串，再由 eval() 來執行。 eval(shiftEncode(unescape(“……”)));
範例11-9 主題：使用 shiftEncode()、escape() 與 unescape() 來編碼與解碼 連結： shiftEncodeTest01.htm (remote host, local host) 程式碼重點 說明 利用escape() 、 shiftEncode()編碼與unescape() 來解碼。 onClick="text2.value=escape(shiftEncode(text1.value, parseInt(keyStr.value)))“ onClick="text3.value=shiftEncode(unescape(text2.value), -parseInt(keyStr.value))"
「XOR編碼」（XOR Encoding) 步驟 先撰寫未加密的原始網頁。（範例11-10為 randomText.htm） 利用 xorEncodeTest01.htm 進行 xorEncode() 及 escape() 的編碼。 將編碼後的字串拷貝到加密後的網頁，然後經由 unescape() 及 xorEncode() 轉回原來的程式字串，再由 eval() 來執行。
範例11-10 主題： XOR Encoding後再進行 escape 編碼 連結： xorEncode01.htm (remote host, local host) 程式碼重點 說明 利用xorEncode() 及 escape()編碼後，字串拷貝到加密後的網頁，然後經由 unescape() 及 xorEncode() 來轉回原來的程式字串，再由 eval() 來執行。 eval(xorEncode(unescape(“……”)));
範例11-11 主題：xorEncode()、escape()與unescape() 的編碼與解碼。 連結： xorEncodeTest01.htm (remote host, local host) 程式碼重點 說明 使用 xorEncode()、escape()編碼與 unescape() 解碼。 onClick=“text2.value=escape(xorEncode(text1.value, keyStr.value))" onClick="text3.value=xorEncode(unescape(text2.value), keyStr.value)"
範例11-12 主題：encode.js(各種編碼與解碼的函數) 連結：encode.js 說明 shiftEncode() 及 xorEncode() 的定義。
解編碼的方式 相關函數 編碼方式 解碼方式 escape() 和 unescape() escape(原字串) shiftEncode() shiftEncode(原字串, 平移量) shiftEncode(編碼後字串, -平移量) xorEncode() xorEncode(原字串, XOR字串) xorEncode(編碼後字串, XOR字串)
11-4:電子郵件隱藏 本小節介紹對 email 帳號簡單的加密。
email 帳號加密 原因 大部分廣告信的電郵來源，是經簡單的電郵搜尋程式（稱為 Spam Bots 或是 Email Harvesters ），直接搜尋開放網頁中的 mailto 或 @ 字串，再抽取出 email 帳號，導致廣告信塞爆信箱。 做法 使用影像檔案來代替 缺點：要產生圖片且無法直接點選。 改造E-mail My email is j_a_n_g@csie.ntu.edu.tw. (Please remove the underscores.)
範例11-13 主題：使用JavaScript「合成」一個email帳號 連結： emailHide01.htm (remote host, local host) 程式碼重點 說明 使用 JavaScript 合成一個電郵帳號，因為一般的 Robot無法看懂 JavaScript，就無法直接抽取這個電郵帳號。 function showEmail(user, site){ document.write('<a href=\"mailto:' + user + '@' + site + '\">'); document.write(user + ‘@’ + site + ‘</a>’); } showEmail("jang", "csie.ntu.edu.tw");
範例11-14 主題：使用shiftEncode()、xorEncode 及 escape()隱藏email 連結： emailHide02.htm (remote host, local host) 程式碼重點 說明 分別使用 escape()、shiftEncode() 以及 xorEncode() 來對電郵帳號進行保護。 本節的所有範例，因為解譯 JavaScript 需要花時間，會降低抓取電郵帳號的速度，均假設 Robots 無法解譯 JavaScript。 document.write(shiftEncode(“……", -1)); document.write(xorEncode(unescape(“……."), "abc"));