HTMLまたはJAVASCRIPTでログイン認証ページを作成する方法

私はエレクトロニクスのバックグラウンドを持っているので、ウェブページの設計に関する十分な知識はありません。私はイーサネットプロジェクトをやっており、そのためにウェブページを作成する必要がありますが、そのウェブページの前にログイン認証ウェブページも作成する必要があります。私はなんとかHTML JAVASCRIPTを使用してそれを行うことができましたが、問題は誰でもページソースを表示することでユーザー名パスワードを見ることができることです。

認証に苦労しています。 HTMLとJAVASCRIPTの基本的な知識はありますが、すぐに学ぶことができます。グーグルで見つけることができるのはログインテンプレートだけですが、それらの使用方法さえ知りません。

誰も私に例を与えるか、いくつかの良いリンクを教えてくれますか。

loginwebpage

2016/01/30user007

HTMLとJavascriptはクライアント側で解釈されます。ログインの目的で、資格情報を確認するために一般的に使用されるのはサーバー側コードです-単純にクライアント側の実装では、ソースコードで資格情報を確認できます。作業が簡単で、一度理解すれば、さらなる開発のための柔軟性が高まり、より安全になり、このタスクで実際にどこでも使用されます。

これには、PHP、ASP、Ruby（またはその他のサーバー側言語））を使用することをお勧めします。それが望ましくない場合は、ユーザーがソースコードから資格情報を読み取ることは困難です。

そのためには、暗号化や難読化などのさまざまな方法を使用できます。暗号化は、アプリケーションのセキュリティを強化する可能性があるため、難読化よりも強くお勧めします。基本的に難読化とは、読みにくい方法でソースコードを変更することです。つまり、文字列をエンコードする関数を追加して、「パスワード」が一目でわかるようにします。ただし、難読化は常にバイパスでき、通常は優れたデバッグツールを使用すれば非常に簡単です。

それでは、暗号化に取り掛かりましょう。ここで探しているのは one way hash functions を使用していることです。 MD5、SHA1、SHA256など、さまざまなレベルのセキュリティを提供します。 JavascriptでのSHA256実装は、使用できる例です。他にも多くのライブラリと例がありますので、Googleを使用して好きなものを見つけてください。

さて、それをどうするか？文字列を受け取り、そのハッシュを文字列として返すsha256（）関数があるとします。所有するユーザーとパスワードごとに、文字列「user + password」のSHA256ハッシュを事前カウントします。

たとえば、ユーザー名を「Pedro」、このアカウントのパスワードを「MyPassword」にするとします。

「PedroMyPassword」のハッシュを事前にカウントします-例オンラインハッシュツールを使用。 SHA256ハッシュは次のとおりです。

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21

このハッシュは、Javascriptコードに入れるものです。

ユーザーがユーザーとパスワードを入力したら、「username + password」でsha256関数を呼び出し、事前にカウントされたハッシュと比較します。

非常に強力なパスワードを選択する必要があることに注意してください。そうしないと、特定の攻撃（辞書攻撃など）を使用して簡単にハッシュを破ることができます。

ここでの問題は、あなたが指定しなかったこと、次に何をしたいかです。たとえば、認証されたユーザーを次のページにリダイレクトしたい場合がありますが、ここでも同じ問題が発生します。Javascriptでコードを「secondpage.html」にリダイレクトすると、誰かが認証をスキップしてこの2番目に移動できます直接ページ。

この場合にできることは、2番目のページの名前を

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html

つまり、ユーザー+パス文字列のハッシュ。このバリアントでは、ハッシュをコードにまったく挿入しません。 Webサーバーは、認証に失敗したすべてのユーザーに対してエラー404を返すだけです。たとえば、誰かが「Pedro」と「123456」をパスワードとして使用しようとすると、SHA256は

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517

にリダイレクトした場合

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517.html

2番目のページファイルが呼び出されるため、存在しません。

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html

ユーザー/パスの組み合わせごとにこれらの2番目のページを作成する必要があります。次に、単純なリダイレクトコードを実際の2ページ目に配置できます。

ただし、HTTPSプロトコルを使用していることを確認してください。そうしないと、2ページ目が暗号化されずにワイヤを通過します...

これはすべて機能しますが、それでも、サーバー側の方法を検討することを強くお勧めします。

2016/01/30Wapac

JavaScriptとHTMLだけを使用した安全な認証システムを実際に使用することはできません。

Basic HTTP authentication をお勧めします。これははるかに安全であるためです（決して完璧ではありませんが、少なくとも標準のサーバー側のアクセス制御方法を採用しています）。

JavaScriptで何かを実装する必要がある場合は、隠しディレクトリの名前に基づいてパスワードのみのスキームを実行できます。次のようなもの（これはテストされていないため、調整が必要になることに注意してください）：

（この質問から借用および適合したコード）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
   $(function() {
      var url = "some_url";
      $.ajax(url,
      {
         if (statusCode == 200) {
           document.location.href = url;
         }
         else {
           alert('Incorrect password')
         }
      }
   });   
});
</script>

<input type="password" /><a href="javascript:void(0)">Login</a>

ボタンがクリックされたときに関数が呼び出されるように、コードを終了する必要があります。したがって、パスワードがfooの場合、fooという名前のWebサイトにディレクトリを設定し、入力されたパスワードがディレクトリ名と一致することをJQuery JavaScriptが検出した場合（例：/foo/）、ユーザーはそこにリダイレクトされます。したがって、/foo/index.htmlユーザーのログインセッションを処理するため。

これは、JavaScriptとHTMLのみで実行できる最も安全なものであり、次の脆弱性の影響を受けることに注意してください。

URLは秘密にしておく必要がありますが、これはリファラーヘッダー、ブラウザー履歴、サーバー/プロキシログによって漏洩する可能性があります。
ユーザーがログインすると、常にログインします（ログインしたページをブックマークできます）
パスワードを取り消す簡単な方法はありません。
パスワードは1つだけです。
サーバー上のファイルを表示するアクセス権を持つユーザーは誰でもディレクトリ構造を表示し、パスワードを知ることができます。
URLは分析ツールによってリークされる可能性があります。
サーバーでのディレクトリの参照が無効になっていると仮定します（またはプライベートページの親ディレクトリにデフォルトページがあると仮定します）。

いずれにせよ、サーバーを常にTLS/SSLで保護してください。 [〜＃〜] owasp [〜＃〜] からのアドバイスを使用して、ユーザー認証システムを適切に作成することをお勧めします。上記は、基本的なHTMLで達成可能なもののみを示しています（あまりありません）。ただし、クライアント側のファイル内でパスワードを公開するよりも優れています。

2016/02/01SilverlightFox