В этом документе обсуждаются рекомендации по загрузке тега сценария reCAPTCHA. Эта информация применима как к reCAPTCHA v2, так и к v3.
Асинхронная загрузка 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>
В качестве альтернативы сайтам, использующим API версии 2, может оказаться полезным использовать обратный вызов onload ; обратный вызов onload выполняется, когда reCAPTCHA завершает загрузку. Обратный вызов 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 до тех пор, пока не произойдет определенное ограниченное действие (например, отправка формы), обычно не рекомендуется.