HTML, CSS 및 JavaScript를 사용하여 CAPTCHA 유효성 검사 양식 만들기

HTML, CSS 및 JavaScript를 사용하여 CAPTCHA 유효성 검사 양식 만들기

요즘 CAPTCHA는 웹사이트 보안의 필수적인 부분입니다. 수백만 건의 보안 문자 테스트가 매일 온라인으로 완료됩니다.





웹사이트에서 CAPTCHA 유효성 검사를 구현하지 않은 경우 스팸 발송자의 대상이 되어 큰 문제가 발생할 수 있습니다.



다음은 보안문자에 대해 알아야 할 모든 것과 HTML, CSS 및 JavaScript를 사용하여 웹사이트에서 보안문자를 쉽게 구현하는 방법입니다.





보안문자란 무엇입니까?

CAPTCHA는 'Completely Automated Public Turing test to tell Computers and Humans Apart'의 약자입니다. 이 용어는 Luis von Ahn, Manuel Blum, Nicholas J. Hopper 및 John Langford에 의해 2003년에 만들어졌습니다. 사용자가 인간인지 여부를 판별하는 데 사용되는 일종의 시도-응답 테스트입니다.

보안 문자는 봇이 수행하기 어렵지만 인간에게는 비교적 쉬운 문제를 제공하여 웹 사이트에 보안을 추가합니다. 예를 들어, 여러 이미지 세트에서 자동차의 모든 이미지를 식별하는 것은 봇에게는 어렵지만 사람의 눈에는 충분히 간단합니다.



CAPTCHA의 아이디어는 Turing Test에서 시작되었습니다. 튜링 테스트는 기계가 인간처럼 생각할 수 있는지 여부를 테스트하는 방법입니다. 흥미롭게도 CAPTCHA 테스트는 이 경우 컴퓨터가 인간에게 도전하는 테스트를 생성하기 때문에 '역 튜링 테스트'라고 할 수 있습니다.

웹 사이트에 보안 문자 인증이 필요한 이유는 무엇입니까?

CAPTCHA는 주로 봇이 스팸 및 기타 유해 콘텐츠가 포함된 양식을 자동으로 제출하는 것을 방지하는 데 사용됩니다. Google과 같은 회사에서도 스팸 공격으로부터 시스템을 방지하기 위해 사용합니다. 다음은 귀하의 웹사이트가 CAPTCHA 유효성 검사의 이점을 얻는 몇 가지 이유입니다.



  • CAPTCHA는 해커와 봇이 가짜 계정을 만들어 등록 시스템을 스팸하는 것을 방지하는 데 도움이 됩니다. 방지되지 않으면 해당 계정을 악의적인 목적으로 사용할 수 있습니다.
  • 보안 문자는 해커가 수천 개의 암호를 사용하여 로그인을 시도하는 데 사용하는 웹 사이트의 무차별 대입 로그인 공격을 차단할 수 있습니다.
  • 보안 문자는 거짓 댓글을 제공하여 봇이 리뷰 섹션을 스팸하는 것을 제한할 수 있습니다.
  • CAPTCHA는 일부 사람들이 재판매를 위해 많은 수의 티켓을 구매하므로 티켓 인플레이션을 방지하는 데 도움이 됩니다. CAPTCHA는 무료 이벤트에 허위 등록을 방지할 수도 있습니다.
  • CAPTCHA는 악성 댓글과 유해한 웹사이트 링크가 포함된 스팸 블로그에서 사이버 사기꾼을 제한할 수 있습니다.

CAPTCHA 유효성 검사를 웹 사이트에 통합하는 것을 지원하는 더 많은 이유가 있습니다. 다음 코드로 그렇게 할 수 있습니다.

hiberfil.sys 윈도우 10을 삭제하는 방법

HTML 보안문자 코드

HTML 또는 HyperText Markup Language는 웹 페이지의 구조를 설명합니다. 다음 HTML 코드를 사용하여 CAPTCHA 유효성 검사 양식을 구성하십시오.












captcha text



Refresh






이 코드는 주로 7개의 요소로 구성됩니다.

  • : 이 요소는 CAPTCHA 양식의 제목을 표시하는 데 사용됩니다.

  • : 이 요소는 CAPTCHA 텍스트를 표시하는 데 사용됩니다.
  • - 이 요소는 CAPTCHA를 입력하기 위한 입력 상자를 만드는 데 사용됩니다.
  • : 이 버튼은 양식을 제출하고 CAPTCHA와 입력한 텍스트가 동일한지 확인합니다.
  • : 보안문자를 새로고침하는 버튼입니다.
  • : 이 요소는 입력된 텍스트에 따라 출력을 표시하는 데 사용됩니다.
  • : 이것은 다른 모든 요소를 ​​포함하는 상위 요소입니다.

CSS 및 JavaScript 파일은 다음을 통해 이 HTML 페이지에 연결됩니다. 그리고 요소를 각각. 추가해야 합니다. 링크 내부에 태그 머리 태그 및 스크립트 태그 끝에 신체 .

이 코드를 웹사이트의 기존 양식과 통합할 수도 있습니다.

관련된: HTML Essentials 치트 시트: 태그, 속성 등



CSS 보안문자 코드

CSS 또는 Cascading Style Sheets는 HTML 요소의 스타일을 지정하는 데 사용됩니다. 다음 CSS 코드를 사용하여 위 HTML 요소의 스타일을 지정합니다.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}

기본 설정에 따라 이 코드에서 CSS 속성을 추가하거나 제거합니다. 다음을 사용하여 양식 컨테이너에 우아한 모양을 줄 수도 있습니다. CSS 상자 그림자 속성 .

자바스크립트 보안문자 코드

자바스크립트 정적 웹 페이지에 기능을 추가하는 데 사용됩니다. 다음 코드를 사용하여 CAPTCHA 유효성 검사 양식에 전체 기능을 추가합니다.

// document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext('2d');
ctx.font = '30px Roboto';
ctx.fillStyle = '#08e5ff';

let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the CAPTCHA
let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);

// This event listener is stimulated whenever the user press the 'Enter' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of 'Enter' Button is 13
if (e.keyCode === 13) {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
}
});
// This event listener is stimulated whenever the user clicks the 'Submit' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
});
// This event listener is stimulated whenever the user press the 'Refresh' button
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button
refreshButton.addEventListener('click', function() {
userText.value = '';
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
c = refreshArr.join('');
ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
output.innerHTML = '';
});

이제 완전한 기능을 갖춘 CAPTCHA 유효성 검사 양식이 생겼습니다! 전체 코드를 보려면 다음을 복제할 수 있습니다. 이 CAPTCHA-Validator 프로젝트의 GitHub 저장소 . 리포지토리를 복제한 후 HTML 파일을 실행하면 다음 출력을 얻을 수 있습니다.

Android에서 연결된 Wi-Fi 비밀번호를 아는 방법

입력 상자에 올바른 보안 문자 코드를 입력하면 다음 출력이 표시됩니다.

입력 상자에 잘못된 보안 문자 코드를 입력하면 다음 출력이 표시됩니다.

보안문자로 웹사이트를 안전하게 만드세요

과거에는 많은 조직과 기업이 웹사이트에 CAPTCHA 양식이 없는 결과 데이터 유출, 스팸 공격 등과 같은 큰 손실을 입었습니다. 웹사이트에 사이버 범죄자로부터 보호하는 보안 계층을 추가하는 보안문자를 웹사이트에 추가하는 것이 좋습니다.

Google은 또한 스팸 및 남용으로부터 웹사이트를 보호하는 데 도움이 되는 'reCAPTCHA'라는 무료 서비스를 출시했습니다. CAPTCHA와 reCAPTCHA는 비슷해 보이지만 완전히 같은 것은 아닙니다. 때때로 CAPTCHA는 많은 사용자에게 답답하고 이해하기 어렵게 느껴집니다. 하지만, 그들이 왜 어렵게 만들어졌는지에 대한 중요한 이유가 있습니다.

공유하다 공유하다 트위터 이메일 보안문자는 어떻게 작동하며 왜 그렇게 어려운가요?

CAPTCHA 및 reCAPTCHA는 스팸을 방지합니다. 그들은 어떻게 작동합니까? 보안문자가 해결하기 어려운 이유는 무엇입니까?

다음 읽기 관련 항목
  • 프로그램 작성
  • HTML
  • 자바스크립트
  • CSS
저자 소개 유브라지 찬드라(60편 게재)

Yuvraj는 인도 델리 대학교의 컴퓨터 공학 학부생입니다. 그는 풀 스택 웹 개발에 열정적입니다. 그는 글을 쓰지 않을 때 다양한 기술의 깊이를 탐구하고 있습니다.

유브라지 찬드라가 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.