何とかしてJavaScriptだけでできるだけ安全性の高いログインシステムを作りたい。
解決済
回答 7
投稿
- 評価
- クリップ 4
- VIEW 6,286
JavaScriptの知識は全くないのですが、ログインシステムを作ってみたいなと思い
でGithub Pagesならどうせ丸見え。という結果になりましたが、せっかくならできる限り頑張ってみたいなと思いました。
要するに、phpも動かない環境においてパスワード制限をかけたいときに、JavaScriptのみでできる限り安全性の高いログインシステムを作りたいということです。
もしできたらいいなと思うことは以下の通りです。
・ユーザー名・パスワードによるログイン
・複数のユーザー名で使用可能
・Cookieを利用して自動ログイン
・Cookieの使用の許可がなくてもログイン可能
・jQueryを使用しせず、パスワードを暗号化
何の知識もない上にこのようなことができるのかもわからない自分ですが、もし、暇でお力を貸していただけるようでしたら、サンプルコードと一緒に教えてくださると助かります。
色々調べたサイト
JavaScriptのみでログイン認証するプラグインを作ってみた
javascriptでそこそこ強固なログインページを作る
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+8
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
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+6
こんな感じでできそう
用意するもの
- データ(ログインしたら表示されるHTMLの断片とか)
- ログイン情報(ユーザー名とパスワード)
- HASH(SHA256とか)と暗号(AESとか)が使えるPure JavaScriptなライブラリ
- 暗号論的乱数を生成し、暗号鍵とする。
- 暗号鍵を使ってデータをAES等で暗号化、できたものを暗号データ
- ログイン情報を次のように加工する。
パスワードは単純に確認用でUNIXのcryptっぽくランダムsaltでハッシュ化
hash(パスワード+ランダムな文字列) ^ 何らかの文字列 = 暗号鍵 になる「ランダムな文字列」と「何らかの文字列」の組合せ
復号化するときは
- ログインが正しいか、ハッシュ化したパスワードで確認
- 正しければ、「ランダムな文字列」と「何らかの文字列」で暗号鍵を復元
- 暗号鍵で暗号データから元のデータを復元
- 元のデータをレンダリング
時間があったら、サンプルを作ってみたいと思います。セキュリティ的な抜けがあればご指摘下さい。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+5
どうしても「JavaScriptだけで」コンテンツ保護を行いたいとすれば、2つ方法が考えられます。
- 本来見せたいコンテンツをAESなどで暗号化しておいて、復号化できた場合にのみ表示する（もっとも、使えるのが「特定のパスワード」に限られるので、柔軟性はほぼありません）
- Node.jsを使う（Node.jsはサーバサイドJavaScriptなので、サーバ側で実行するための準備が必要となります）
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+4
アルゴリズム1
暗号化手順。
- 「ユーザID」「パスワード」に空白文字を含められない文法とする
- 「ユーザID = foo」「パスワード = bar」だった場合、「foo bar」をキーとして「HTMLタグ断片文字列」「foo bar」をそれぞれ暗号化する
- ユーザが増える度に 2. の作業を実行し、JSON化した配列に格納する
複合化手順。
- 「ユーザID」「パスワード」をフォームから受け取る
- 暗号化文字列を格納した配列から「ユーザID パスワード」をキーにして複合化する
- 「ユーザID = foo」「パスワード = bar」ならば、「foo bar」が複合化されたら成功、それ以外が複合化されたら失敗
- 3. で成功するまで配列内の暗号化文字列に複合化を試み、成功したら「HTMLタグ断片文字列の暗号化文字列」を複合化
docunent.body.insertAdjacentHTML('beforeend', decodeHtmlTagString)
アルゴリズム2
暗号化手順。
- 「ユーザID」「パスワード」に空白文字を含められない文法とする
- 「ユーザID = foo」「パスワード = bar」、「HTMLタグ断片文字列の暗号化キー = piyo」とする
- HTMLタグ断片文字列を
piyoをキーとして暗号化する "foo bar\npiyo"を「foo bar」をキーとして暗号化する
複合化手順。
- 「ユーザID = foo」「パスワード = bar」をフォームから受け取る
- 暗号化文字列を格納した配列から「foo bar」をキーにして「ユーザID パスワード\nHTMLタグ文字列の暗号化キーの暗号化データ」の配列を順番に複合化していく
/^foo bar\n/.test(encodeString) === trueならば成功、falseならば失敗- 3. で成功するまで配列内の暗号化文字列に複合化を試みる
- 成功したら「HTMLタグ断片文字列の暗号化文字列」を「3. の
\n以降の文字列」をキーとして複合化 docunent.body.insertAdjacentHTML('beforeend', decodeHtmlTagString)
暗号化の実装
所感
試みとしては興味深いですが、JavaScriptの事を何も知らない人が手を出すには敷居が高すぎると思います。
Re: 2001Y さん
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+3
JavaScriptはソースが丸見えなので、安全なものは作れないんじゃないかと思います。
どうしてもJavaScriptにこだわりたいなら、JavaScriptでサーバー上のファイルを操作できるくらいになってください。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
素朴な疑問なんですが、.htpasswdで、全Webページ「ログイン・パスワード」化出来るのに、なぜ、そこまでしてJavaScriptに拘られるのでしょうか？
Github Pagesならどうせ丸見え、、、OSSをグローバルに共有思想なので、逆に丸見えじゃないと。。。OSSを閉じて共有したいのならば、別にGithubではくsvnで良いと思います。
追記：
Githubのクーロンにgitbucketというものが有る様です。
~/.gitbucket
に.htpasswdを置けば制限が掛かるか、後ほど、検証して見ようと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
check解決した方法
-4
丁寧に回答してくださった皆様。ありがとうございました。
そして、投げやりな回答におつきあいいただきありがとうございました。
皆様の回答を読ませていただいても、圧倒的に自分の技術力が足りないのできちんと学び直してから、再度挑戦して見たいと思います。
その時は皆様の貴重なご意見を参考にさせていただきたいと思います。
どなたをベストアンサーにすべきか自分で判断ができなかったため、自己解決とさせていただきました。今回は適当にパスワードもどきを一応作っておこうかと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.12%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
2017/03/15 11:21
複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。