11-1 }O@

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

若要對網頁進行嚴密的管制,一定必須從伺服器端的程式碼著手。但如果網頁的機密性不是太高(例如個人的生活照、通訊錄等),只是希望外行人不得其門而入,或是不讓搜尋引擎找到你的網頁, 那麼就可以從客戶端的 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 程式設計與應用:用於網頁用戶端