何とかしてJavaScriptだけでできるだけ安全性の高いログインシステムを作りたい。

JavaScript だけでは、見た目だけはログイン画面ぽいものは作れるけど、 所詮はフェイク なんで、どうせやるなら、サーバーサイド言語でしっかりしたものを勉強する方がよっぽど役に立つと思います。

質問文に紹介されたページの方法でも、直接URLを叩けば、ログインできてしまうんですから。

PHPでログイン機能を実装するチュートリアル #1
PHPでログイン機能を実装するチュートリアル #2
PHPでログイン機能を実装するチュートリアル #3
PHPでログイン機能を実装するチュートリアル #4
PHPでログイン機能を実装するチュートリアル #4-2
PHPでログイン機能を実装するチュートリアル #5
PHPでログイン機能を実装するチュートリアル #6
PHPでログイン機能を実装するチュートリアル #7
PHPでログイン機能を実装するチュートリアル #8
PHPでログイン機能を実装するチュートリアル #9
PHPでログイン機能を実装するチュートリアル #10
PHPでログイン機能を実装するチュートリアル #11

こんな感じでできそう

用意するもの

• データ(ログインしたら表示されるHTMLの断片とか)
• ログイン情報(ユーザー名とパスワード)
• HASH(SHA256とか)と暗号(AESとか)が使えるPure JavaScriptなライブラリ

1. 暗号論的乱数を生成し、暗号鍵とする。
2. 暗号鍵を使ってデータをAES等で暗号化、できたものを暗号データ
3. ログイン情報を次のように加工する。
   パスワードは単純に確認用でUNIXのcryptっぽくランダムsaltでハッシュ化
   hash(パスワード+ランダムな文字列) ^ 何らかの文字列 = 暗号鍵  になる「ランダムな文字列」と「何らかの文字列」の組合せ

復号化するときは

1. ログインが正しいか、ハッシュ化したパスワードで確認
2. 正しければ、「ランダムな文字列」と「何らかの文字列」で暗号鍵を復元
3. 暗号鍵で暗号データから元のデータを復元
4. 元のデータをレンダリング

時間があったら、サンプルを作ってみたいと思います。セキュリティ的な抜けがあればご指摘下さい。

どうしても「JavaScriptだけで」コンテンツ保護を行いたいとすれば、2つ方法が考えられます。

• 本来見せたいコンテンツをAESなどで暗号化しておいて、復号化できた場合にのみ表示する（もっとも、使えるのが「特定のパスワード」に限られるので、柔軟性はほぼありません）
• Node.jsを使う（Node.jsはサーバサイドJavaScriptなので、サーバ側で実行するための準備が必要となります）

 アルゴリズム1

暗号化手順。

1. 「ユーザID」「パスワード」に空白文字を含められない文法とする
2. 「ユーザID = foo」「パスワード = bar」だった場合、「foo bar」をキーとして「HTMLタグ断片文字列」「foo bar」をそれぞれ暗号化する
3. ユーザが増える度に 2. の作業を実行し、JSON化した配列に格納する

複合化手順。

1. 「ユーザID」「パスワード」をフォームから受け取る
2. 暗号化文字列を格納した配列から「ユーザID パスワード」をキーにして複合化する
3. 「ユーザID = foo」「パスワード = bar」ならば、「foo bar」が複合化されたら成功、それ以外が複合化されたら失敗
4. 3. で成功するまで配列内の暗号化文字列に複合化を試み、成功したら「HTMLタグ断片文字列の暗号化文字列」を複合化
5. docunent.body.insertAdjacentHTML('beforeend', decodeHtmlTagString)

 アルゴリズム2

暗号化手順。

1. 「ユーザID」「パスワード」に空白文字を含められない文法とする
2. 「ユーザID = foo」「パスワード = bar」、「HTMLタグ断片文字列の暗号化キー = piyo」とする
3. HTMLタグ断片文字列を piyo をキーとして暗号化する
4. "foo bar\npiyo" を「foo bar」をキーとして暗号化する

複合化手順。

1. 「ユーザID = foo」「パスワード = bar」をフォームから受け取る
2. 暗号化文字列を格納した配列から「foo bar」をキーにして「ユーザID パスワード\nHTMLタグ文字列の暗号化キーの暗号化データ」の配列を順番に複合化していく
3. /^foo bar\n/.test(encodeString) === true ならば成功、false ならば失敗
4. 3. で成功するまで配列内の暗号化文字列に複合化を試みる
5. 成功したら「HTMLタグ断片文字列の暗号化文字列」を「3. の \n 以降の文字列」をキーとして複合化
6. docunent.body.insertAdjacentHTML('beforeend', decodeHtmlTagString)

 暗号化の実装

• 開発などブログ \| HiBARA SOFTWARE
• crypto-js - Google Code Archive
• Web Cryptography API - W3C

 所感

試みとしては興味深いですが、JavaScriptの事を何も知らない人が手を出すには敷居が高すぎると思います。

Re: 2001Y さん

JavaScriptはソースが丸見えなので、安全なものは作れないんじゃないかと思います。
どうしてもJavaScriptにこだわりたいなら、JavaScriptでサーバー上のファイルを操作できるくらいになってください。

1. 素朴な疑問なんですが、.htpasswdで、全Webページ「ログイン・パスワード」化出来るのに、なぜ、そこまでしてJavaScriptに拘られるのでしょうか？

2. Github Pagesならどうせ丸見え、、、OSSをグローバルに共有思想なので、逆に丸見えじゃないと。。。

3. OSSを閉じて共有したいのならば、別にGithubではくsvnで良いと思います。
   追記：
   Githubのクーロンにgitbucketというものが有る様です。
   ~/.gitbucket
   に.htpasswdを置けば制限が掛かるか、後ほど、検証して見ようと思います。

丁寧に回答してくださった皆様。ありがとうございました。
そして、投げやりな回答におつきあいいただきありがとうございました。

皆様の回答を読ませていただいても、圧倒的に自分の技術力が足りないのできちんと学び直してから、再度挑戦して見たいと思います。
その時は皆様の貴重なご意見を参考にさせていただきたいと思います。

どなたをベストアンサーにすべきか自分で判断ができなかったため、自己解決とさせていただきました。今回は適当にパスワードもどきを一応作っておこうかと思います。