パスワード・URLの秘匿<実践編>
URL編
暗号化スクリプト
では、実際のスクリプトを考えていきます。 いきなりですけど、前ページで書いた内容を、そのまま組み合わせていきますね。 まずはURLの暗号を生成をする部分から。
例：
function URL_encode(i){
txt=i;
txt=txt.replace(/\./g,"\;");
txt=txt.replace(/\//g,"\&");
txt=escape(txt);
cod="";
for (j=txt.length; j!=-1; j--) {
cod+=txt.charAt(j);
}
}
URLの暗号化のためのスクリプトの変換部分だけをまとめました。 このスクリプトで導入された、前ページでは説明しなかった概念について、解説します。
始めの行の「function URL_encode(i){」は、関数名の定義です。 この関数名の後の括弧内のiは、引数(ひきすう)の定義をしています。 引数とは、その関数を呼び出す際に呼び出した側から関数に渡される変数で、関数の中では変数と同様に処理されます。 2行目は、変数txtの中に、関数に引数として渡された値を代入しています。 その後に続く処理は、前ページに解説したとおりです。 置換動作を行い、ASCII形式に変換して、いずれも結果を変数txt内に再度代入しています。 その次の「cod=""」は、変数codの中を空にする処理です。 変数はいきなり呼び出すことができますが、何も指定していない状態で変数を作成した場合、初期値として「undefined」(未定義値)という値が格納されてしまいます。 これが入ったままこの処理を進めると、加工した文字列の先頭に「undefined」が自動的に追加される不都合が起きるので、空の文字列を代入して定義値を消しています。 あとは、前ページの解説通りです。
ただ、ここでは出力部が省略されているので、実際に使用する場合はそれらについての記述もきちんと組み合わせましょう。
暗号生成ページのソース：
<html>
<head>
<title>Encode</title>
<script type="text/javascript">
<!--
function URL_encode(i){
txt=i;
txt=txt.replace(/\./g,"\;");
txt=txt.replace(/\//g,"\&");
txt=escape(txt);
cod="";
for (j=txt.length; j!=-1; j--) {
cod+=txt.charAt(j);
}
document.f1.b2.value=cod;
}
//-->
</script>
</head>
<body>
<h1>暗号化</h1>
<form action="" name="f1">
<p><textarea name="b1" rows="5" cols="80"></textarea>
<br>
<input type="button" value="暗号化"
onClick="URL_encode(document.f1.b1.value)">
// ↑表示上折り返しましたが、改行はいれないでください
<input type="reset"></p>
<hr>
<p><textarea name="b2" rows="5" cols="80"
readonly="readonly"></textarea>
// ↑表示上折り返しましたが、改行はいれないでください
</p>
</form>
</body>
</html>
これが実際のソースになります。 これをコピー&ペーストして、HTML文書として保存し、ブラウザで開くと、URLの暗号化ができるページになります。 ここでもいくつか解説しましょう。
スクリプト部分の、「 document.f1.b2.value=cod;」という、新たに追加されている部分は、結果の出力部になります。 この指定は、documentの中の、「f1」という名前を持つ<form>タグ内の、「b1」という名前を持つ要素の値(value)を、変数「cod」の内容にしなさい、という命令になっています。 これが実行されると、ここでは<form>要素内のname属性で「b2」と名付けられた<textarea>要素内の表示部に、変数codの内容が表示されます。
HTML部については、JavaScriptでの処理に引き渡す値を入力する部分として、<form>要素と<textarea>要素を、同じく出力部分としてもう一つ<textarea>要素を用意する必要があります。 また、それらが混同されることのないように、それぞれに識別子としてname属性で名前を与えています。 ここでは、<form>要素要素にf1、入力部の<textarea>要素にb1、出力部の<textarea>要素にb2という名前を付けています。
また、入力を受けたあとに、JavaScriptの関数を呼び出すトリガーとして、ボタンを作成します。 「<input type="button" value="暗号化" onClick="URL_encode(document.f1.b1.value)">」の行がそれです。 onClickでボタンがクリックされたイベントを取得し、関数URL_encode()を呼び出します。 そのときに、関数に対して引数を渡します。 関数の処理で加工したいのは入力部に入れられた内容ですので、関数に渡す引数は「document.f1.b1.value」(documentの中のf1という名前のform内にあるb1という名前の要素の値)を指定します。
解りにくくてごめんなさい…必要とあらば、別に解説します…m(_ _)m
復元化スクリプト
URLの場合は、暗号化されたものを復元してから、ページ移動の指定に渡してやる必要があります。 そのため、実際のアクセス制限をかけるスクリプト内に、復元用のスクリプトを仕掛けます。
上記のスクリプトでの暗号化の処理を逆行させることで、元の文字列(URL)を復元できることは、もうお解かりと思いますので、その行程をそのままスクリプトとして記述します。
例：
decod="";
for (j=link_URL.length; j!=-1; j--) {
decod+=link_URL.charAt(j);
}
decod=unescape(decod);
decod=decod.replace(/\;/g,"\.");
decod=decod.replace(/\&/g,"\/");
復元は、これで大丈夫です。 これを、アクセス制限をかけるスクリプトのページ移動処理の前に挟み込み、移動先のURLを収めた変数としてdecodをページ移動処理に渡せば、目的のページに移動できるはずです。 なお、変数link_URLには、あらかじめ上の暗号化スクリプトで生成した文字列を代入しておいてください。
パスワード編
パスワードの秘匿については、実はURLの処理よりも簡素です。 というのは、こちらの場合は暗号化された状態の文字列の同一性を比較することでもパスワードの合否を判定できるので、暗号化のスクリプトを作るだけでいいためです。 暗号を生成するページと、アクセス制限をかけるページの両方に、同じ処理をするスクリプトを仕掛けるだけです。 では、そのスクリプトをさっそく書き出しましょう。
例：
function pswd_encode(i){
chk0=i;
chk0=escape(chk0);
ps0="";
for (j=chk0.length; j!=-1; j--) {
ps0+=chk0.charAt(j);
}
}
あとは、これをパスワードの暗号を生成するページと、アクセス制限を書けるスクリプトに仕掛ければ終了です。 なお、日本語をパスワードに使用する場合は、NetscapeとIEとで別々に変換を行い、ブラウザによって比較する対象になるパスワードを振り分ける処理を挟むことを忘れないでください。 ブラウザの情報を取得するには、「Navigator.appName」のプロパティを利用します。 具体的には、
例：
if (Navigator.appName=="Microsoft Internet Explorer"){
pswd="(IEで生成したパスワード)";
}
else if (Navigator.appName=="Netscape"){
pswd="(Netscapeで生成したパスワード)";
}
のように、アクセス制限をするスクリプトの先頭に記述します。
暗号生成ページのソース：
<html>
<head>
<title>Encode</title>
<script type="text/javascript">
<!--
function pswd_encode(i){
chk0=i;
chk0=escape(chk0);
ps0="";
for (j=chk0.length; j!=-1; j--) {
ps0+=chk0.charAt(j);
}
document.f1.b2.value=ps0;
}
//-->
</script>
</head>
<body>
<h1>暗号化</h1>
<form action="" name="f1">
<p><textarea name="b1" rows="5" cols="80"></textarea>
<br>
<input type="button" value="暗号化"
onClick="pswd_encode(document.f1.b1.value)">
// ↑表示上折り返しましたが、改行はいれないでください
<input type="reset"></p>
<hr>
<p><textarea name="b2" rows="5" cols="80"
readonly="readonly"></textarea></p>
// ↑表示上折り返しましたが、改行はいれないでください
</form>
</body>
</html>