สร้างแบบฟอร์มตรวจสอบ CAPTCHA โดยใช้ HTML, CSS และ JavaScript
CAPTCHA เป็นส่วนสำคัญของการรักษาความปลอดภัยของเว็บไซต์ ผู้คนทำการทดสอบ CAPTCHA หลายล้านครั้งทางออนไลน์ทุกวัน
ในกรณีที่คุณไม่ได้รวมการดำเนินการตรวจสอบ CAPTCHA บนไซต์ของคุณ มีความเป็นไปได้ที่ชัดเจนที่อาจทำให้คุณเสี่ยงต่อช่องโหว่ที่สำคัญ และทำให้สถานประกอบการของคุณเสี่ยงต่อการโจมตีที่เป็นอันตรายซึ่งกระทำโดยหน่วยงานสแปม
ต่อไปนี้เป็นภาพรวมที่ครอบคลุมของ CAPTCHA รวมถึงข้อมูลเกี่ยวกับการใช้งานโดยใช้ HTML, CSS และ JavaScript ความรู้นี้จะให้รายละเอียดที่จำเป็นทั้งหมดแก่คุณสำหรับการรวมฟังก์ชัน CAPTCHA ไว้ในเว็บแอปพลิเคชันของคุณ
แคปช่าคืออะไร?
CAPTCHA ซึ่งย่อมาจาก “Completely Automated Public Turing Test to Tell Computers and Humans Apart” ได้รับการแนะนำครั้งแรกโดย Luis von Ahn, Manuel Blum, Nicholas J. Hopper และ John Langford เพื่อใช้เป็นเครื่องมือในการแยกแยะระหว่างมนุษย์และคอมพิวเตอร์บนเว็บไซต์ผ่าน รูปแบบการตอบสนองต่อความท้าทาย
กลไก CAPTCHA ช่วยเพิ่มความปลอดภัยของเว็บไซต์โดยนำเสนอความท้าทายที่พิสูจน์แล้วว่าเป็นภาระสำหรับเว็บบอทอัตโนมัติ แต่ยังจัดการได้สำหรับผู้ใช้ที่เป็นมนุษย์ที่มีวิสัยทัศน์ ในทางเปรียบเทียบ ความแตกต่างระหว่างยานพาหนะต่างๆ ที่ปรากฎนั้นอยู่ในความสามารถของมนุษย์ ในขณะเดียวกันก็สร้างอุปสรรคที่น่ากลัวเกินไปสำหรับหุ่นยนต์
แนวคิดของ CAPTCHA เกิดขึ้นจากการทดสอบทัวริง ซึ่งคิดค้นขึ้นเพื่อใช้ตัดสินว่าปัญญาประดิษฐ์สามารถแสดงพฤติกรรมอัจฉริยะที่แยกไม่ออกจากพฤติกรรมของมนุษย์ได้หรือไม่ โดยพื้นฐานแล้ว CAPTCHA ทำหน้าที่เป็น"การทดสอบทัวริงแบบย้อนกลับ"ซึ่งกำหนดให้ผู้ใช้ที่สันนิษฐานว่าเป็นมนุษย์ต้องแสดงความสามารถในการรับรู้ของตน และแยกแยะตนเองจากเอนทิตีอัตโนมัติที่พยายามเข้าถึงโดยไม่ได้รับอนุญาตด้วยวิธีการหลอกลวง
เหตุใดเว็บไซต์ของคุณจึงต้องมีการตรวจสอบความถูกต้องของ CAPTCHA
CAPTCHA มีบทบาทสำคัญในการปกป้องเว็บไซต์จากกิจกรรมที่เป็นอันตราย เช่น การส่งสแปม การส่งเนื้อหาที่เป็นอันตรายผ่านแบบฟอร์ม และความพยายามในการแฮ็กบางประเภทโดยการใช้ชั้นความปลอดภัยเพิ่มเติมที่แยกผู้ใช้ที่เป็นมนุษย์ออกจากบอทอัตโนมัติ
แม้จะเป็นบริษัทที่ก้าวหน้าทางเทคโนโลยี แม้แต่ Google ก็ใช้ CAPTCHA เพื่อปกป้องระบบจากการโจมตีสแปมที่ไม่พึงประสงค์
รหัส HTML CAPTCHA
ซอร์สโค้ดที่ใช้ในการพยายามนี้ได้รับการอัปโหลดไปยังพื้นที่เก็บข้อมูล GitHub ซึ่งให้สิทธิ์ในการใช้งานโดยไม่เสียค่าใช้จ่ายภายใต้เงื่อนไขของใบอนุญาต MIT ผู้ที่สนใจอาจอ่านตัวอย่างการปฏิบัติงานโดยตรวจสอบการสาธิตที่ให้ไว้
ในโครงการนี้ เราจะรวมกลไก CAPTCHA ไว้ในรูปแบบ 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>
รหัสนี้ส่วนใหญ่ประกอบด้วยเจ็ดองค์ประกอบ:
โค้ด HTML ข้างต้นแสดงถึง captcha ซึ่งใช้ในการตรวจสอบว่าผู้ใช้เป็นมนุษย์จริงๆ และไม่ใช่บอทอัตโนมัติ ส่วนประกอบประกอบด้วยแท็กชื่อที่มีรหัส"captchaHeading"ซึ่งทำหน้าที่เป็นส่วนหัวของแบบฟอร์ม captcha
โค้ด HTML ข้างต้นมีแท็ก ![]() ซึ่งใช้เพื่อแสดงรูปภาพภายในหน้าเว็บ นอกจากนี้ ยังมีองค์ประกอบ สององค์ประกอบที่มีรหัส"ด้านบน"และ"ด้านล่าง"และอีกองค์ประกอบ ที่ไม่มีรหัสใดๆ ที่ทำหน้าที่เป็นคอนเทนเนอร์สำหรับข้อความ CAPTCHA ส่วนหลังจะแสดงโดยใช้องค์ประกอบผ้าใบของ ID “captcha”
ข้อมูลโค้ดที่ให้มาดูเหมือนจะเป็นส่วน HTML ที่มีช่องป้อนข้อความแบบธรรมดาซึ่งมีป้ายกำกับว่า"ข้อความ"พร้อมด้วย ID ที่เกี่ยวข้องเป็น"กล่องข้อความ"วัตถุประสงค์ของช่องป้อนข้อมูลนี้ไม่ชัดเจนหากไม่มีบริบทหรือข้อมูลเพิ่มเติมเกี่ยวกับการใช้งานที่ต้องการภายในหน้าเว็บหรือแอปพลิเคชันขนาดใหญ่
องค์ประกอบอินพุตที่มีรหัส"submitButton"คือปุ่มส่งที่เมื่อคลิกแล้วจะประมวลผลข้อมูลแบบฟอร์มและตรวจสอบว่ารหัส CAPTCHA ที่ป้อนตรงกับรหัสที่แสดงบนหน้าหรือไม่ ตลอดจนตรวจสอบการพิมพ์ผิดในการตอบกลับของผู้ใช้.
องค์ประกอบดังกล่าวมีปุ่มที่มี ID เป็น “refreshButton” ซึ่งเป็นประเภท “submit” เมื่อคลิกปุ่มนี้ ระบบจะรีเฟรช CAPTCHA
ข้อมูลโค้ดที่กล่าวมาข้างต้นมีองค์ประกอบช่วง HTML ซึ่งทำหน้าที่เป็นคอนเทนเนอร์ที่ดึงดูดสายตาสำหรับการแสดงเนื้อหา เนื้อหาที่แสดงจะสร้างขึ้นแบบไดนามิกตามการตรวจสอบอินพุตที่ผู้ใช้ให้ไว้ผ่านการนำระบบ CAPTCHA ไปใช้
ส่วนประกอบดังกล่าวทำหน้าที่เป็นเอนทิตีหลักที่รวมองค์ประกอบรองต่างๆ ภายในขอบเขต โดยทำหน้าที่เป็นคอนเทนเนอร์สำหรับส่วนประกอบดังกล่าว
เทมเพลต CAPTCHA HTML ที่กล่าวมาข้างต้นรวมฟังก์ชันการเชื่อมโยงผ่านการใช้องค์ประกอบ และ โดยองค์ประกอบแรกจะอยู่ภายในส่วนและส่วนหลังจะอยู่ในส่วนท้ายของเอกสาร
การนำทางผ่านแท็ก HTML ที่หลากหลายและคุณลักษณะที่เกี่ยวข้องอาจเป็นเรื่องยากสำหรับบางคน โชคดีที่มีแหล่งข้อมูลที่พร้อมใช้งานซึ่งเรียกว่าเอกสารสรุป HTML ซึ่งให้ข้อมูลสรุปโดยย่อขององค์ประกอบ HTML ที่จำเป็น เครื่องมือที่มีประโยชน์นี้ทำหน้าที่เป็นจุดอ้างอิงที่มีค่าสำหรับผู้ที่ต้องการตรวจสอบไวยากรณ์ HTML อย่างรวดเร็ว
การรวมสคริปต์นี้สามารถทำได้โดยการรวมไว้ในการออกแบบเว็บไซต์ ทำให้สามารถรวมเข้ากับแบบฟอร์มที่มีอยู่แล้วที่โฮสต์อยู่ในนั้นได้อย่างราบรื่น
รหัส CSS CAPTCHA
ใช้ CSS หรือ Cascading Style Sheets เพื่อใช้คุณสมบัติโวหารกับองค์ประกอบ HTML อาจใช้โค้ด CSS ที่ตามมาเพื่อทำให้รูปลักษณ์ของแบบฟอร์มการยืนยัน 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;
}
คุณสามารถเพิ่มรูปลักษณ์ของคอนเทนเนอร์ฟอร์มได้โดยใช้คุณสมบัติ box-shadow ของ CSS ซึ่งจะเพิ่มเอฟเฟกต์เงาที่มีสไตล์รอบๆ องค์ประกอบ นอกจากนี้ คุณยังมีความยืดหยุ่นในการปรับเปลี่ยนคุณสมบัติ CSS อื่นๆ ตามความต้องการของคุณ เพื่อปรับแต่งการออกแบบแบบฟอร์มเพิ่มเติม
การตรวจสอบ CAPTCHA โดยใช้ JavaScript
เพื่อที่จะตกแต่งเว็บไซต์ให้มีความสามารถเพิ่มเติม จำเป็นต้องใช้ JavaScript ในการเริ่มต้น ให้ดึงองค์ประกอบที่จำเป็น เช่น ผืนผ้าใบและช่องป้อนข้อความโดยใช้เมธอด 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() เพื่อระบุและแยกองค์ประกอบเฉพาะภายในเอกสารตามตัวระบุเฉพาะที่เรียกว่า"ID"
หากต้องการสร้างความท้าทาย CAPTCHA คุณต้องเลือกลำดับอักขระที่ต้องการ มีหลายวิธีในการบรรลุภารกิจนี้ รวมถึงการจัดเก็บชุดอักขระที่เป็นไปได้ภายในอาร์เรย์เป็นจุดเริ่มต้นสำหรับการเลือก
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'];
ต่อไปนี้คือตัวอย่างวิธีที่คุณสามารถใช้ฟังก์ชันการสร้าง CAPTCHA ใน JavaScript โดยใช้การผสมผสานระหว่าง HTML5 Canvas และ Math.random() method:javascriptfunction GenerateCaptcha() {//Create canvas element สำหรับ captcha imagevar canvas=document.createElement(“canvas ”);canvas.width=200;canvas.height=80;//รับบริบทสำหรับ canvasvar ctx=canvas.getContext(“2d”);//สุ่มตั้งค่าสีสำหรับพื้นหลังและ textvar bgColor=“#” + Math.floor (Math.random() * 16777215).toString(16);var txtColor=“#” + Math.floor(คณิตศาสตร์
เราเริ่มต้นด้วยการสร้างอาร์เรย์ใหม่ซึ่งประกอบด้วยอักขระที่กำหนดเองจาก 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();
โปรดทราบว่าฟังก์ชันเฉพาะนี้จะลบพื้นผิวการวาดและเรียกคืนเอาต์พุตทั้งหมด ซึ่งทั้งสองฟังก์ชันมีบทบาทสำคัญในการฟื้นฟูการแสดงข้อความ CAPTCHA
กระบวนการตรวจสอบอินพุตของผู้ใช้เกี่ยวข้องกับการเปรียบเทียบกับสตริง CAPTCHA ดั้งเดิม เพื่อให้บรรลุเป้าหมายนี้ คุณสามารถสร้างฟังก์ชันเฉพาะที่ทำการเปรียบเทียบและส่งกลับค่าบูลีนเพื่อระบุว่าโค้ดที่ป้อนตรงกับที่คาดไว้หรือไม่ สิ่งนี้จะช่วยให้มั่นใจได้ถึงการตรวจสอบสิทธิ์ที่เหมาะสมก่อนที่จะอนุญาตให้เข้าถึงข้อมูลหรือคุณสมบัติที่ละเอียดอ่อนบนเว็บไซต์ของคุณ
function check_captcha() {
if (userText.value === captchaStr) {
output.className = "correctCaptcha";
output.innerHTML = "Correct!";
} else {
output.className = "incorrectCaptcha";
output.innerHTML = "Incorrect, please try again!";
}
}
ระบุว่าควรดำเนินการโค้ดเมื่อมีการกดปุ่ม “Enter” หรือคลิกปุ่ม “ส่ง” โดยการเพิ่มตัวฟังเหตุการณ์สำหรับเหตุการณ์ “keydown” และ “คลิก” ตามลำดับ ภายในองค์ประกอบที่เหมาะสม เช่น แบบฟอร์ม ช่องหรือปุ่ม พร้อมฟังก์ชันที่เกี่ยวข้องเพื่อจัดการตรรกะในการส่งข้อมูลแบบฟอร์มเพื่ออัปเดตสเปรดชีต
userText.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
check_captcha();
}
});
submitButton.addEventListener('click', check_captcha);
เพื่อแก้ไขปัญหา captcha ที่สร้างขึ้นเพียงครั้งเดียวและไม่สามารถใช้งานได้หลังจากการรีเฟรชหน้าหรือเปลี่ยน url เราต้องใช้กลไกในการรีเฟรช captcha ในแต่ละคำขอ เพื่อให้บรรลุเป้าหมายนี้ เพียงเชื่อมโยงเหตุการณ์"ส่ง"ของปุ่มสร้าง captcha กับการเรียกใช้ฟังก์ชัน Generate\_captcha() ภายในแท็กสคริปต์ที่มีอยู่ สิ่งนี้จะช่วยให้มั่นใจได้ว่า captcha ใหม่จะถูกสร้างขึ้นทุกครั้งที่ส่งแบบฟอร์มหรือเปลี่ยน URL ดังนั้นจึงรักษามาตรการรักษาความปลอดภัยที่จำเป็นในขณะที่ให้ประสบการณ์ผู้ใช้ที่ราบรื่น
refreshButton.addEventListener('click', generate_captcha);
ผลลัพธ์ของโครงการตรวจสอบ CAPTCHA
อันที่จริง เมื่อจำลองแบบฟอร์มตรวจสอบความถูกต้องของ CAPTCHA บนเซิร์ฟเวอร์ของคุณเองหรือสภาพแวดล้อมท้องถิ่นได้สำเร็จ คุณจะสามารถดูผลลัพธ์ที่คาดหวังซึ่งแสดงภายในหน้าเว็บได้ ซึ่งยืนยันว่าฟังก์ชันการทำงานของ captcha ได้รับการบูรณาการอย่างเหมาะสมกับโค้ดเบส สิ่งนี้ทำหน้าที่เป็นข้อบ่งชี้ว่าการดำเนินการได้รับการดำเนินการอย่างถูกต้องและทำงานได้อย่างมีประสิทธิภาพตามวัตถุประสงค์ที่ตั้งใจไว้
