11-1 蝬脣?靽肽風

網路是無遠弗屆的，但是在特殊情況下，有時候還是希望對使用者進行過濾，可以使用的方法有很多種，例如： 其中使用密碼來保護你的網頁是最常見的方式。

若要對網頁進行嚴密的管制，一定必須從伺服器端的程式碼著手。但如果網頁的機密性不是太高（例如個人的生活照、通訊錄等），只是希望外行人不得其門而入，或是不讓搜尋引擎找到你的網頁， 那麼就可以從客戶端的 JavaScript 來達到以密碼保護網頁的目的。一般而言，使用 JavaScript 來保護網頁，可以避掉的使用者如下：

但必須注意的是，以客戶端的 JavaScript 來進行的密碼保護，是只能防呆瓜，不能防高手，因此對於隱密性極高的資料，仍應以伺服器端的程式碼來保護。一般而言，若使用 JavaScript，並佐以伺服器端的密碼保護，就可以達到相乘相加的效果。有關於此種使用客戶端及伺服器端的程式來進行聯手防禦的細節，會在後續章節中說明。

首先我們來看一個最簡單的範例：

Example（password01.htm）：

在上述範例中，你必須輸入正確的密碼，才能連到「秘密檔案」網頁，請試試看。當然，只要你有耐心檢查 JavaScript 的原始碼，就可以知道此網頁的密碼。各位讀者請自行檢閱上述網頁的原始碼，並找出密碼。

我們再看一個稍微複雜一些的範例，用到了「帳號」加「密碼」的兩段式認證：

Example（password02.htm）：

在上述範例中，當你按下「秘密檔案」後，你必須輸入正確的帳號和密碼，才能連到相關的網頁，請試試看。上述範例的原始檔如下：

原始檔（password02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>以密碼保護的網頁：簡單的兩段式密碼保護</h2>
<hr>

<script>
function password() {
	username="";
	passwd="";
	while (username=="")		// Get the user's name
		username=prompt('請輸入大名：', "");
	if ((username!="Roger") && (username != "Jang")) {
		alert("你不是我的主人，不准進入！")
		return;
	}
	while (passwd=="")		// Get the password
		passwd=prompt(username+"，您好！\n"+"請輸入密碼：", username+"的密碼");
	if (passwd!="cs3431")
		alert("密碼錯誤，不准進入！")
	else
		myWin=open("found01.htm", "displayWindow", "width=600,height=200,status=yes,toolbar=yes,location=yes,resizable=yes,menubar=yes,scrollbars=yes");
}
</script>
<a href="javascript:password()">秘密檔案</a>

<hr>
</body>
</html>

上述兩個範例，很容易從 JavaScript 的原始碼就看出秘密網頁的網址，另一種方法，則是將輸入密碼進行編碼，以得到秘密網頁的網址，例如：

Example（password03.htm）：

在上述範例中，你必須輸入正確的密碼，才能連到相關的網頁，請試試看是否能由上述範例的原始檔（如下）來偵測出秘密網頁的網址：

原始檔（password03.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>以密碼保護的網頁：編碼式的密碼保護</h2>
<hr>

<script>
function testEncode(form) {
	seed = 1;
	newStr = encode(form.passwordField.value, seed)
	document.location = newStr+".htm"
}
function encode(inStr, seed){
	seed = parseInt(seed);
	var char, index, newIndex, outStr="";
	var refStr="0123456789abcdefghijklmnopqrstuvwxyz._~ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	for (var i=0; i<inStr.length; i++) {
		char = inStr.substring(i, i+1)
		index = refStr.indexOf(char)
		newIndex = index^seed;		// ^: bitwise xor operator
		outStr += refStr.substring(newIndex, newIndex+1);
	}
	return (outStr)
}
</script>
<form NAME="testform" onSubmit=false;>
請輸入貴賓密碼：<input type="password" NAME="passwordField">
<input type="button" NAME="button" Value="查核" onClick="testEncode(this.form)">
<font color=white>cs3431</font>
</form>


<hr>
</body>
</html>

由上述原始碼，就算我們看得懂 JavaScript 程式碼，也無法看出密碼或是秘密網頁的網址。我們可以將編碼的過程寫成一個網頁：

Example（passwordEncoding01.htm）：

在上述範例中，你只要填入輸入字串，再設定編碼參數，就可以看到編碼的結果。上述範例的原始檔如下：

原始檔（passwordEncoding01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>以密碼保護的網頁：如何測驗編碼式的密碼保護</h2>
<hr>

<script>
function testEncode(form) {
	form.outStr.value = encode(form.inStr.value, form.seed.value);
}
function encode(inStr, seed){
	seed = parseInt(seed);
	var char, index, newIndex, outStr="";
	var refStr="0123456789abcdefghijklmnopqrstuvwxyz._~ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	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);
	}
	return (outStr)
}
</script>
<form>
輸入字串：<input NAME="inStr" value=cs3431>
<input TYPE="button" Value="===> 編碼 ===>" onClick="testEncode(this.form)">
輸出字串：<input TYPE="text" NAME="outStr"><br>
編碼參數：<input NAME="seed" value=1>
</form>

<hr>
</body>
</html>

這種編碼方式是一種簡單的「位置轉換編碼」，而轉換量則是根據 index^seed（index 和 seed 的 Bitwise XOR）來決定。

但是上述這些範例，都是在客戶端的 JavaScript，所以很難做到完整的密碼或網頁保護。如果需要完整保護（例如網路銀行的轉帳系統），就需要伺服器和客戶端的整合運用，有關於這方面的說明，我們會在後續 ASP 相關章節來進行詳細說明。

JavaScript 程式設計與應用：用於網頁用戶端