JavaScriptのパスワード設定について教えてください

このQ&Aのポイント
  • JavaScriptを使用してインデックスページにパスワードを設定し、トップページに移動させたいです
  • 初心者のJavaScriptでは難易度が高いため、詳しい説明が欲しいです
  • md5.jsとbase64.jsの設定も問題かもしれません
回答を見る
  • ベストアンサー

md5.jsとbase64.jsがスクリプトのJavaScriptのパ

md5.jsとbase64.jsがスクリプトのJavaScriptのパスワード設定について、教えて下さい。 JavaScriptを扱っているサイトで、以下のを使用しているのですが、そのサイトであまり詳しい説明が書かれてないので四苦八苦しています。 契約しているサーバーのセキュリティー上、CGIとPHPが使えないので、JavaScriptを使用したいと思っています。 インデックスページに設置して、パスワードが通ったらトップページに移動するようにさせたいと思っています。 以下ので、どこが不備なのか分からないので、教えて下さい。 JavaScriptに関しては初心者なのですが、初心者で以下のは難易度が高いのでしょうか? また、md5.jsとbase64.jsそのものの設定が問題なのでしょうか? 本当に困っていますので、是非とも教えて下さい。 お願いします。 <html> <Head> <script language="JavaScript" src="md5.js"></script> <script language="JavaScript" src="base64.js"></script> <script language="JavaScript"><!-- var pwmd5 = ""; function passchk() { var pw; pw = document.f.passwd.value; pw = base64encode(pw); pw = MD5_hexhash(pw); if(pw ==pwmd5 ) else alert("パスワードが違います"); } // --> </script> <body> <form name="f"> <input type=text name="passwd"><input type=button value="入室" onClick="passchk()"></form></body> </Head> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • think49
  • ベストアンサー率59% (285/482)
回答No.3

> 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を晒してしまえば、誰でもアクセスできる状態になります。 (入力可能な文字数を超えるので、後のコメントに続きを書きます)

staticb0045
質問者

補足

「初心者お断り」と書かれているのは知っていたのですが、普通のJavaScriptでは確実にバレるだろうと思い「高度な~」をベースしました; それでも「絶対にバレない」ということは「ないかもしれない」と思っていますが、普通のよりかは「良いかもしれない」と思い…;; 「MD5ハッシュ値の比較」「入力文字列に適当な文字列を混ぜてハッシュ化した値をURLに埋め込んで~」の部分が、分かりません。 「ハッシュ値の比較」は、どうやって出すのでしょうか? また「ハッシュ化した値URL」を、どこに記入すればいいのでしょうか? 丁寧に説明をして下さったのに、手間をかけさせて本当に申し訳ありません;;

その他の回答 (7)

回答No.8

これは、おばかなかんがえかも?! さいしょから、えんこした、てきすとにしておく。 あんしょうばんごうをにゅうりょくしてもらい、 それをもとにすくりぷとで、てきすとのーどのもじををへんかんする。 あんしょうばんごうは、あいてがわかっていればよい。 あんしょうばんごうをもとにした、へんかんきは、あなたがつくれ~! <!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)
回答No.7

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)
回答No.6

#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)
回答No.5

#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)
回答No.4

#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)
回答No.2

この方法を、そのまんま記述したら、 結局 var pw = "ほげ"; if(document.f.passwd.value ==pw) と同じ事で、ソース表示すればすぐ解ってしまう事になるのでは... せめて、base64とか、md5等のキーワードをもろに出さないようにして、... それでもjsのソースを見られちゃうとわかりそうなので、 script難読化のツールも併用した方がよい。 http://phpspot.org/blog/archives/2006/09/javascript_25.html

staticb0045
質問者

お礼

スクリプト難読化のツールの存在を知らなかったので、ビックリしたと同時に、ありがたいです! 是非とも併用したいと思います。 本当にありがとうございますっ!!^o^

  • osamuy
  • ベストアンサー率42% (1231/2878)
回答No.1

http://www.google.co.jp/search?hl=ja&q=md5.js+base64.js&lr=lang_ja で見つかるところの「高度な JavaScript 技集」をベースにしてるんだとしたら、 単に使い方の不備のような。 例えば、pwmd5が空文字列ですが、この場合正しいパスワード入れてもif文は成立しないでしょう。 ソースを見直してみては。

関連するQ&A

  • 外部JavaScriptファイルを読み込む

    <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function textReset(){ this.form1.userName.value=""; this.form1.passWord.value=""; } //--> </SCRIPT> </HEAD> のJavaScriptファイルを外出しにして、 <HEAD> <SCRIPT LANGUAGE="JavaScript" SRC="/jsp/script.js"></SCRIPT> </HEAD> という風に呼び出そうとしているのですが、うまくいきません。どこに問題があると考えられるのでしょうか?

  • <SCRIPT src="css.js">の記述位置

    </head>と<body>の間に <SCRIPT LANGUAGE="javascript"src="css.js"></SCRIPT> を書くのは文法的に問題ありませんか?

  • javascriptを2つ使うと1つの動きしかしません。

    初心者です。ホームページを作っています。 以下のように記述してjavascriptで2つの動きをしたいのですが1つしか動きません。scriptをべつのファイルにしたのですが動かないのですが。どう記述したらいいのでしょうか? よろしくお願いします。 <html> <title></title> <head> <script language="javascript" src="test.js"></script> </head> <center> <body text="#000000" onLoad="timer1=setTimeout('fadein(0,100)',100)"> <br><br> <font size="8" color="green">ようこそマイホームページへ</font><br><br> <img src="top.jpg"><br><br> <a href="top.html"> <img src="main.jpg"></a> <form action="top.html"> </form> <script language="javascript" src="common.js"> </script> <a href="javascript:void(post())">3秒後に遷移します。画面が変わらない場合はクリックしてください</a> </center> </body> </html>

  • JavaScript内にJavaScriptを読み込む方法

    HTML内に <script type="text/javascript" src="main.js"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = '<script language="JavaScript">'; html += 'var url0101 = "url01.xxx.jp";'; html += 'var url02 = "url02.oooo.jp";'; html += '</script>'; html += '<script language="JavaScript" src="http://xxx.xxxx.xxx/test.js"></script>'); html += '<script language="JavaScript">'; html += 'Function01("check")'; html += '</script>'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか? よろしくお願いします。

  • JavaScript内にJavaScriptを読み込む方法

    HTML内に <script type=\"text/javascript\" src=\"main.js\"></script> という一行を追加すると、バナーが表示されるというスクリプトを作成しています。 main.jsは、 html = \'<script language=\"JavaScript\">\'; html += \'var url0101 = \"url01.xxx.jp\";\'; html += \'var url02 = \"url02.oooo.jp\";\'; html += \'</script>\'; html += \'<script language=\"JavaScript\" src=\"http://xxx.xxxx.xxx/test.js\"></script>\'); html += \'<script language=\"JavaScript\">\'; html += \'Function01(\"check\")\'; html += \'</script>\'; document.write(html); というような風になっており、 (1) 変数の宣言 ↓ (2) http://xxx.xxxx.xxx/test.jsの読み込み ↓ (3) (2)で読み込んだjs内の関数Function01を実行 という流れです。 FireFoxでは表示されましたが、IE6では (2)のjsを読み込む前に(3)のFunction01が実行され、 「オブジェクトを指定してください」のエラーが表示されてしまいます。 よい方法がありましたら教えていただけますでしょうか? よろしくお願いします。

  • 読み込む外部スクリプトをセレクトボックスを使って選べないでしょうか?

    お世話になります。 フォーム内に配置した、1から5までの数字を選べるセレクトボックスを使って、そのフォーム内に読み込む.jsファイルを選択することは出来ないでしょうか? 外部ファイルには、UsualSet.js、EmergencySet.js、PauseSet.jsなどがあって、そのスクリプトファイルの中身は document.write("<input name=\"youbi\" type=\"hidden\" value=\"土曜\"><input name=\"codenumber\" type=\"hidden\" value=\"732\"><input name=\"busho\" type=\"hidden\" value=\"経理\">"); とかいった感じになっています。 つまり、セレクトボックスで何番を選ぶかによって、CGIに渡す値を$youbiと$codenumberと$bushoとの3つ全ていっぺんに変更出来るようにしたい訳です。 しかし、そのセレクトボックスにどういう仕掛けをしたら良いかわからなくて困っています。 まさか、 <FORM ACTION="pro.cgi" METHOD="POST">  <select name="kazu">   <option value="<script language="javascript" src="UsualSet.js>" selected>1</option>   <option value="<script language="javascript" src="EmergencySet.js>" >2</option>   <option value="<script language="javascript" src="PauseSet.js>" >3</option>   <option value="<script language="javascript" src="MorningSet.js>" >4</option>   <option value="<script language="javascript" src="FulleSet.js>" >5</option>  </select>   <input type="hidden" name="kaijou" value="22890">  <input type="hidden" name="boxnumber" value="62">  <input type="submit" name="Submit" value="送信"> </FORM> なんてわけに行かないですもんね。 どうしたらいいかおわかりの方がいらっしゃいましたら、どうかよろしくお願い致します。

  • 外部JavaScriptの書き方

    外部JavaScriptの書き方 <script language="JavaScript" src="data.js"></script> 上記data.jsから、他サーバーの外部javascriptを読み出すには 以下のよな書き方で正しいでしょうか? document.open(); document.write('<script language="JavaScript" src="http://hoge.com/data.js"></script>'); document.close();

  • js ファイルの読み込み

    ●質問の主旨 jsファイルを読みこむためHTMLファイルを記述しましたが 読み込めません。記述が間違っているのでしょうか? それともjsファイルの格納場所がおかしいのでしょうか? JavaScriptは3日前にはじめたばかりの超初心者です。 ごぞんじのかたご教示願います。 ●ファイルの配置 jsファイル、HTMLファイルともに GoogleDrive→JavaScript(任意のフォルダ名)に格納 ●jsファイルの内容 var now = now Date(); var greeting; if(now.getHours() < 12 ) greeting = 'おはよう'; else if(now.getHours() < 18 ) greeting = 'こんにちは'; else greeting = 'こんばんは'; ●HTMLファイルの内容 <HTML> <HEAD> <TITLE>JavaScriptサンプル</TITLE> <SCRIPT language = "JavaScript" src = "file.js"></SCRIPT> </HEAD> </BODY> <SCRIPT language = "JavaScript"> <!-- alert(greeting); // --> </SCRIPT> </BODY> </HTML>

  • 実行するスクリプトを時間で切替えたいが・・

    以下のようにHTML内に埋め込んで、時間で実行するスクリプトを切替えたいと思っていますが、何故か上手くいきません。 詳しい方がいましたら、ご教授下さいませ。 m(__)m <script language="JavaScript"> <!-- TimeH = (new Date()).getHours(); if (TimeH>=18) { <script language="Text/JavaScript" type="Text/JavaScript" src="./JS/xxx.js" charset="shift-jis"></script> } else if (TimeH<4) { <script language="Text/JavaScript" type="Text/JavaScript" src="./JS/yyy.js" charset="shift-jis"></script> } else { <script language="Text/JavaScript" type="Text/JavaScript" src="./JS/zzz.js" charset="shift-jis"></script> } // --> </script>

  • [javascript] Dexagogoが動きません・・・。

    こんにちわ。 このたび、下記URLにあるjavascriptを作動させようと悪戦苦闘しております・・・。 Really easy field validation * Dexagogo http://tetlaw.id.au/view/javascript/really-easy-field-validation 入力確認を行なうスクリプトで具体的には以下のURLのような動作を致します。 http://tetlaw.id.au/upload/dev/validation/ が、しかし全く動いてくれません・・・。 原因特定のため、無駄なタグをどんどん削っていきましたが、依然動作せず・・。 参考までにソースを添付致します。 <html><title>入力チェック</title> <head> <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous/src/effects.js" type="text/javascript"></script> <script type="text/javascript" src="fabtabulous.js"></script> <script type="text/javascript" src="validation.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form action="#" method="get" id="test"> <br> <label for="field1">Name</label>:<input name="field1" id="field1" class="required" title="Enter your name" /> <br> <input type="submit"> </form> </body> </html> ご存知の方、お助けいただけると幸いです。