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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

7回答

9608閲覧

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

2001Y

総合スコア83

JavaScript

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

HTML

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

0グッド

4クリップ

投稿2017/03/14 14:56

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

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

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

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2001Y

2017/03/19 12:58

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

0

こんな感じでできそう

用意するもの

  • データ(ログインしたら表示されるHTMLの断片とか)
  • ログイン情報(ユーザー名とパスワード)
  • HASH(SHA256とか)と暗号(AESとか)が使えるPure JavaScriptなライブラリ
  1. 暗号論的乱数を生成し、暗号鍵とする。
  2. 暗号鍵を使ってデータをAES等で暗号化、できたものを暗号データ
  3. ログイン情報を次のように加工する。

パスワードは単純に確認用でUNIXのcryptっぽくランダムsaltでハッシュ化
hash(パスワード+ランダムな文字列) ^ 何らかの文字列 = 暗号鍵 になる「ランダムな文字列」と「何らかの文字列」の組合せ

復号化するときは

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

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

投稿2017/03/14 22:33

raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/03/14 23:36

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

2017/03/15 12:27

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

退会済みユーザー

2017/03/15 13:56

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

2017/03/15 19:58

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

退会済みユーザー

2017/03/16 00:32

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

2017/03/19 13:05

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

2017/03/19 15:07

データの暗号化に使う暗号鍵は1つだけで、 その暗号鍵を取り出すためにユーザー別の暗号鍵復元手段を持たせるという仕組みは EFS(NTFS暗号化)に似ている印象ですね。 データ保護のために最初に使える技術「EFS」の仕組み:ITpro http://itpro.nikkeibp.co.jp/article/COLUMN/20070417/268042/
guest

0

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

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

投稿2017/03/14 22:23

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2001Y

2017/03/19 13:02

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

0

アルゴリズム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」が複合化されたら成功、それ以外が複合化されたら失敗
    1. で成功するまで配列内の暗号化文字列に複合化を試み、成功したら「HTMLタグ断片文字列の暗号化文字列」を複合化
  4. 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 ならば失敗
    1. で成功するまで配列内の暗号化文字列に複合化を試みる
  4. 成功したら「HTMLタグ断片文字列の暗号化文字列」を「3. の \n 以降の文字列」をキーとして複合化
  5. docunent.body.insertAdjacentHTML('beforeend', decodeHtmlTagString)

暗号化の実装

所感

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

Re: 2001Y さん

投稿2017/03/15 13:57

編集2017/03/15 14:01
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/03/15 14:30

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

2017/03/15 14:45

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

退会済みユーザー

2017/03/15 14:51

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

2017/03/15 15:02 編集

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

2017/03/19 13:25

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

0

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

投稿2017/03/14 15:16

otftrough

総合スコア476

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2001Y

2017/03/19 12:59

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

0

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

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

  3. OSSを閉じて共有したいのならば、別にGithubではくsvnで良いと思います。

追記:
Githubのクーロンにgitbucketというものが有る様です。
~/.gitbucket
に.htpasswdを置けば制限が掛かるか、後ほど、検証して見ようと思います。

投稿2017/03/14 23:32

編集2017/03/14 23:52
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2001Y

2017/03/19 13:21

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

0

自己解決

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

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

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

投稿2017/03/19 13:29

2001Y

総合スコア83

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問