캡차는 매일 수백만 명의 개인이 작성하기 때문에 웹사이트의 보안을 보장하는 데 중요한 역할을 합니다.
웹사이트에 캡차 유효성 검사를 구현하지 않으면 스팸 발송 주체의 원치 않는 관심을 끌게 되어 이러한 악의적인 활동에 쉽게 노출되는 등 심각한 결과를 초래할 수 있습니다.
웹사이트에 캡차 기능을 통합하는 것은 웹 보안의 필수 요소가 되었습니다. 이 문서에서는 HTML, CSS, 자바스크립트를 사용하여 캡차 기능을 구현하는 방법에 대한 종합적인 가이드를 제공합니다. 이러한 프로그래밍 언어를 사용하면 웹사이트 디자인에 원활하게 통합하는 동시에 자동화된 공격으로부터 사용자의 안전을 보장할 수 있습니다.
캡챠란 무엇인가요?
CAPTCHA는 “컴퓨터와 인간을 구분하기 위한 완전 자동화된 공개 튜링 테스트”의 약자로, 루이스 폰 안, 마누엘 블룸, 니콜라스 J. 호퍼, 존 랭포드에 의해 고안되었습니다. 이 메커니즘은 웹 사이트에서 인간 사용자와 자동화된 봇을 구분하기 위해 사용하는 챌린지 응답 프로토콜로 사용됩니다.
CAPTCHA(컴퓨터와 인간을 구분하기 위한 완전 자동화된 공개 튜링 테스트) 메커니즘은 자동화된 에이전트에게는 어렵지만 인간 사용자에게는 관리 가능한 작업을 제시하여 웹사이트 보안을 강화합니다. 예를 들어, 자동차의 여러 시각적 표현을 구별하는 작업은 로봇에게는 복잡하지만 사람이 인식할 수 있는 작업입니다.
캡차는 기계가 인간과 구별할 수 없는 인지 능력을 가지고 있는지 확인하기 위해 고안된 실험 패러다임인 유명한 튜링 테스트에서 그 개념적 뿌리를 찾을 수 있습니다. 기본적으로 보안 문자는 튜링 테스트를 역으로 반복한 것으로, 인간으로 추정되는 사용자가 자동화된 에이전트를 피할 수 있는 일련의 작업을 성공적으로 완료하여 자신의 인간성을 검증해야 합니다.
웹사이트에 캡차 검증이 필요한 이유
캡차는 웹 양식을 통한 스팸 및 악성 콘텐츠의 자동 제출을 방지하고 특정 유형의 사이버 공격을 완화하여 다양한 온라인 플랫폼을 보호하는 데 중요한 역할을 합니다.
유명 기업인 Google은 스팸 공격으로 인한 원치 않는 침입으로부터 인프라를 보호하기 위해 캡차도 활용하고 있습니다.
HTML 캡차 코드
본 프로젝트의 소스 코드는 오픈 소스 리소스로 GitHub에 공개되어 있으며, MIT 라이선스 조건에 따라 누구나 무료로 사용할 수 있습니다. 이 프로젝트의 데모를 실시간으로 살펴보고 싶은 분들은 쇼케이스 모델을 온라인에서 쉽게 구할 수 있습니다.
이 노력의 목적은 다음과 같이 제공된 코드 스니펫을 활용하여 기존 HTML 양식 내에 캡차 메커니즘을 통합하는 것입니다:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="center">
<h1 id="captchaHeading">
Captcha Validator Using HTML, CSS and JavaScript
</h1>
<div id="captchaBackground">
<canvas id="captcha">captcha text</canvas>
<input id="textBox" type="text" name="text">
<div id="buttons">
<input id="submitButton" type="submit">
<button id="refreshButton" type="submit">Refresh</button>
</div>
<span id="output"></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
현재 프로그램은 주로 다양한 기능과 작업을 포괄하는 총 7개의 별개의 구성 요소로 이루어져 있습니다.
“캡차헤딩”이라는 ID 속성이 있는
태그는 캡차 양식의 헤더 역할을 하여 제목 또는 이름을 보다 세련된 방식으로 표시합니다.
ID가 “captcha”인
앞서 언급한 코드 스니펫은 HTML 구성을 포함하며, 그 안에는 ‘id’, ‘type’, ‘name’ 등의 속성으로 특징지어지는 ‘textBox’로 할당된 식별자가 존재합니다. 전자는 이 특정 입력 인스턴스를 페이지의 다른 입력 인스턴스와 구별하는 역할을 하며, 후자의 두 속성은 각각의 기능을 부여합니다. 특히 ‘유형’ 속성은 해당 컴포넌트가 ‘텍스트’ 유형임을 나타내며, 이는 사용자가 생성한 텍스트 입력이 허용됨을 의미합니다. 동시에 ‘이름’ 속성은 스크립팅 언어 또는 기타 프로그래밍 기술을 통해 입력을 참조하거나 액세스할 수 있는 수단을 제공합니다.
ID가 ‘submitButton’인 입력 요소는 클릭 시 유효성 검사를 위해 양식 데이터를 전송하고, 제출을 처리하기 전에 입력된 CAPTCHA 응답이 사용자가 입력한 텍스트와 일치하는지 확인하는 제출 버튼입니다.
다음 코드 스니펫은 “제출” 유형인 ID가 “refreshButton”인 버튼 요소를 나타냅니다. 이 버튼을 클릭하면 캡차 새로 고침 동작이 트리거됩니다.
요소는 입력이 처리 및 평가된 후 CAPTCHA 메커니즘을 통해 입력의 유효성을 검사한 결과를 표시하는 역할을 합니다.
“center” 클래스 속성이 있는
앞서 언급한 캡차 HTML 템플릿에는 두 가지 중요한 구성 요소, 즉 CSS 파일에 연결하기 위한 링크 요소와 자바스크립트 코드를 통합하기 위한 스크립트 요소가 포함되어 있습니다. 링크 태그는 헤드 섹션에 포함시키고 스크립트 태그는 본문 콘텐츠의 끝 부분에 배치하는 것이 중요합니다.
광범위한 HTML 태그와 속성을 탐색하는 것은 일부 개인에게는 벅찬 작업일 수 있습니다. 하지만 사용 가능한 다양한 HTML 태그와 각 속성에 관한 정보를 빠르게 기억할 수 있는 편리한 수단으로 HTML 참조 가이드 또는 ‘치트 시트’를 참조하는 것이 효과적인 해결책 중 하나입니다.
이 코드를 통합하면 현재 웹 양식과 원활하게 통합할 수 있습니다.
CSS 캡차 코드
캐스케이딩 스타일 시트(CSS)를 활용하면 아래 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;
}
.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;
}
양식 컨테이너에 상자 그림자 속성을 사용하여 세련된 모양을 유지하면서 디자인 기본 설정에 따라 제공된 HTML 및 CSS 코드를 수정합니다.
자바스크립트를 사용한 캡차 유효성 검사
웹사이트에 추가 기능을 불어넣으려면 자바스크립트를 사용해야 합니다. 처음에는 `document.getElementById()` 메서드를 사용하여 캔버스 및 입력 필드와 같은 조작에 필요한 모든 요소를 검색합니다:
let captchaText = document.getElementById('captcha');
var ctx = captchaText.getContext("2d");
ctx.font = "30px Roboto";
ctx.fillStyle = "#08e5ff";
let userText = document.getElementById('textBox');
let submitButton = document.getElementById('submitButton');
let output = document.getElementById('output');
let refreshButton = document.getElementById('refreshButton');
이 경우 `document.getElementByID()`라는 함수를 사용하여 문서 내에서 고유 식별자를 기반으로 특정 요소를 선택하는 방법을 활용하고 있습니다.
캡차 문자열을 생성하려면 미리 정의된 풀에서 문자 그룹을 무작위로 선택해야 합니다. 이 목적을 달성하기 위해 사용할 수 있는 몇 가지 방법이 있으며, 가능한 문자 선택 모음이 포함된 배열을 활용하는 것도 이러한 접근 방식 중 하나입니다:
var captchaStr = "";
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'];
시각적으로 복잡하고 해독하기 어려운 코드를 생성하는 알고리즘 프로세스를 활용하여 새로운 보안 문자를 생성한 다음, 사용자가 웹사이트의 특정 제한된 콘텐츠에 액세스하기 전에 인간임을 확인하기 위해 풀어야 하는 이미지로 표시합니다. 이 기능은 웹페이지를 처음 로드할 때 또는 사용자가 새로고침 버튼과의 상호 작용을 통해 호출하여 보안 문자의 유효성을 확인할 수 있습니다.
HTML5 캔버스에 예술적인 패턴을 생성하려면 먼저 `alphaNums` 집합에서 임의의 문자로 구성된 새 배열을 생성하는 것으로 시작할 수 있습니다. 그런 다음 미리 정해진 반복 횟수만큼 반복하고, 각 반복마다 `alphaNums` 집합에서 임의로 선택한 다른 문자를 추가합니다. 마지막으로 `fillText()` 메서드를 사용하여 완성된 배열을 캔버스 표면에 텍스트 요소로 새겨 넣습니다.
function generate_captcha() {
let emptyArr = [];
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaStr = emptyArr.join('');
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
ctx.fillText(captchaStr, captchaText.width/4, captchaText.height/2);
output.innerHTML = "";
}
generate_captcha();
이 작업은 드로잉 표면을 지우고 모든 출력을 초기 상태로 복원하여 캡차 문자를 다시 활성화합니다.
시스템의 주요 기능 구현은 초기 보안 문자 값으로 사용자 입력을 확인하는 데 의존합니다. 이를 위해 두 값을 비교하고 그에 따라 결과를 반환하는 전용 함수를 만들 수 있습니다. 이렇게 하면 프로세스를 더 진행하기 전에 정확한 유효성 검사를 보장할 수 있습니다.
function check_captcha() {
if (userText.value === captchaStr) {
output.className = "correctCaptcha";
output.innerHTML = "Correct!";
} else {
output.className = "incorrectCaptcha";
output.innerHTML = "Incorrect, please try again!";
}
}
‘엔터’ 키 또는 ‘제출’ 버튼의 입력에 대한 응답으로 다음 방법 중 하나를 사용하여 적절한 함수를 호출할 수 있습니다: 자바스크립트 // 예제 1 – ‘Enter’ 키와 함께 ‘키다운’ 이벤트 사용하기 document.addEventListener(‘keydown’, (event) => { if (event.code === ‘Enter’) { handleFormSubmission(); } }); // 예제 2 – 폼 요소에서 ‘제출’ 이벤트 사용하기 const submitButton = document.querySelector(‘#my-form .btn’); // 실제 버튼 선택기로 바꾸기 submitButton.addEventListener(‘click’, () => { { handleFormSubmission(); });
userText.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
check_captcha();
}
});
submitButton.addEventListener('click', check_captcha);
캡차 새로고침 기능을 구현하려면 버튼의 “제출” 이벤트를 `generate_captcha()` 함수에 연결하면 됩니다. 이렇게 하면 사용자가 필요할 때 새 보안 문자를 쉽게 얻을 수 있습니다.
refreshButton.addEventListener('click', generate_captcha);
캡차 검증기 프로젝트 출력
이전 단계에서는 웹 사이트에서 스팸 또는 자동화 시도를 방지하기 위한 추가 보안 조치를 위해 사용자가 생성한 캡차를 기존 캡차와 비교하여 검증하는 TensorFlow.com을 사용하여 제대로 작동하는 캡차 검증 양식을 성공적으로 구현했습니다. 이 코드는 해당 GitHub 리포지토리에서 복제할 수 있으며, 실행 시 예상되는 결과를 얻을 수 있습니다.
지정된 입력 필드에 유효한 캡차 인증 코드를 제출하면 다음과 같이 화면에 해당 응답이 표시됩니다:
지정된 입력 필드에 잘못된 캡차 검증 코드를 제출하면 시스템은 다음과 같은 결과를 생성합니다:
캡차로 웹사이트 보안 강화
이전에는 수많은 기관과 기업이 온라인 플랫폼에 캡차 양식이 없어 데이터 유출 및 스팸 공격 등 상당한 차질을 겪었습니다. 사이트를 손상시키려는 악의적인 공격자에 대한 추가적인 보호 계층을 제공하기 위해 캡차 구현을 강력히 권장합니다.
다른 서비스 외에도 Google은 원치 않는 스팸 및 악의적인 공격으로부터 웹사이트를 보호하는 역할을 하는 ‘reCAPTCHA’라는 무료 서비스를 도입했습니다. 캡차와 리캡차는 언뜻 보기에는 동일해 보이지만, 실제로는 미묘한 차이가 있는 별개의 개체입니다. 캡차는 널리 사용되고 있음에도 불구하고, 특히 모호한 텍스트나 이미지를 해독하는 데 있어 어렵고 혼란스럽다는 비판을 받아왔습니다. 그러나 이러한 어려움은 온라인 플랫폼의 보안을 보장하는 데 중요한 역할을 합니다.
By 이지원
상상력이 풍부한 웹 디자이너이자 안드로이드 앱 마니아인 이지원님은 예술적 감각과 기술적 노하우가 독특하게 조화를 이루고 있습니다. 모바일 기술의 방대한 잠재력을 끊임없이 탐구하고, 최적화된 사용자 중심 경험을 제공하기 위해 최선을 다하고 있습니다. 창의적인 비전과 뛰어난 디자인 역량을 바탕으로 All Things N의 잠재 독자가 공감할 수 있는 매력적인 콘텐츠를 제작합니다.