Captcha 구현 및 스팸 방지를위한 Javascript를 사용하는 방법

CAPTCHA 및 스팸 방지의 역할 이해

이 웹 사이트는 귀하가 웹 사이트를 탐색하는 동안 귀하의 경험을 향상시키기 위해 쿠키를 사용합니다. 이 쿠키들 중에서 필요에 따라 분류 된 쿠키는 웹 사이트의 기본적인 기능을 수행하는 데 필수적이므로 브라우저에 저장됩니다. 또한이 웹 사이트의 사용 방식을 분석하고 이해하는 데 도움이되는 제 3 자 쿠키를 사용합니다. 이 쿠키는 귀하의 동의하에 만 브라우저에 저장됩니다. 이러한 쿠키를 거부 할 수도 있습니다. 이러한 쿠키 중 일부를 선택 해제하면 검색 환경에 영향을 미칠 수 있습니다.

현대 CAPTCHA 구현은 기술을 정의 한 번 분산 된 텍스트 이미지를 넘어 진화했다. 자바 스크립트의 광범위한 채택으로, 개발자는 이제 수학 문제, 이미지 퍼즐, 또는 드래그 앤 드롭 작업과 같은 상호 작용하는 문제를 만들 수 있습니다. 그것은 봇을 우회하기 위해 더 많은 사용자 친화적이고 더 어렵다. 이 기사는 vanilla JavaScript를 사용하여 CAPTCHA를 구현하는 방법을 탐구하고, 추가 스팸 방지 기술을 통합하고, reCAPHA와 같은 타사 서비스를 사용할 때 결정.

스크래치에서 자바 스크립트 CAPTCHA를 구축

JavaScript를 가진 사용자 정의 CAPTCHA를 만들면 사용자 경험과 보안 논리를 통해 전체 제어를 제공합니다. 아래에서 우리는 수학 문제, 슬라이더 및 이미지 식별을 커버합니다. 각 방법은 일반 HTML, CSS 및 JavaScript로 구현 될 수 있으며 나중에 서버 측 유효성 검사 흐름에 통합됩니다.

방법 1: 수학 문제 CAPTCHA

가장 간단한 CAPTCHA는 사용자가 해결해야 무작위의 arithmetic 작업을 제공합니다. 이 작업은 낮은 리스크 양식을 위해 잘 작동하지만 HTML을 파거나 간단한 숫자에 광학 문자 인식 (OCR)을 사용할 수있는 고급 봇에 대해 안전하지 않습니다.

HTML 구조

<form id="contactForm">
 <div id="captchaContainer">
 <p id="captchaQuestion">Loading...</p>
 <input type="number" id="captchaAnswer" placeholder="Your answer" required />
 </div>
 <button type="submit">Submit</button>
</form>

JavaScript 논리

let captchaAnswer = 0;

function generateMathCaptcha() {
 const num1 = Math.floor(Math.random() * 20) + 1;
 const num2 = Math.floor(Math.random() * 10) + 1;
 const operator = ['+', '-', '*'][Math.floor(Math.random() * 3)];
 let expression = `${num1} ${operator} ${num2}`;
 captchaAnswer = eval(expression);
 document.getElementById('captchaQuestion').textContent = `What is ${expression}?`;
}

document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 const userAnswer = parseInt(document.getElementById('captchaAnswer').value, 10);
 if (userAnswer === captchaAnswer) {
 // Proceed with form submission
 console.log('CAPTCHA passed');
 } else {
 alert('Incorrect answer. Please try again.');
 generateMathCaptcha();
 document.getElementById('captchaAnswer').value = '';
 }
});

window.addEventListener('load', generateMathCaptcha);

Limitations: Math CAPTCHA는 JavaScript를 실행하고 답을 계산하는 봇에 취약합니다. 보안을 개선하려면 서버 측 유효성 (해당되는)과 결합하여 생성 된 도전을 수정하는 스크립트를 위해 더 열심히 만드는 방법을 고려하십시오.

방법 2: 슬라이더 CAPTCHA

슬라이드 도전은 특정 위치에 트랙을 따라 버튼을 드래그하는 데 필요한 사용자를 요구합니다. 이 기술은 인간의 같은 마우스 운동과 타이밍을 감지하여 간단한 봇을 에뮬레이트하기 위해 더 열심히합니다. 그러나 고급 봇은 드래그 이벤트를 시뮬레이션 할 수 있습니다.

기본 구현

<div id="sliderCaptcha">
 <div id="sliderTrack">
 <div id="sliderThumb">→</div>
 </div>
 <p id="sliderStatus">Slide to verify</p>
</div>

, , ] (또는 접촉 동등물) 이벤트 청취를 추가합니다. 엄지의 오프셋을 추적하고 대상 위치에 비교하십시오. 일반적인 트릭은 각 페이지 부하에 대상 위치를 무작위로 설정하고 최종 위치와 운동 패턴을 모두 유효하게합니다.

보안 노트: 봇은 프로그래밍적으로 마우스 이벤트를 트리거 할 수 있기 때문에 슬라이더 CAPTCHA는 이동 속도, 총 지속 시간 및 최종 위치를 기록하는 서버 측 체크로 쌍해야합니다. 봇은 종종 자연 가속 및 감속 프로파일을 생산하지 못합니다.

방법 3: 이미지 선택 CAPTCHA

심볼마크는 심볼마크를 사용하여 특정 카테고리(예: "교통 조명으로 모든 사각형을 선택한다.)를 선택하면, 스크래치가 아닌 사용자 친화적이지만, 이미지와 답변을 요청하기 때문에 스크래치에서 구현할 수 있는 복합적인 요소입니다. 이 접근 방식에 대한 제3자 서비스를 이용하기 위해서는 사전 저장된 이미지와 무작위로 정해진 설정으로 수행될 수 있습니다.

단스크 예:

<div id="imageGrid">
 <img src="cat.jpg" class="captcha-image" data-kind="animal">
 <img src="car.jpg" class="captcha-image" data-kind="vehicle">
 <img src="dog.jpg" class="captcha-image" data-kind="animal">
 <img src="tree.jpg" class="captcha-image" data-kind="plant">
</div>
<p>Select all images that show an animal.</p>

JavaScript는 선택한 이미지를 수집하고 ]]의 속성을 확인한다. 봇을 간단히 HTML을 읽을 수 있도록, 속성 값은 암호화되거나 서버에서 동적으로 생성되어야한다.

추가 기술로 보안 강화

클라이언트 측 CAPTCHA는 속이 없습니다; 봇은 역설계 JavaScript, 실행 헤드리스 브라우저, 또는 고급 AI를 사용할 수 있습니다. 따라서, 이러한 서버 측과 클라이언트 측 향상을 가진 당신의 frontend CAPTCHA를 결합합니다.

허니포 필드

허니팟은 인간의 볼 수 없거나 채우지 않는 숨겨진 형태 필드이지만, 봇은 종종 자동 완성됩니다. 또는 ]과 같은 스타일로 필드를 추가하십시오. 서버에서 허니팟이 빈치가없는 경우 제출을 거부합니다.

<input type="text" name="website" style="display:none" autocomplete="off">

시간 기반 검증

Bots는 밀리 초에 양식을 제출할 수 있습니다. 인간은 몇 초를 읽고 응답합니다. JavaScript (]])를 사용하여 양식 생성 시간을 기록하고 제출과 함께 보냅니다. 서버에서 합리적인 임계값 (예 : 2 초, 간단한 양식 5 초)보다 빠른 제출을 거부합니다.

const FORM_GENERATED = Date.now();
// On submit:
const submissionTime = Date.now() - FORM_GENERATED;
// Include in form data and validate server-side

Server-Side 검증 필수

Never trust client-side validation alone. 항상 서버에 CAPTCHA 대답을 다시 테스트. 도전 클라이언트 측을 생성하면, 당신은 또한 도전 매개 변수 (예를 들어, 번호 및 연산자)를 서버로 보내고 예상 대답을 다시 입력해야합니다. 더 나은 아직, 서버에서 도전을 생성, 클라이언트에 그것을 보내, 응답 서버 측을 검증. 이것은 항상 자바 스크립트 CAPTCHA를 통과하는 악성 사용자를 방지.

math CAPTCHA에 대한 서버 측 흐름을 예:

Server는 두 개의 임의 숫자와 연산자를 생성하고 세션에서 예상된 답변을 저장합니다. (또는 그것을 암호화).
Server는 클라이언트에 대한 질문을 보냅니다.
사용자의 답변을 제출합니다.
Server retrieves 저장된 대답 및 비교; 일치하면, 프로세스 양식.

외부 서비스로 CAPTCHA를 구현

생산 현장에 대해서는 기계 학습 기반 이미지 인식을 포함하여 자동화된 공격에 대한 강력한 보호를 제공하는 잘 설립 된 CAPTCHA 서비스를 사용합니다. 두 가지 인기있는 선택은 Google reCAPTCHA과 hCaptcha]입니다. 그들은 자바 스크립트 라이브러리를 통해 무료 계층과 쉽게 통합을 제공합니다.

reCAPTCHA v3 예제:

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
 document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 grecaptcha.ready(() => {
 grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then((token) => {
 // Append token to form and submit
 document.getElementById('recaptchaToken').value = token;
 document.getElementById('contactForm').submit();
 });
 });
 });
</script>

이 서비스는 모든 무거운 리프팅을 처리: 봇 감지, 적응성 문제, 접근성. 그들은 또한 대시보드를 모니터링 하 고 문턱을 조정 합니다. 그러나, 그들은 서비스의 서버에 인터넷 연결을 요구 하 고 개인 정보 보호 문제를 제기할 수 있습니다 (특히 RECAPTCHA의 쿠키 사용). 무역 떨어져 당신의 청중에 대 한 허용 여부를 평가 합니다.

pragmatic 통합 가이드의 경우 ]Google reCAPTCHA 개발자 문서를 참조하십시오.

CAPTCHA를 선택

액세스성:내가 장애를 가진 사용자를 위해 CAPTCHA를 허용한다. 화면 리더가 처리 될 수있는 오디오 문제 또는 텍스트 기반 질문은 WCAG 가이드라인에 따라 필수적이다.
Progressive Enhancement: 간단한 HTML 양식을 시작, 다음 CAPTCHA에 대한 자바 스크립트를 추가. 자바 스크립트가 비활성화되면, 서버 생성 된 이미지 CAPTCHA 또는 숨겨진 필드를 통해 전송 간단한 수학 쿼리로 돌아갑니다.
Rate Limiting: CAPTCHA는, 서버(예: 시간별 IP 주소 당 제한)에 제한 비율을 적용합니다. 이것은 CAPTCHA를 수동으로 끊기에서 결정적인 공격자를 방지합니다.
로깅 및 모니터링:로그 CAPTCHA 실패와 특이한 제출 패턴. 이 데이터는 미세 톤 임계값을 돕고 새로운 공격 벡터를 식별합니다.
Obfuscate 자바 스크립트:] 봇에 대한 더 열심히 만들기 위해 당신의 CAPTCHA 논리를 분화하고 방해합니다. 안감하지 않고, 역설계에 필요한 노력이 제기됩니다.
Combine Multiple Techniques:] 레이어 접근 방식을 사용합니다. 허니팟, 시간 체크, 슬라이더, 서버 측 더블 체크를 통해 단일 방법보다 훨씬 더 나은 보호를 제공합니다.