- ベストアンサー
JavaScriptのパスワード設定について教えてください
- JavaScriptを使用してインデックスページにパスワードを設定し、トップページに移動させたいです
- 初心者のJavaScriptでは難易度が高いため、詳しい説明が欲しいです
- md5.jsとbase64.jsの設定も問題かもしれません
- staticb0045
- お礼率7% (1/13)
- JavaScript
- 回答数8
- ありがとう数9
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
> JavaScriptに関しては初心者なのですが、初心者で以下のは難易度が高いのでしょうか？ #1の方が仰るように「高度な JavaScript 技集」をベースにしているのだと思いますが、サイトにはしっかりと「初心者お断り」と書いてあるんですよね…。 http://www.onicos.com/staff/iz/amuse/javascript/expert/ でもまあ、この手の質問(JavaScriptでパスワード認証したい)はよく見るので、今後同じ質問があったときにURL参照できるように書いておきました。 (全角空白は半角空白orタブ文字に置換してください) ------------ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>会員ページへの入り口</title> <!-- 高度な JavaScript 技集 (http://www.onicos.com/staff/iz/amuse/javascript/expert/) より --> <script type="text/javascript" src="./md5.js"></script> <script type="text/javascript"> function checkMd5Pass(event){ var form = event.target || event.srcElement; var doc = form.ownerDocument; var win = doc.defaultView || doc.parentWindow; var inputPass = form.elements.Password.value; var md5Pass = '098f6bcd4621d373cade4e832627b4f6'; // "test" のMD5ハッシュ値 if(MD5_hexhash(inputPass) === md5Pass){ // MD5ハッシュ値の比較 alert('OK!'); win.location.href = MD5_hexhash(inputPass + 'foo') + '.html'; // 入力文字列に適当な文字列を混ぜてハッシュ化した値をURLに埋め込んで飛ばす } else { alert('NG!'); } event.preventDefault ? event.preventDefault() : event.returnValue = false; // デフォルト動作をキャンセル (キャンセルできなかったら、error.html に行く) } </script> </head> <body> <h1>会員ページへの入り口</h1> <form action="./error.html" id="Secret" onsubmit="checkMd5Pass(event);"> <fieldset> <p><label for="Password">パスワード</label><input type="text" name="Password" id="Password" /></p> <p><input type="submit" name="submit" value="送信"></p> </fieldset> </form> </body> </html> ------------- URLにパスワードを埋め込んでソースからパスワードを求められないようにする手法はよく見ますが、URLにパスワード自体が埋め込まれる故にURLを晒されるとパスワードまで丸わかりです。 なので、MD5ハッシュ値をURLにしました。入力文字列のMD5ハッシュ値を使うとソースからわかってしまうため、適当な文字列を混ぜてハッシュ化しています。 簡単閲覧制限！JavaScriptでパスワード認証 - ［ホームページ作成］All About http://allabout.co.jp/internet/hpcreate/closeup/CU20041220A/ ただし、これだけでは完全ではありません。 入り口から会員ページにアクセスは出来なくなりますが、一度会員ページを知った人がURLを晒してしまえば、誰でもアクセスできる状態になります。 (入力可能な文字数を超えるので、後のコメントに続きを書きます)
その他の回答 (7)
- babu_baboo
- ベストアンサー率51% (268/525)
これは、おばかなかんがえかも？！ さいしょから、えんこした、てきすとにしておく。 あんしょうばんごうをにゅうりょくしてもらい、 それをもとにすくりぷとで、てきすとのーどのもじををへんかんする。 あんしょうばんごうは、あいてがわかっていればよい。 あんしょうばんごうをもとにした、へんかんきは、あなたがつくれ～！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title></title> <body> <form action="#"> <p> <input type="text" value="" id="pass" > <input type="button" value="Convert" onclick="convert( this.form, cond, processing )"> </p> <div> 44OG44Kt44K544OI </div> </form> <script type="text/javascript" src="utf.js"></script> <script type="text/javascript" src="base64.js"></script> <script type="text/javascript"> var cond = function ( obj ) { return 3 == obj.node.nodeType; }; var processing = function ( obj ) { if( obj.node.nodeValue ) obj.node.nodeValue = utf8to16( base64decode( obj.node.nodeValue ) ); }; var convert = (function( getNode ) { return function( node, cond, process ) { if( !node ) return false; var obj = { node: node, depth: 0 }; var cbFunc = function ( ) { if( (obj = getNode( obj )) && obj.node && 0 < obj.depth) { cond( obj ) && process( obj ); setTimeout( arguments.callee, 1 ); } }; cbFunc(); }; })( function ( obj ) { var n; if( n = obj.node.firstChild ) return ( obj.node = n, obj.depth++, obj ); do { if( n = obj.node.nextSibling ) return ( obj.node = n, obj ); if( !( obj.node = obj.node.parentNode ) ) return null; obj.depth--; } while ( true ); }); </script> </body>
- Chaire
- ベストアンサー率60% (79/130)
MD5 に関しては alert(MD5_hexhash(base64encode('パスワード'))) とし、表示された文字列を pwmd5 に設定すれば良い。 しかしながら、この方法は、どこからもリンクされないページを用意し、知人にだけ URL を教えるのと全く同じことです。 普通は（サーバ側での認証ならば）、URL がバレてもパスワード認証に通らなければアクセスできません。しかしこの方法では、パスワードを知らなくても URL さえ知っていれば直にアクセスできます。つまり、質問者の用途において真に隠すべきは、飛び先の URL です。パスワードには何の意味もありません（No.3 も URL さえ分かればパスワードが無意味であることに変わりない）。 それどころか、パスワード認証ページを置いたことで、かえって相手に URL のヒントを与えてしまいます。はっきり申し上げますが、「やらないよりは良い」ではなく「やらない方が良い」です。 なお、URL はリファラ等で簡単に漏れます。例えば、ページからブログにリンクするだけで、そのブログ主宰者に「どこからリンクされたか」を知られてしまいます。また、最近は検索ツールバーを導入しているブラウザが多くなりましたが、その中には表示されたページの情報を検索サイトに送っているものもありますから、秘密のページのはずが公の検索結果にだだ漏れ、というのも珍しくありません。 No.4 が Cookie によるセッション管理を提案しておられますが、JavaScript がページの取得時・取得後に実行されるものである以上、ページの取得はできてしまいます。そのため、少しでも安全性を考えると現実的でないサイト構築をすることになるでしょう。 以上は No.5-6 の繰り返しです。どのような用途を考えておられるか分かりませんが、どうしても JS でやらざるをえないなら、認証ページを設けず、知人だけに URL を教えた方がマシ、ということは強調しておきます。JS でのアクセス制限は、それだけのものでしかないのです。
- think49
- ベストアンサー率59% (285/482)
#5の続き。 ■会員ページのCookie認証 重ねて言いますが、これらの対策は会員ページでも認証を行う事で意味があります。 URLを知られただけでアクセスできるようでは、認証とは呼べません。 (JavaScriptを利用したのでややこしいことをしましたが、通常は会員ページに認証を設けて、入口はその認証にアクセスするためのUIを提供するだけです。むしろ、そっちが重要です。) まず、入口で正しいパスワードを入力したときにCookieに新しいハッシュ値を書き込んでください。 (ハッシュ値が既存のものと被らなければどんな方法でも構いません。入力文字列に適当な文字列を加えた値をベースにそたMD5ハッシュ値とか、入力文字列を元に生成したSHA-1ハッシュ値とか) 会員ページでCookieを取得して比較し、間違っていたらトップページにでもリダイレクトさせればいいでしょう。 Cookie認証については、下記URLを参照してください。 Cookie を使ったユーザー認証を JavaScript で実装する - WebOS Goodies http://webos-goodies.jp/archives/50561473.html Paj's Home: Cryptography: JavaScript MD5 http://pajhome.org.uk/crypt/md5/ ■#3の補足内容について 「動くコードを知りたい」ように見えるのは、私の思い違いでしょうか。 何度も繰り返しになりますが、MD5を使うにせよ、Cookie認証するにせよ、仕組みを理解してから使ってください。 理解が難しいようであれば、やはりBasic認証でも使うのが無難だと思います。 手に余るコードを使っても、トラブル時に自力で対応できませんから…。
- think49
- ベストアンサー率59% (285/482)
#3,4です。 ■MD5ハッシュ値とか 用語は自分で調べてください。 MD5 - Wikipedia http://ja.wikipedia.org/wiki/MD5 ■ハッシュ値の比較 MD5は同じ文字列を与えれば、常に同じハッシュを返します。 そして、重要なのは「ハッシュ値から元の文字列に戻すことが極めて困難」とされていることです。 (「出来ない」は証明不可能なので「困難」という表現になっていますが、「恐ろしく時間がかかるであろう」と捉えても差し支えはないと思います。) PHP/認証 - PukiWiki Plus! http://kiyoeri.gotdns.org/~kiyoeri/pukiwikiplus/?PHP%2F%C7%A7%BE%DA 上記URLと全く同じ仕組みです。(基本的に、サーバサイドで認証するときにも平文で比較はしません) JavaScriptは誰でもソースが見えるのですから、「ソースを見られたとしても、パスワードまでは読みとられない」ようにする必要があります。 ■正しいパスワードを入れたときの処理 パスワードを隠せたとしても、認証が通ったときの処理からURLが漏れてしまっては意味がありません。 if(MD5_hexhash(inputPass) === md5Pass){ location.href = 'secret.html'; } これでは会員ページが secret.html であることがすぐに分かってしまいます。 AllAbout ではこの問題に対応するために、入力した文字列をそのままURLにしてリダイレクトする手法を編み出しました。 http://allabout.co.jp/internet/hpcreate/closeup/CU20041220A/ location.href = passwd + '.html'; 会員ページは secret.html ですが、ソースにはそれが書かれていません。 パスワードが合っていれば、会員ページにリダイレクトします。 パスワードが間違っていてもリダイレクトし、ページが存在しないので「404 Not Found」が返ります。 この手法は「パスワードをソースに埋め込まない」という点で優れています。 ただし、「会員の誰かが会員ページのURLを他所で公開すると、パスワードまでバレてしまう」という欠点があります。 #4で示したように会員ページの方でCookie認証したとしても、パスワードが会員ページのURLから知られるのですから、正規の方法で認証を突破されてしまいます。 そこでパスワードそのものをURLにせず、ハッシュ値をURLに埋め込む方法を考えました。 if(MD5_hexhash(inputPass) === md5Pass){ win.location.href = MD5_hexhash(inputPass) + '.html'; } これなら、会員ページのURLからパスワードは分かりません。 が、MD5_hexhash(inputPass) と md5Pass は同じ値で、md5Pass はソースに書かれているので、このままではパスワードを知らずとも突破されてしまいます。 そこで入力文字列に「適当な文字列」を加えてハッシュ値を変えてやります。 if(MD5_hexhash(inputPass) === md5Pass){ win.location.href = MD5_hexhash(inputPass + 'hoge') + '.html'; } これでソースから会員ページのURLは分かりませんし、会員ページのURLからパスワードを知ることは不可能になりました。 (続きます)
- think49
- ベストアンサー率59% (285/482)
#3の続き。 そもそも、本来は会員ページの方で認証すべきことですから、クライアントサイドによる対策では限界があります。 ありますが、あえて対策を取るならCookieでしょうか。 document.cookie - MDC https://developer.mozilla.org/en/DOM/document.cookie 入力文字列に適当な文字列を混ぜてMD5ハッシュ化した値をCookieに保存して、各々の会員ページでチェックすれば一定の安全性は保たれると思います。 勿論、JavaScriptを無効にされたらどうしようもないですが、そこは妥協ですね。 ここまでの内容がなかなか理解できないようでしたら、サーバを移転するかBasic認証を検討した方がいいと思います。 基本認証でアクセス制限をかける方法 - ［ホームページ作成］All About http://allabout.co.jp/internet/hpcreate/closeup/CU20020910A/ MD5を利用するところから一定のレベルの安全性を保ちたいのだと想像しますが、JavaScriptで安全性を保つのは難しいです。 認証しても突破されやすい性質を持っているので普通はまず採用しようと思いませんし、Web上に参考サイトもほとんどありません。 md5.js を使うのなら、JavaScriptがクライアントサイドの言語であることを理解して、その上でどういう手法が安全かよく考えることをお勧めします。
- yyr446
- ベストアンサー率65% (870/1330)
この方法を、そのまんま記述したら、 結局 var pw = "ほげ"; if(document.f.passwd.value ==pw) と同じ事で、ソース表示すればすぐ解ってしまう事になるのでは．．． せめて、base64とか、md5等のキーワードをもろに出さないようにして、... それでもjsのソースを見られちゃうとわかりそうなので、 script難読化のツールも併用した方がよい。 http://phpspot.org/blog/archives/2006/09/javascript_25.html
お礼
スクリプト難読化のツールの存在を知らなかったので、ビックリしたと同時に、ありがたいです！ 是非とも併用したいと思います。 本当にありがとうございますっ！！＾o＾
- osamuy
- ベストアンサー率42% (1231/2878)
http://www.google.co.jp/search?hl=ja&q=md5.js+base64.js&lr=lang_ja で見つかるところの「高度な JavaScript 技集」をベースにしてるんだとしたら、 単に使い方の不備のような。 例えば、pwmd5が空文字列ですが、この場合正しいパスワード入れてもif文は成立しないでしょう。 ソースを見直してみては。
補足
「初心者お断り」と書かれているのは知っていたのですが、普通のJavaScriptでは確実にバレるだろうと思い「高度な～」をベースしました； それでも「絶対にバレない」ということは「ないかもしれない」と思っていますが、普通のよりかは「良いかもしれない」と思い…；； 「MD5ハッシュ値の比較」「入力文字列に適当な文字列を混ぜてハッシュ化した値をURLに埋め込んで～」の部分が、分かりません。 「ハッシュ値の比較」は、どうやって出すのでしょうか？ また「ハッシュ化した値URL」を、どこに記入すればいいのでしょうか？ 丁寧に説明をして下さったのに、手間をかけさせて本当に申し訳ありません；；