Tạo biểu mẫu xác thực CAPTCHA bằng HTML, CSS và JavaScript
CAPTCHA là một phần không thể thiếu trong bảo mật trang web. Mọi người hoàn thành hàng triệu bài kiểm tra CAPTCHA trực tuyến mỗi ngày.
Trong trường hợp bạn chưa kết hợp việc triển khai xác minh CAPTCHA trên trang web của mình thì có một khả năng rõ ràng là nó có thể khiến bạn gặp phải các lỗ hổng nghiêm trọng và khiến cơ sở của bạn dễ bị tấn công độc hại do các thực thể gửi thư rác gây ra.
Dưới đây là tổng quan toàn diện về CAPTCHA, bao gồm thông tin về cách triển khai chúng bằng HTML, CSS và JavaScript. Kiến thức này sẽ cung cấp cho bạn tất cả các chi tiết cần thiết để kết hợp chức năng CAPTCHA trong các ứng dụng web của bạn.
CAPTCHA là gì?
CAPTCHA, viết tắt của “Kiểm tra Turing công khai hoàn toàn tự động để phân biệt máy tính và con người”, được giới thiệu lần đầu tiên bởi Luis von Ahn, Manuel Blum, Nicholas J. Hopper và John Langford như một phương tiện để phân biệt giữa con người và máy tính trên các trang web thông qua một định dạng thách thức-phản ứng.
Cơ chế CAPTCHA nâng cao tính an toàn của trang web bằng cách đưa ra những thách thức gây khó khăn cho các bot web tự động nhưng vẫn có thể quản lý được đối với người dùng thông thái. Một cách minh họa, việc phân biệt giữa một loạt các phương tiện được mô tả nằm trong khả năng của con người đồng thời đặt ra những trở ngại quá lớn đối với các tác nhân robot.
Khái niệm CAPTCHA bắt nguồn từ Bài kiểm tra Turing, được nghĩ ra như một phương tiện để xác định xem liệu trí tuệ nhân tạo có thể thể hiện hành vi thông minh không thể phân biệt được với hành vi của con người hay không. Về bản chất, CAPTCHA đóng vai trò là “Thử nghiệm Turing đảo ngược”, yêu cầu người dùng được coi là con người phải chứng minh khả năng nhận thức của họ và phân biệt bản thân với các thực thể tự động đang cố gắng truy cập trái phép thông qua các phương tiện lừa đảo.
Tại sao trang web của bạn cần xác thực CAPTCHA
CAPTCHA đóng vai trò quan trọng trong việc bảo vệ các trang web khỏi các hoạt động độc hại như gửi thư rác, gửi nội dung có hại thông qua các biểu mẫu và một số loại nỗ lực tấn công bằng cách triển khai một lớp bảo mật bổ sung giúp phân biệt người dùng con người với các bot tự động.
Mặc dù là một công ty có công nghệ tiên tiến nhưng ngay cả Google cũng sử dụng CAPTCHA như một phương tiện bảo vệ hệ thống của mình trước các cuộc tấn công spam không mong muốn.
Mã CAPTCHA HTML
Mã nguồn được sử dụng trong nỗ lực này đã được tải lên kho lưu trữ GitHub, nơi cấp quyền sử dụng miễn phí theo các điều khoản của giấy phép MIT. Những người quan tâm có thể xem qua một ví dụ hoạt động bằng cách kiểm tra phần minh họa được cung cấp.
Trong dự án này, chúng tôi sẽ kết hợp cơ chế CAPTCHA trong biểu mẫu HTML hiện có bằng cách sử dụng đoạn mã được cung cấp như sau:
<!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>
Mã này chủ yếu bao gồm bảy phần tử:
Mã HTML nói trên đại diện cho hình ảnh xác thực, được sử dụng để xác minh rằng người dùng thực sự là con người chứ không phải bot tự động. Thành phần này chứa thẻ tiêu đề có ID “captchaHeading” dùng làm tiêu đề cho biểu mẫu hình ảnh xác thực.
Mã HTML nói trên chứa thẻ ![](), được sử dụng để hiển thị hình ảnh trong trang web. Ngoài ra, có hai phần tử có ID “trên cùng” và “dưới cùng”, cũng như một phần tử khác không có bất kỳ ID nào đóng vai trò là vùng chứa cho văn bản CAPTCHA. Cái sau được hiển thị bằng phần tử canvas của ID “captcha”.
Đoạn mã được cung cấp dường như là một đoạn HTML bao gồm một trường nhập văn bản đơn giản, được gắn nhãn “Văn bản”, với ID liên quan là “hộp văn bản”. Mục đích của trường nhập này không rõ ràng nếu không có ngữ cảnh hoặc thông tin bổ sung về mục đích sử dụng của nó trong trang web hoặc ứng dụng lớn hơn.
Phần tử đầu vào có ID “submitButton” là nút gửi mà khi được nhấp vào sẽ xử lý dữ liệu biểu mẫu và xác minh xem mã CAPTCHA đã nhập có khớp với mã hiển thị trên trang hay không, cũng như kiểm tra mọi lỗi chính tả trong phản hồi của người dùng.
Phần tử nói trên chứa một nút có ID là “refreshButton”, thuộc loại “gửi”. Khi nhấp vào nút này, nó sẽ làm mới CAPTCHA.
Đoạn mã nói trên có phần tử HTML span, đóng vai trò là vùng chứa hấp dẫn trực quan để hiển thị nội dung. Nội dung hiển thị được tạo động dựa trên việc xác thực dữ liệu đầu vào do người dùng cung cấp thông qua việc triển khai hệ thống CAPTCHA.
Thành phần nói trên đóng vai trò là thực thể mẹ bao gồm các thành phần cấp dưới khác nhau trong ranh giới của nó, đóng vai trò là nơi chứa các thành phần nói trên.
Mẫu HTML CAPTCHA nói trên kết hợp chức năng liên kết thông qua việc sử dụng các phần tử và, với phần tử đầu tiên nằm trong phần và phần tử sau được đặt ở phần cuối của tài liệu.
Việc điều hướng qua một loạt các thẻ HTML và các thuộc tính tương ứng của chúng có thể là một thách thức đối với một số cá nhân. May mắn thay, có một nguồn tài nguyên sẵn có được gọi là HTML cheat sheet cung cấp bản tóm tắt ngắn gọn về các thành phần HTML thiết yếu. Công cụ hữu ích này đóng vai trò là điểm tham chiếu có giá trị cho những ai muốn xem xét nhanh cú pháp HTML.
Việc kết hợp tập lệnh này là khả thi bằng cách kết hợp nó trong thiết kế trang web, cho phép tích hợp liền mạch với các biểu mẫu có sẵn được lưu trữ trong đó.
Mã CSS CAPTCHA
Sử dụng CSS hoặc Cascading Style Sheets để áp dụng các thuộc tính kiểu dáng cho các thành phần HTML. Mã CSS tiếp theo có thể được sử dụng để làm đẹp giao diện của biểu mẫu xác minh CAPTCHA:
@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;
}
Bạn có thể cải thiện giao diện của vùng chứa biểu mẫu bằng cách áp dụng thuộc tính CSS box-shadow , để thêm hiệu ứng đổ bóng đầy phong cách xung quanh phần tử. Ngoài ra, bạn có thể linh hoạt sửa đổi các thuộc tính CSS khác theo sở thích của mình để tinh chỉnh thêm thiết kế của biểu mẫu.
Xác thực CAPTCHA bằng JavaScript
Để trang web có thêm các khả năng bổ sung, cần phải sử dụng JavaScript. Để bắt đầu, hãy truy xuất các phần tử cần thiết như canvas và trường nhập văn bản bằng phương thức document.getElementById(). Điều này sẽ cho phép bạn truy cập và thao tác các thành phần này một cách hiệu quả.
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');
Trong trường hợp này, chúng tôi sử dụng document.getElementById() để xác định và tách biệt một thành phần cụ thể trong tài liệu dựa trên mã định danh duy nhất được gọi là “ID” của nó.
Để tạo thử thách CAPTCHA, người ta phải chọn một chuỗi ký tự tùy ý. Có một số phương pháp để hoàn thành nhiệm vụ này, bao gồm việc lưu trữ một tập hợp các ký tự có thể có trong một mảng làm điểm bắt đầu để lựa chọn.
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'];
Sau đây là ví dụ về cách bạn có thể triển khai hàm tạo CAPTCHA trong JavaScript bằng cách sử dụng kết hợp HTML5 Canvas và phương thức Math.random():javascriptfunction generateCaptcha() {//Tạo phần tử canvas cho hình ảnh xác thực captcha canvas=document.createElement(“canvas ”);canvas.width=200;canvas.height=80;//Lấy ngữ cảnh cho canvasvar ctx=canvas.getContext(“2d”);//Đặt màu ngẫu nhiên cho nền và textvar bgColor=“#” + Math.floor (Math.random() * 16777215).toString(16);var txtColor=“#” + Math.floor(Math
Chúng tôi bắt đầu bằng cách xây dựng một mảng hoàn toàn mới bao gồm các ký tự tùy ý từ alphaNums. Chúng tôi sẽ lặp lại quá trình này với số lần xác định trước-trong trường hợp này là bảy lần lặp. Trong mỗi lượt, chúng tôi giới thiệu một ký tự mới được chọn từ alphaNums cho đến mảng đang phát triển. Cuối cùng, chúng tôi sử dụng phương thức fillText() để ghi bộ sưu tập hoàn chỉnh vào khung vẽ của chúng tôi dưới dạng một thực thể duy nhất.
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();
Xin lưu ý rằng chức năng cụ thể này sẽ xóa bề mặt bản vẽ và khôi phục tất cả kết quả đầu ra, cả hai đều đóng vai trò quan trọng trong việc làm trẻ hóa cách hiển thị văn bản CAPTCHA.
Quá trình xác thực thông tin đầu vào của người dùng bao gồm việc so sánh nó với chuỗi CAPTCHA gốc. Để thực hiện điều này, bạn có thể tạo một hàm chuyên dụng để thực hiện so sánh và trả về giá trị boolean cho biết mã đã nhập có khớp với mã dự kiến hay không. Điều này sẽ đảm bảo xác thực thích hợp trước khi cho phép truy cập vào dữ liệu hoặc tính năng nhạy cảm trên trang web của bạn.
function check_captcha() {
if (userText.value === captchaStr) {
output.className = "correctCaptcha";
output.innerHTML = "Correct!";
} else {
output.className = "incorrectCaptcha";
output.innerHTML = "Incorrect, please try again!";
}
}
Cho biết rằng mã phải được thực thi khi nhấn phím “Enter” hoặc nhấp vào nút “Gửi” bằng cách thêm trình xử lý sự kiện cho các sự kiện “keydown” và “click” tương ứng trong các phần tử thích hợp, chẳng hạn như biểu mẫu các trường hoặc nút, có chức năng tương ứng để xử lý logic gửi dữ liệu biểu mẫu để cập nhật bảng tính.
userText.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
check_captcha();
}
});
submitButton.addEventListener('click', check_captcha);
Để giải quyết vấn đề hình ảnh xác thực chỉ được tạo một lần và không khả dụng sau khi làm mới trang hoặc thay đổi url, chúng tôi phải triển khai cơ chế làm mới hình ảnh xác thực theo từng yêu cầu. Để đạt được điều này, chỉ cần liên kết sự kiện “gửi” của nút tạo hình ảnh xác thực với lệnh gọi hàm generate\_captcha() trong thẻ tập lệnh chứa nó. Điều này sẽ đảm bảo rằng hình ảnh xác thực mới được tạo trong mỗi lần gửi biểu mẫu hoặc thay đổi URL, từ đó duy trì các biện pháp bảo mật cần thiết đồng thời mang lại trải nghiệm liền mạch cho người dùng.
refreshButton.addEventListener('click', generate_captcha);
Đầu ra của Dự án Trình xác thực CAPTCHA
Thật vậy, khi sao chép thành công Biểu mẫu xác thực CAPTCHA trên máy chủ hoặc môi trường cục bộ của bạn, bạn sẽ có thể xem kết quả mong đợi được hiển thị trong trang web, xác nhận rằng chức năng hình ảnh xác thực được tích hợp đúng cách với cơ sở mã. Điều này đóng vai trò như một dấu hiệu cho thấy việc triển khai đã được thực hiện đúng và hoạt động hiệu quả theo đúng mục đích đã định.
