jQuery 플러그인은 정적 HTML 확인 코드 verify_jquery를 구현합니다.

jQuery는 미국인 John Resig가 만들었습니다. 이는 Each(fn)와 같은 많은 순회 기능을 제공하는 빠르고 간결한 JavaScript 라이브러리입니다. jQuery는 사용자 HTML 페이지의 코드와 HTML 콘텐츠를 분리하여 유지할 수 있습니다. 즉, 명령을 호출하기 위해 HTML에 여러 개의 js를 삽입할 필요가 없습니다. 사용자가 HTML 문서, 이벤트를 쉽게 처리하고, 애니메이션 효과를 구현하고, 웹 사이트에 대한 상호 작용을 쉽게 제공할 수 있는 것은 이러한 운영 특성입니다. 오늘날 jQuery는 전 세계의 많은 JavaScript 전문가를 끌어들였습니다.

여기서 이야기할 jQuery Real Person Plugin은 완전히 JavaScript로 작성된 jQuery 인증 코드 플러그인입니다.

jQuery Real Person Plugin은 주로 문자와 문자와 숫자 혼합의 두 가지 확인 방법을 구현하여 자동 제출을 효과적으로 방지할 수 있습니다. 형태. 모양 표시는 그림 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 클래스 라이브러리를 다운로드할 수 있습니다. 2행에서는 확인 코드 플러그인 라이브러리 jquery.realperson.js를 소개합니다. 3행에서는 확인 코드 스타일 파일 jquery.realperson.css를 소개합니다. 웹사이트 인터페이스는 그림 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개의 열을 사용하고, 한 행은 텍스트 상자를 저장하는 데 사용되고, 한 행은 로그인 버튼을 저장하는 데 사용됩니다. 3행에서는 확인 코드를 입력하기 위한 id="txtValidate"가 포함된 텍스트 상자를 정의합니다. 6행에서는 시스템에 로그인하기 위해 백그라운드 이벤트를 트리거하는 데 사용되는 id="btnSubmit"을 사용하여 제출 버튼을 정의합니다.
3단계: 페이지가 초기화되면 인증코드 플러그인을 호출하여 인증코드 표시를 초기화합니다.

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

위 코드에서 두 번째 줄은 페이지가 로드될 때 수행되는 작업으로, 페이지의 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개의 비밀번호를 테스트할 수 있다고 가정하면 10만초(즉, 27시간, 하루 정도)가 걸린다. 실제로 해커가 비밀번호를 훔치는 데는 그리 오랜 시간이 걸리지 않으며 은행 계좌에 있는 돈이 이체됩니다. 즉, 인증번호가 없을 경우 해커들이 해당 프로그램을 이용해 은행 비밀번호를 알아내면 하루 정도 만에 쉽게 불법 소득을 얻을 수 있다는 것이다.

실제 응용 분야에서 한자 인증 코드는 비교적 일반적인 인증 코드이기도 합니다. 그 원칙은 한자 세트에서 여러 한자를 무작위로 선택하고 그림을 생성한 후 HTTP 출력을 통해 페이지로 스트리밍하는 것입니다. 클라이언트가 올바른 중국어 문자를 입력하면 작업을 계속할 수 있으며, 그렇지 않으면 로그인이 금지됩니다. 중국은 5천년의 역사와 광대하고 심오한 문화를 가지고 있으며, 9만 개가 넘는 한자 문자를 보유하고 있으며, 10자리 숫자 인증코드와 26자리 알파벳 인증코드에 비해 한자 인증코드가 더 안전합니다. 따라서 인증 코드 보안에 대한 연구를 통해 우리는 중국 문화의 심오함을 더 잘 이해할 수 있습니다. 비밀번호 인증도 이런 방식으로 수행할 수 있다는 것이 밝혀졌습니다!

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.