jQuery プラグインは静的 HTML 検証コードを実装します verify

jQuery プラグインは静的 HTML 検証コードを実装します verify_jquery

WBOY

リリース： 2016-05-16 15:33:25

オリジナル

1724 人が閲覧しました

jQuery はアメリカ人の John Resig によって作成され、each(fn) などの多くのトラバーサル関数を提供する高速で簡潔な JavaScript ライブラリです。 jQuery は、ユーザーの HTML ページのコードと HTML コンテンツを分離したままにすることができます。つまり、コマンドを呼び出すために HTML に大量の js を挿入する必要はありません。必要なのは ID を定義することだけです。これらの操作特性により、ユーザーは HTML ドキュメントやイベントを簡単に処理し、アニメーション効果を実装し、Web サイトにインタラクションを簡単に提供できます。現在、jQuery には世界中から多くの JavaScript 専門家が参加しています。

ここで説明する jQuery Real person プラグインは、完全に JavaScript で書かれた jQuery 検証コードプラグインです。

jQuery Real Person Plugin は、主に文字と 文字と数字の混合 という 2 つの検証メソッドを実装しており、自動送信を効果的に防止できます。形状。図 1 に示すように、外観表示にはカスタマイズ機能が備わっています。デフォルトは 6 桁の文字です。

必要に応じて、図 2 に示すように 8 桁の確認コードをカスタマイズすることもできます。

または、図 3 に示すように、英数字が混在した検証コード。

さらに、図 4 に示すように、ユーザーは下部のテキストをカスタマイズすることもできます。

これらのユニークで強力な検証インターフェイスを見て、自分たちで実装できるでしょうか?答えは「はい」です。以下では、jQuery Real Person Plugin の検証プロセスを段階的に説明して分析します。
ステップ 1、この検証機能を使用する前に、JavaScript と CSS ファイルを導入します。

<script type="text/JavaScript" src="Scripts/jquery-1.3.2.js"></script>
<script type="text/JavaScript" src="Scripts/jquery.realperson.js"></script>
<style type="text/css">@import "Styles/jquery.realperson.css";</style>

ログイン後にコピー

上記のコードでは、1 行目で jQuery クラスライブラリが導入されています。最新の jQuery クラスライブラリは公式 Web サイトからダウンロードできます。 2 行目では、検証コードプラグインライブラリ jquery.realperson.js を導入しています。 3 行目では、検証コードスタイルファイル jquery.realperson.css が導入されています。 Web サイトのインターフェイスを図 5 に示します。

ステップ 2、HTML 部分であるテキストボックス要素をページに配置します。

<table>
<tr>
<td><input type="text" id="txtValidate" name="defaultReal"></td>
</tr>
<tr>
<td><asp:Button ID="btnSubmit" runat="server" Text="登录" /></td>
</tr>
</table>

ログイン後にコピー

上記のコードでは、1 行目はレイアウトに 2 行 1 列を使用し、1 行はテキストボックスの保存に使用され、1 行はログインボタンの保存に使用されます。 3 行目は、検証コードを入力するための id="txtValidate" のテキストボックスを定義します。 6 行目では、id="btnSubmit" を使用して送信ボタンを定義します。これは、システムにログインするためのバックグラウンドイベントをトリガーするために使用されます。
ステップ 3: ページが初期化されたら、検証コードプラグインを呼び出して検証コードの表示を初期化します。

<script>
$(document).ready(function () {
$("#txtValidate").realperson({ length: 5 });
}
);
</script>

ログイン後にコピー

上記のコードの 2 行目は、ページのロード時に実行される操作であり、ページの onLoad イベントに相当します。行 3 は、検証コードコントロールのインターフェイスを呼び出して、検証コードを表示します。
ステップ 4、コアコード分析。

/* 核心代码
@param target (jQuery) the input field
@param inst  (object) the current instance settings
@return (string) the additional content */
_generateHTML: function(target, inst) {
var text = '';
for (var i = 0; i < inst.settings.length; i++) {
text += CHARS.charAt(Math.floor(Math.random() *
(inst.settings.includeNumbers &#63; 36 : 26)));
}
 var html = '<div class="realperson-challenge"><div class="realperson-text">';
 for (var i = 0; i < DOTS[0].length; i++) {
 for (var j = 0; j < text.length; j++) {
 html += DOTS[CHARS.indexOf(text.charAt(j))][i] + ' ';
}
html += '\n';
}
html += '</div><div class="realperson-regen">' + inst.settings.regenerate +
'</div></div><input type="hidden" class="realperson-hash" name="' +
inst.settings.hashName.replace(/\{n\}/, target.attr('name')) +
'" value="' + this._hash(text) + '">';
return html;

ログイン後にコピー

上記のコードでは、行 7 ～ 9 は検証コードのランダムな文字を生成するために使用されます。 12 行目から 22 行目は、背景文字とランダム文字を HTML コードに組み立ててブラウザに出力するために使用されます。

上記の分析を通じて、確認コードがパスワードのセキュリティにおいて非常に重要な役割を果たしていることがわかります。たとえば、銀行口座のセキュリティ問題を考えると、ハッカーは他の手段で銀行口座を取得し、オンラインバンキングのログインインターフェイスを開きます。ブラウザでソースコードを表示する方法を使用して、ログインインターフェイスの HTML コードを分析すると、ページには検証コードやその他のセキュリティ設定が存在せず、HTTP プロトコルのみが使用されていることがわかります。したがって、プログラムを使用してブラウザのリクエストをシミュレートし、銀行サーバーがアカウントとパスワードを送信します。パスワードは通常6桁のアラビア数字で、正解する確率は10の6乗、つまり100万回です。ハッカーは高性能、高帯域幅のコンピュータを見つけて、銀行のパスワードを抽出するプログラムを実行します。このコンピュータが 1 秒間に 10 個のパスワードをテストできると仮定すると、100,000 秒 (つまり 27 時間、約 1 日) かかります。すべてのパスワードを調べてください。実際、ハッカーがパスワードを盗むのにそれほど時間はかかりません。そして、銀行口座のお金が送金されます。つまり、検証コードがない場合、ハッカーはプログラムを使用して銀行のパスワードを取得することで、1 日程度で簡単に違法な収入を得ることができます。

実際のアプリケーションでは、漢字検証コードも比較的一般的な検証コードです。その原理は、中国語の文字セットからいくつかの漢字をランダムに選択し、画像を生成し、HTTP 出力を通じてページにストリーミングすることです。クライアントが正しい漢字を入力した場合は操作を続行できますが、そうでない場合はログインが禁止されます。中国には5000年の歴史があり、広大で奥深い文化があり、9万字以上の漢字が存在しており、10桁の数字認証コードや26文字のアルファベット認証コードと比べて、漢字認証コードの方が安全です。したがって、認証コードのセキュリティを研究することで、中国文化の奥深さをより深く理解することができます。パスワード認証もこのように行うことができることがわかりました。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。