מסמך זה עוסק בשיטות מומלצות לטעינת תג הסקריפט reCAPTCHA. המידע הזה רלוונטי גם לגרסה 2 של reCAPTCHA וגם לגרסה 3.
הטעינה של reCAPTCHA מתבצעת באופן אסינכרוני
ניתן לטעון באופן אסינכרוני את כל הגרסאות של reCAPTCHA. הטעינה של reCAPTCHA באופן אסינכרוני לא משפיעה על היכולת לזהות תנועה חשודה. בגלל יתרונות הביצועים של סקריפטים אסינכרוניים, מומלץ בדרך כלל לטעון את reCAPTCHA.
<script async src="https://www.google.com/recaptcha/api.js">
כשטוענים את reCAPTCHA באופן אסינכרוני, חשוב לזכור שלא ניתן להשתמש ב-reCAPTCHA עד לסיום הטעינה. לדוגמה, הקוד הבא כנראה לא תקין:
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// If reCAPTCHA is still loading, grecaptcha will be undefined.
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
במקרים מסוימים, מספיק לשנות את סדר הסקריפטים כדי למנוע מצבים של מרוץ. לחלופין, כדי למנוע תנאי מרוץ, יש לכלול את קטע הקוד הבא בדפים שטוענים את reCAPTCHA. אם אתם משתמשים ב-grecaptcha.ready() לגלישת קריאות ל-API, כדאי להוסיף את קטע הקוד הבא כדי להבטיח שאפשר יהיה להפעיל את reCAPTCHA בכל שלב.
<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
// How this code snippet works:
// This logic overwrites the default behavior of `grecaptcha.ready()` to
// ensure that it can be safely called at any time. When `grecaptcha.ready()`
// is called before reCAPTCHA is loaded, the callback function that is passed
// by `grecaptcha.ready()` is enqueued for execution after reCAPTCHA is
// loaded.
if(typeof grecaptcha === 'undefined') {
grecaptcha = {};
}
grecaptcha.ready = function(cb){
if(typeof grecaptcha === 'undefined') {
// window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
// configuration. By default, any functions listed in its 'fns' property
// are automatically executed when reCAPTCHA loads.
const c = '___grecaptcha_cfg';
window[c] = window[c] || {};
(window[c]['fns'] = window[c]['fns']||[]).push(cb);
} else {
cb();
}
}
// Usage
grecaptcha.ready(function(){
grecaptcha.render("container", {
sitekey: "ABC-123"
});
});
</script>
במקום זאת, באתרים שמשתמשים ב-v2 API ייתכן שיהיה מועיל להשתמש בקריאה החוזרת (callback) של onload. הקריאה החוזרת (callback) של onload תבוצע כשה-reCAPTCHA תסתיים. צריך להגדיר את הקריאה החוזרת (callback) של onload לפני טעינת הסקריפט reCAPTCHA.
<script>
const onloadCallback = function() {
console.log("reCAPTCHA has loaded!");
grecaptcha.reset();
};
</script>
<script async src="https://www.google.com/recaptcha/api.js?onload=onloadCallback”></script>
אם אין אפשרות לטעון את reCAPTCHA באופן אסינכרוני, מומלץ מאוד להשתמש בטיפים לגבי משאבי preconnect עבור reCAPTCHA. כך תצמצם את משך הזמן שהורדת הסקריפט חוסמת את המנתח.
שימוש ברמזים למשאבים
הכללת הרמזים הבאים למשאבים ב-<head> של המסמך תפחית את משך הזמן הנדרש לאספקת המשאבים ב-reCAPTCHA. הרמז למשאב preconnect מורה לדפדפן ליצור חיבור מוקדם עם מקור של צד שלישי.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
טעינה מדורגת
באופן כללי, ככל של-reCAPTCHA יש יותר הקשר לגבי דף, כך גוברת היכולת לקבוע אם פעולות המשתמש הן לגיטימיות. זה נכון במיוחד כאשר משתמשים בגרסאות של reCAPTCHA שאינן מסתמכות על אתגרים של משתמשים. לכן לא כדאי להמתין לטעינת reCAPTCHA עד שמתבצעת פעולה מוגבלת ספציפית (לדוגמה, שליחת טופס).