改造編・総まとめ…
では、これまでに考えてきたものをすべてまとめた、完成形のソースを書き出してみましょう。 ここでは、パスワードは「開け胡麻」とし、参照する先はここの次のページのURLです。 では、ソースを見ていきましょう。 ん、何か勘付きましたか? 気付いたとしたら、鋭いですね。
完成ソース：
<html>
<head>
<title>完成?</title>
<script type="text/javascript">
<!--
if (navigator.appName=="Microsoft Internet Explorer"){
var pswd="BBE9u%1E08u%1503u%B859u%";}
else if (navigator.appName=="Netscape"){
var pswd="38%69%3D%C8%FA%28%JA8%";}
var linkurl="lmthB3%8sexa_sj62%sexa_dmj62%obal_sj62%mocB3%2cfB3%bewB3%gnihtonllits62%62%A3%ptth";
decod="";
for (j=linkurl.length; j!=-1; j--) {
decod+=linkurl.charAt(j);
}
decod=unescape(decod);
decod=decod.replace(/\;/g,"\.");
decod=decod.replace(/\&/g,"\/");
function pslock(){
ps=prompt("合言葉を入れてね","");
ps=escape(ps);
ps0="";
for (j=ps.length; j!=-1; j--) {
ps0+=ps.charAt(j);
}
if (ps0==pswd) {location.href=decod;}
else {alert("パスワードが違います");}
}
// -->
</script>
</head>
<body>
<a href="#" onClick="pslock(); return false;">
アクセス制限ページ(onClick)</a>
<a href="javascript: pslock();">アクセス制限ページ(href)</a>
</body>
</html>
以上のソースをコピー&ペーストして、HTML文書として保存し、ブラウザで開いてみてください。 テストしてみて、動作に問題がないかどうかを確かめてみましょう。 下にも上と同じスクリプトを動作させるリンクを入れておきますね。
すると、どうしたことでしょうか。 Netscapeで見ている場合は、問題なく動いているはずです。 Operaでも、プロンプトウィンドウで日本語が文字化けする不具合がある以外は、動作に問題はありません。 が、私のところのWidowsMe+IE6sp1の環境では、上のリンクをクリックしてパスワードとして「開け胡麻」と入れても、パスワードが違うなどと表示されてしまいます。 正確なパスワードを入れているはずなのに、意図通りに動作しないという不思議な状況です。 ここにどんな問題があるか、探る必要が出てきました。 (※：2005年現在、PCを更新して、WindowsXP sp2+IE6sp1の組み合わせでは、この問題が起きないことを確認しました。)
問題の検証
さて、だいぶドキュメンタリーらしくなってきました(爆)。 WinMe+IEでのみ確認できているこの問題ですが、原因がはっきりしないと解決もできません。 まず、原因の検証をしていきましょう。
まず、スクリプトの記述に文法的な欠陥があるかどうか。 これは、ブラウザのステータスバーを見れば判ります。 IEでは、文法的欠陥がある場合は、ステータスバーに警告のアイコンが出てきます。 そのときは、警告のアイコンをダブルクリックすると、スクリプトエラーの内容についての情報も参照でき、これが多少参考になります(実は、あんまり役に立たない(核爆))。 今回は、ステータスバーに警告が出ませんので、文法的な異常ではないようです。
次に、なぜパスワードが弾かれてしまうのかを確かめましょう。 スクリプト上では、設定されているパスワードと入力されたパスワード(が暗号化された値)が過不足なく完全に一致した場合に、ページ移動をさせるような仕組みになっています。 ということは、パスワードが通らないのは、入力したパスワードを収めている変数に、何らかの意図しないことが起きていると推測できます。 それを確かめてみましょう。
この場合は、関数内の処理で変数がどう加工されているかを追跡します。 そのために、処理中の変数の状態を表示させる仕掛けを入れます。 ここでは、その手段として「alert()」メソッドを利用します。 alert()メソッドは、警告用ダイアログを表示させる指定で、その表示内容は括弧内で指定できます。 これを利用して、設定されているパスワードと比較される直前の、入力されたパスワードを拾ってみましょう。 「 if (ps0==pswd) {location.href=decod;}」の行の前に、「alert(ps0);」と記入し、スクリプトを動かしてみます。 下のリンクは、そのチェック用のスクリプトを動作させます。
パスワードを入力した後に、警告用ダイアログに入力されたパスワードを暗号化した値が表示されましたね。 その値を参照すると、どうやら余計な文字列までが変数に渡されて変換を受けているようです(前掲のスクリプトのIE用パスワード「BBE9u%1E08u%1503u%B859u%」と見比べてみてください)。 上のスクリプトでは、パスワードが文字の過不足なく完全に一致しなければ間違ったパスワードと判定してしまうので、そのために意図しない動作になるようです。 しかも、何度か手元で試してみた分には、必ず同じ文字列が余計に追加されて出てきているわけではないようです。 それが起きる原因は、私にはちょっとわかりません。 Netscape 7では正常に動作することを確認していますので、おそらくブラウザの仕様の問題でしょう。 そうなると、ブラウザに合わせて少々処理を加えるように、作り変えなければならないようです。
IE対策の改造
IEは、入力ダイアログから取得したパスワードを変換するときに、余計なものをつけてよこすため、そのままでは正常な動作が望めないことがわかりました。 では、その対策として、次の方策を立てましょう。
最も簡単な回避策を、ここでは取ることにします。 入力されるパスワードの文字数は、当然のことながら初めからわかっています。 当然ながら、パスワードが適合しているのであれば、入力された文字数と設定された文字数は一致するはずです。 ですから、入力された文字列から、パスワードとして設定した数と同じだけの文字数を切り出し、それ以外の部分を切り捨ててしまえば、変換時には入力された文字の後に追加される余計なものはなくなります。 JavaScriptは、文字列から特定の文字を抜き出すことも可能です。 その手法について、言及していきましょう。
文字列オブジェクト.substring(x,y)
上記のメソッドは、文字列の先頭の文字を0と数えるとして、x番目の文字からy番目の直前までの文字(つまり、y-1番目の文字)を抜き出して取得します。 このメソッドについては、特に難しいことはないでしょう。
例：
ps=ps.substring(0,5);
以上のように記述すれば、入力された文字列の先頭から5文字目の直前まで(つまり4文字目まで)を切り出して、psの値に返すことができます。 この処理を加えれば、余計に付加される文字列を排除することができるでしょう。
文字列オブジェクト.substr(x,y)
こちらのメソッドは、文字列の先頭の文字を0と数えるとして、x番目の文字からy文字分先までの文字列を抜き出して取得します。 こちらのメソッドは、記述も動作内容も前述の「.substring()」に似ていますが、こちらはx番目から、「y文字分」抜き出すという違いがありますので、注意してください。
例：
ps=ps.substr(0,4);
以上のように記述すると、入力された文字列の先頭から4文字分までを抜き出して、psに返すことができます。 こちらの処理でも、上と同様の効果が期待できます。
これらの方法を取ると、パスワードの前方が一致していればすべて適合と判定するようにはなりますが、IEでの正しいパスワードを入力しても、間違いとして弾いてしまう欠陥を解消することができます。