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