12

私はサイトの単純なJavaScriptログインに取り組んでおり、これを思いつきました:

<form id="loginwindow">
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
  <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
  <input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"username",text1.value,"password") />
</p>

</form>
<script language = "javascript">

function validate(text1,text2,text3,text4)
{
 if (text1==text2 && text3==text4)
 load('album.html');
 else 
 {
  load('failure.html');
 }
}
function load(url)
{
 location.href=url;
}
</script>

...これは 1 つのことを除いて機能します: フォームを送信するために Enter キーを押しても何も起こりません。「onclick」を使用したことが原因だと感じていますが、代わりに何を使用すればよいかわかりません。考え？

わかりましたので、これがセキュリティ面でいかに脆弱であるかをよく知っています。特にトップシークレットというわけではないので大した問題ではありませんが、コードで考えを詳しく説明していただけるとありがたいです。私がリストしたコードは文字通り、この時点で作業しているすべてなので、必要に応じてゼロから始めることができます。

4

7 に答える 7

33

ここでは、一度にいくつかのトピックが議論されています。明確にしてみましょう。

1.当面の懸念事項:

( ENTER を押しても入力ボタンが機能しないのはなぜですか? )

送信ボタン タイプを使用します。

<input type="submit".../>

..それ以外の

<input type="button".../>

あなたの問題は、 onclick属性を使用したこととは何の関係もありません。代わりに、送信ボタンと同じように動作しないボタン入力タイプを使用したため、必要な動作が得られません。

HTML および XHTML では、特定の要素に対してデフォルトの動作があります。フォームの入力ボタンは、多くの場合「送信」タイプです。ほとんどのブラウザでは、同じフォーム要素内のフォーカスされた要素から ENTER が押されると、デフォルトで「送信」ボタンが起動します。「ボタン」入力タイプはそうではありません。このデフォルトの動作を利用したい場合は、入力タイプを「送信」に変更できます。

例えば：

<form action="/post.php" method="post">
    <!-- 
    ...
    -->
    <input type="submit" value="go"/>
</form>

2. セキュリティ上の懸念:

@Adyはセキュリティ上の懸念について言及しました。javascriptでログインを行うことに関連するセキュリティ上の懸念が山ほどあります。これらはおそらくこの質問のドメイン外です。特に、特に心配していないことを示しているため、ログイン方法が実際には location.href を新しい html ページに設定しているだけであるという事実 (おそらく、実際のセキュリティメカニズムが整っていない可能性があります）。

誰かがそれらの質問に直接興味を持っている場合は、それを掘り下げる代わりに、 SOに関する関連トピックへのリンクを次に示します。

3. その他の問題:

これは、コードの簡単なクリーンアップです。これは、いくつかのベスト プラクティスに従っているだけです。人々が言及したセキュリティ上の懸念には対処していません。代わりに、単にいくつかの健康的な習慣を説明するためにこれを含めています。なぜ私が何かを特定の方法で書いたのかについて具体的な質問がある場合は、お気軽にお尋ねください. また、関連するトピックのスタックを参照してください (あなたの質問は既にここで議論されている可能性があるため)。

主な注意点は、イベント属性(onclick=""、onsubmit=""、または onkeypress="") が HTML から削除されていることです。これらは JavaScript に属しており、JavaScript イベントをマークアップから除外することをお勧めします。 

<form action="#" method="post" id="loginwindow">
    <h3>Login to view!</h3>
    <label>User ID: <input type="text" id="userid"></label>
    <label>Password: <input type="password" id="pass"></label>
    <input type="submit" value="Check In" />
</form>

<script type="text/javascript">
window.onload = function () {
    var loginForm = document.getElementById('loginwindow');
    if ( loginwindow ) {
        loginwindow.onsubmit = function () {

            var userid = document.getElementById('userid');
            var pass = document.getElementById('pass');

            // Make sure javascript found the nodes:
            if (!userid || !pass ) {
                return false;
            }

            // Actually check values, however you'd like this to be done:
            if (pass.value !== "secret")  {
                location.href = 'failure.html';
            }

            location.href = 'album.html';
            return false;
        };
    }
};
</script>
于 2008-10-27T04:35:37.930 に答える
1

<input type = "button">の代わりに、<input type="submit">を使用してください。検証コードをフォームのonsubmitハンドラーに入れることができます。

<form id = "loginwindow" onsubmit = "validate（...）">

于 2008-10-27T04:39:45.487 に答える
1

これはフォーム送信ではないため、ユーザーがEnterキーを押したときにトリガーされるイベントはありません。上記のフォーム送信オプションの代わりに、ユーザーがEnterキーを押したかどうかを検出するために、入力フォームのイベントリスナーを追加することもできます。

<input type="password" name="text1" onkeypress="detectKey(event)">
于 2008-10-27T04:44:42.153 に答える
1

スクリプトを html ドキュメントに直接配置します。使用する関数で onclick 値を変更します。HTML のスクリプトは、ユーザーが Enter キーを押すか送信ボタンを押すと、フォームに送信するように指示します。

 <form id="Form-v2" action="#">

<input type="text" name="search_field"  placeholder="Enter a movie" value="" 
id="search_field" title="Enter a movie here" class="blink search-field"  />
<input type="submit" onclick="" value="GO!" class="search-button" />        
 </form>

    <script>
    //submit the form
    $( "#Form-v2" ).submit(function( event ) {
      event.preventDefault();
    });
         </script>
于 2017-05-15T12:22:15.623 に答える
0

多分あなたはこれを試すことができます：

<form id="loginwindow" onsubmit='validate(text2.value,"username",text1.value,"password")'>
<strong>Login to view!</strong>
<p><strong>User ID:</strong>
   <input type="text" name="text2">
</p>
<p><strong>Password:</strong>
<input type="password" name="text1"><br>
   <input type="submit" value="Check In"/>
</p>

</form>

他の人が指摘しているように、あなたの解決策には他の問題があります。しかし、これはあなたの質問に答えるはずです。

于 2008-10-27T04:40:39.680 に答える
0

確かに、誰もがすぐにそれをクラックすることができるので、これはあまりにも安全ではありません...

--js-loginsを実行するための疑似セキュアな方法は次のようなものだけです。

<form action="http://www.mySite.com/" method="post" onsubmit="this.action+=this.theName.value+this.thePassword.value;">
  Name: <input type="text" name="theName"><br>
  Password: <input type="password" name="thePassword"><br>
  <input type="submit" value="Login now">
</form>
于 2008-10-27T04:49:27.323 に答える
0

私の考え = 大規模なセキュリティ ホール。誰でもユーザー名とパスワードを表示できます。

あなたの質問により関連性があります: - 2 つのイベントが発生しています。

  1. ユーザーがボタンをクリックします。
  2. ユーザーが Enter キーを押します。

Enter キーはフォームを送信しますが、ボタンをクリックしません。

フォームの onsubmit メソッドにコードを配置すると、フォームが送信されたときにコードが実行されます。送信するボタンの入力タイプを変更することで、ボタンは入力ボタンと同じ方法でフォームを送信します。

コードは両方のイベントに対して実行されます。

于 2008-10-27T04:35:14.590 に答える