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

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

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

מה זה CAPTCHA?

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

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

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

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

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

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

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

קוד CAPTCHA HTML

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

מאבד Captcha באמצעות HTML, CSS ו- JavaScript



טקסט captcha




לְרַעֲנֵן

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

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

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

תוכל גם לשלב קוד זה בטפסים הקיימים באתר שלך.

קָשׁוּר: גיליון הצ'אט של יסודות HTML: תגים, תכונות ועוד

קוד CSS CAPTCHA

CSS, או גיליונות סגנון מדורגים, משמש לעיצוב אלמנטים של HTML. השתמש בקוד CSS הבא כדי לעצב את רכיבי ה- HTML שלמעלה:

כתובת url @ (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
גוף {
צבע רקע: # 232331;
משפחת גופנים: 'רובוטו', סנס-סריף;
}
#captchaBackground {
גובה: 200 פיקסלים;
רוחב: 250 פיקסלים;
צבע רקע: # 2d3748;
תצוגה: flex;
פריטי יישור: מרכז;
justify-content: center;
כיוון פלקס: עמוד;
}
#captchaHeading {
צבע לבן;
}
#captcha {
שוליים למטה: 1em;
גודל גופן: 30 פיקסלים;
ריווח בין אותיות: 3 פיקסלים;
צבע: # 08e5ff;
}
.center {
תצוגה: flex;
כיוון פלקס: עמוד;
פריטי יישור: מרכז;
}
#submitButton {
שוליים למעלה: 2em;
שוליים תחתונים: 2em;
צבע רקע: # 08e5ff;
גבול: 0px;
מודגש;
}
#refreshButton {
צבע רקע: # 08e5ff;
גבול: 0px;
מודגש;
}
#תיבת טקסט {
גובה: 25 פיקסלים;
}
.incorrectCaptcha {
צבע: # FF0000;
}
.correctCaptcha {
צבע: # 7FFF00;
}

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

קוד CAPTCHA JavaScript

JavaScript משמש להוספת פונקציונליות לדף אינטרנט סטטי אחר. השתמש בקוד הבא כדי להוסיף פונקציונליות מלאה לטופס אימות CAPTCHA:

// document.querySelector () משמש לבחירת אלמנט מהמסמך באמצעות המזהה שלו
let captchaText = document.querySelector ('# captcha');
תן ל- userText = document.querySelector ('# textBox');
let sendButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
let refreshButton = document.querySelector ('# refreshButton');
// alphaNums מכיל את התווים איתם ברצונך ליצור את CAPTCHA
תן ל- 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'];
תן ל- emptyArr = [];
// לולאה זו מייצרת מחרוזת אקראית של 7 תווים באמצעות alphaNums
// בהמשך מחרוזת זו מוצגת כ CAPTCHA
עבור (תן i = 1; אני <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// מקשיב אירוע זה מגורה בכל פעם שהמשתמש לוחץ על כפתור "Enter"
// "נכון!" או הודעת "שגוי, נסה שוב" היא
// מוצג לאחר אימות טקסט הקלט באמצעות CAPTCHA
userText.addEventListener ('keyup', פונקציה (e) {
// ערך קוד המפתח של כפתור "Enter" הוא 13
אם (e.keyCode 13) {
אם (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "נכון!";
} אחר {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "שגוי, נסה שוב";
}
}
});
// מקשיב האירוע הזה מגורה בכל פעם שהמשתמש לוחץ על כפתור "הגש"
// "נכון!" או הודעת "שגוי, נסה שוב" היא
// מוצג לאחר אימות טקסט הקלט באמצעות CAPTCHA
submitButton.addEventListener ('לחץ', פונקציה () {
אם (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "נכון!";
} אחר {
output.classList.add ("incorrectCaptcha");
output.innerHTML = "שגוי, נסה שוב";
}
});
// מגרה למאזין האירוע הזה בכל פעם שהמשתמש לוחץ על כפתור "רענן"
// CAPTCHA אקראי חדש נוצר ומוצג לאחר שהמשתמש לוחץ על כפתור "רענן"
refreshButton.addEventListener ('לחץ', פונקציה () {
userText.value = "";
תן ל- refreshArr = [];
עבור (תן j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

עכשיו יש לך טופס אימות CAPTCHA מלא! אם אתה רוצה להסתכל על הקוד השלם, אתה יכול לשכפל את מאגר GitHub של פרויקט CAPTCHA Validator זה. לאחר שיבוט המאגר, הפעל את קובץ ה- HTML ותקבל את הפלט הבא:

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

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

הפוך את האתר שלך לאבטח באמצעות CAPTCHAs

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

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

כיצד פועלות CAPTCHA ומדוע הן כה קשות?

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

קרא הבא

על הסופר