כיום CAPTCHA הם חלק בלתי נפרד מאבטחת האתר. מיליוני מבחני CAPTCHA מסתיימים באופן מקוון מדי יום.

אם לא יישמת אימות CAPTCHA באתר שלך, זה עלול ליצור לך בעיה גדולה ולהגדיר אותך כמטרה לדואר זבל.

---

---

להלן כל מה שאתה צריך לדעת על CAPTCHA וכיצד תוכל ליישם אותם בקלות באתר שלך באמצעות HTML, CSS ו- JavaScript.

מהו CAPTCHA?

CAPTCHA מייצג את 'מבחן טיורינג אוטומטי באופן אוטומטי לחלוטין כדי להבחין במחשבים ובני אדם בנפרד.' מונח זה נטבע בשנת 2003 על ידי לואיס פון אהן, מנואל בלום, ניקולס ג'יי הופר וג'ון לנגפורד. זהו סוג של בדיקת אתגר-תגובה המשמשת לקביעת האם המשתמש הוא אנושי או לא.

CAPTCHA מוסיפים אבטחה לאתרים על ידי מתן אתגרים שקשה לבוטים לבצע אך קלים יחסית לבני אדם. לדוגמה, זיהוי כל התמונות של מכונית מתוך קבוצת תמונות מרובות קשה לבוטים אך פשוט מספיק לעיניים אנושיות.

הרעיון של CAPTCHA מקורו במבחן טיורינג. מבחן טיורינג הוא שיטה לבדוק האם מכונה יכולה לחשוב כמו בן אדם או לא. מעניין שאפשר לקרוא לבדיקת CAPTCHA 'מבחן טיורינג הפוך' שכן במקרה זה המחשב יוצר את הבדיקה המאתגרת בני אדם.

מדוע האתר שלך זקוק לאימות CAPTCHA?

CAPTCHA משמשים בעיקר כדי למנוע מבוטים לשלוח באופן אוטומטי טפסים עם דואר זבל ותוכן מזיק אחר. אפילו חברות כמו גוגל משתמשות בה כדי למנוע מהמערכת שלהן התקפות דואר זבל. להלן כמה מהסיבות מדוע האתר שלך נהנה מאימות CAPTCHA:

---

---

• CAPTCHA מסייעים במניעת האקרים ובוטים לדואר זבל של מערכות הרישום על ידי יצירת חשבונות מזויפים. אם הם אינם מונעים, הם יכולים להשתמש בחשבונות אלה למטרות זוועות.
• CAPTCHAs יכולים לאסור התקפות כניסה נוקבות מהאתר שלך, בהן משתמשים האקרים כדי לנסות להיכנס באמצעות אלפי סיסמאות.
• CAPTCHAs יכולים להגביל את הרובוט מהזבל של סעיף הביקורת על ידי מתן הערות שווא.
• CAPTCHA מסייעים במניעת אינפלציה בכרטיסים מכיוון שאנשים מסוימים רוכשים מספר רב של כרטיסים למכירה חוזרת. CAPTCHA יכולה אפילו למנוע רישומים כוזבים לאירועים בחינם.
• CAPTCHAs יכולים להגביל את נוכלות הסייבר מבלוג דואר זבל עם הערות מפוקפקות וקישורים לאתרים מזיקים.

ישנן סיבות רבות נוספות התומכות בשילוב אימות CAPTCHA באתר שלך. תוכל לעשות זאת באמצעות הקוד הבא.

כיצד לחבר אוזניות בלוטות 'ל- xbox

קוד HTML CAPTCHA

HTML, או שפת הסימון HyperText, מתאר את מבנה דף האינטרנט. השתמש בקוד HTML הבא לבניית טופס האימות של CAPTCHA:

---

---










captcha text



Refresh








קוד זה מורכב בעיקר משבעה אלמנטים:

• : רכיב זה משמש להצגת הכותרת של טופס CAPTCHA.

• : אלמנט זה משמש להצגת הטקסט CAPTCHA.
• - רכיב זה משמש ליצירת תיבת קלט להקלדת ה- CAPTCHA.
• : כפתור זה שולח את הטופס ובדוק אם ה- CAPTCHA והטקסט המוקלד זהים או לא.
• : כפתור זה משמש לרענון ה- CAPTCHA.
• : אלמנט זה משמש להצגת הפלט בהתאם לטקסט שהוזן.
• : זהו רכיב האב המכיל את כל האלמנטים האחרים.

קבצי CSS ו- JavaScript מקושרים לדף HTML זה באמצעות ו אלמנטים בהתאמה. עליך להוסיף את קישור תג בתוך רֹאשׁ תג ו תַסרִיט תג בסוף ה- גוּף .

תוכל גם לשלב קוד זה עם צורות קיימות של אתר האינטרנט שלך.

קָשׁוּר: גיליון הרמאות של HTML Essentials: תגים, תכונות ועוד

קוד CSS CAPTCHA

CSS, או גיליונות סגנון מדורגים, משמש לעיצוב אלמנטים של 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 box-shadow .

קוד CAPTCHA של JavaScript

JavaScript משמש להוספת פונקציונליות לדף אינטרנט סטטי אחרת. השתמש בקוד הבא כדי להוסיף פונקציונליות מלאה לטופס האימות של 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 תפקודי לחלוטין! אם אתה רוצה להסתכל על הקוד המלא, תוכל לשכפל את מאגר GitHub של פרויקט CAPTCHA-Validator הזה . לאחר שיבוט המאגר, בצע את קובץ ה- HTML ותקבל את הפלט הבא:

כיצד לשחזר את חשבון הפייסבוק שלך

בעת הזנת קוד CAPTCHA הנכון בתיבת הקלט, הפלט הבא יוצג:

כאשר אתה מזין קוד CAPTCHA שגוי בתיבת הקלט, הפלט הבא יוצג:

הפוך את האתר שלך לאבטח בעזרת CAPTCHA

בעבר, ארגונים ועסקים רבים ספגו הפסדים כבדים כמו הפרות נתונים, התקפות דואר זבל וכו 'כתוצאה מכך שלא היו להם טפסי CAPTCHA באתרי האינטרנט שלהם. מומלץ מאוד להוסיף CAPTCHA לאתר שלך, מכיוון שהוא מוסיף שכבת אבטחה למניעת פושעי רשת מאתר האינטרנט.

גוגל השיקה גם שירות חינם בשם 'reCAPTCHA' המסייע בהגנה על אתרים מפני דואר זבל והתעללות. CAPTCHA ו- reCAPTCHA נראים דומים, אבל הם לא בדיוק אותו הדבר. לפעמים CAPTCHA מרגישים מתסכלים וקשים להבנה עבור משתמשים רבים. אם כי, יש סיבה חשובה מדוע הם נעשים קשים.

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד פועלים CAPTCHA ולמה הם כל כך קשים?

CAPTCHA ו- reCAPTCHA מונעים דואר זבל. איך הם עובדים? ולמה נראה לך שקשה לפתור את ה- CAPTCHA?

קרא הבא נושאים קשורים

• תִכנוּת
• HTML
• JavaScript
• CSS

על הסופר יובראג 'צ'נדרה(פורסמו 60 מאמרים)

יובראג 'הוא סטודנט לתואר ראשון במדעי המחשב באוניברסיטת דלהי, הודו. הוא נלהב מ- Full Stack Web Development. כשהוא לא כותב, הוא בוחן את עומק הטכנולוגיות השונות.

עוד מאת Yuvraj Chandra

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה