質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • JavaScript

    17515questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9563questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

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

解決済

回答 7

投稿

  • 評価
  • クリップ 4
  • VIEW 2,052

2001Y

score 59

JavaScriptの知識は全くないのですが、ログインシステムを作ってみたいなと思い

何でもいいのでパスワード保護のページを作りたい!!

でGithub Pagesならどうせ丸見え。という結果になりましたが、せっかくならできる限り頑張ってみたいなと思いました。

要するに、phpも動かない環境においてパスワード制限をかけたいときに、JavaScriptのみでできる限り安全性の高いログインシステムを作りたいということです。

もしできたらいいなと思うことは以下の通りです。

・ユーザー名・パスワードによるログイン
・複数のユーザー名で使用可能
・Cookieを利用して自動ログイン
・Cookieの使用の許可がなくてもログイン可能
・jQueryを使用しせず、パスワードを暗号化

何の知識もない上にこのようなことができるのかもわからない自分ですが、もし、暇でお力を貸していただけるようでしたら、サンプルコードと一緒に教えてくださると助かります。

色々調べたサイト
JavaScriptのみでログイン認証するプラグインを作ってみた
javascriptでそこそこ強固なログインページを作る

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2017/03/15 11:21

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 7

+8

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/19 21:58

    ありがとうございます。
    皆様のおっしゃる通りだと思いますので、適当なもので一応パスワードをかけておきたいなと思います。

    キャンセル

+6

こんな感じでできそう

用意するもの

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

復号化するときは

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/15 08:36

    なんとなくでしか理解できませんでしたが、これ、面白そうですね。
    サーバサイドの実装も必要だと思うので、要件と少し違う気もしますが興味深いです。
    サンプル見てみたいです。

    キャンセル

  • 2017/03/15 21:27

    ユーザーやパスワードに関する変更をしなければサーバーサイドは不要の筈です。ただ、作成者は各ユーザーの生パスワードを知ってなければならないため、ユーザーがパスワードを設定するというよりも、管理者がユーザー名とパスワードを渡すという運用になると思います。

    キャンセル

  • 2017/03/15 22:56

    ログインはオマケみたいなもので、実際の挙動としては、事前に暗号化しておいた静的コンテンツを、ユーザ名+パスワードで、復号するのがメインな感じですかね?

    キャンセル

  • 2017/03/16 04:58

    サイト上に公開されたデータ自体を取得させないということは不可能です。データが取得されることを前提にして、一部の人だけがその「情報」を手に入れられるようにするには暗号化以外の方法はありません。JavaScriptを一つ一つ解釈しても、パスワードがわからなければ、暗号化された本当に隠したい「情報」は入手できないと言うことです。

    キャンセル

  • 2017/03/16 09:32

    横からの質問に回答ありがとうございました。
    このやり方、どっかで、使用してみたいなぁ。。。

    キャンセル

  • 2017/03/19 22:05

    ありがとうございます。
    なんの理解もない質問で、無理な要望(になっていたのかもわかりませんが)に詳しく教えていただいてありがとうございます。
    全く、自分では手も足も出ないので今回は適当なものを作って載せておくことにします。
    おさわがせしました。

    キャンセル

  • 2017/03/20 00:07

    データの暗号化に使う暗号鍵は1つだけで、
    その暗号鍵を取り出すためにユーザー別の暗号鍵復元手段を持たせるという仕組みは
    EFS(NTFS暗号化)に似ている印象ですね。

    データ保護のために最初に使える技術「EFS」の仕組み:ITpro
    http://itpro.nikkeibp.co.jp/article/COLUMN/20070417/268042/

    キャンセル

+5

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/19 22:02

    ありがとうございます。
    待ったの初心者ながらこのような質問をさせていただきました。
    暗号化などにも無知でありながら、Node.jsもほぼ使ったことがないため、もっと学んでから、挑戦して見たいと思います。
    (そもそもJavaScriptで完結することではない気がしますが。)
    このような質問ながらご意見をもらえて嬉しいです。ありがとうございました。

    キャンセル

+4

 アルゴリズム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)

 暗号化の実装

 所感

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

Re: 2001Y さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/15 23:30

    仕組みとして面白いと思っているんですが、復号化がフロントサイドで行われるとなると、いくらでも試せるので、セキュリティ的には相当めんどくさいことをしなければならないのではないかと思っています。
    回避策ってありそうでしょうか?

    キャンセル

  • 2017/03/15 23:45

    データも暗号化キーもクライアントサイドにあるので、悪意あるユーザが複合化する際の試行回数を制限する方法はないかと。
    原理的には時間をかければブルートフォースアタックで突破可能ですが、サーバにリクエストする時間が減るのでサーバサイドで演算させるよりも遥かに短い時間で解析できてしまうと思われます。
    更に言うなら、クライアントサイドで解析するので不正に解析されたユーザをサーバログから特定する方法もありません。
    クライアントサイドに全てを委ねている時点でセキュリティ対策も簡易版の域を出ないので、本当に守りたいデータはサーバサイドに置くのが賢い選択でしょうね…。

    キャンセル

  • 2017/03/15 23:51

    横からの質問にありがとうございます。
    非常に勉強になりました。

    キャンセル

  • 2017/03/16 00:01 編集

    興味本位で回答してしまいましたが、そもそも、ユーザアカウントデータが全てのユーザにDLされる事を許している時点で悪意あるユーザが「他人のアカウント情報」を解析するリスクがありますね。
    ユーザアカウントが盗まれるリスクはユーザからしたらたまったものじゃないと思うので、常識的にはこの実装はありえないと思います。
    私だったら自己責任の範疇で自分だけが実験的に使うサイトに実装してみるぐらいでしょうか。
    (他人に使ってもらうサイトには怖すぎて使えません…。)

    キャンセル

  • 2017/03/19 22:25

    ありがとうございます。大変詳しく教えていただいて感謝です。
    ただ、現在の自分では技術力が圧倒的に足りないので、きちんと学び直した後でまた挑戦して見たいなと思います。その時は参考にさせていただきます。
    (そもそも、JavaScriptのみでやろうとしている自分が謎ですが)

    キャンセル

+3

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/19 21:59

    ありがとうございます。
    おっしゃる通りですね。別のファイルにしても読み込まれてる時点で丸見えですし、色々学んでいきたいなと思います。
    この度はありがとうございました。

    キャンセル

+1

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/19 22:21

    ありがとうございます。おっしゃる通りです。
    1.に関しては.htpasswdがGithubでは使えないという話なのですが、まず元からGithubという問題がありますよね。
    GitBucketですね。ありがとうございます。調べて見たいと思います。

    キャンセル

check解決した方法

-4

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17515questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9563questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。