Questo documento illustra le best practice per il caricamento del tag script reCAPTCHA. Queste informazioni sono applicabili sia a reCAPTCHA v2 che a v3.
Caricamento di reCAPTCHA in modo asincrono
Tutte le versioni di reCAPTCHA possono essere caricate in modo asincrono. Il caricamento di reCAPTCHA in modo asincrono non influisce sulla sua capacità di identificare il traffico sospetto. A causa degli vantaggi in termini di prestazioni degli script asincroni, in genere è consigliabile caricare reCAPTCHA in modo asincrono.
<script async src="https://www.google.com/recaptcha/api.js">
Quando carichi reCAPTCHA in modo asincrono, tieni presente che non è possibile utilizzata fino al termine del caricamento. Ad esempio, il seguente codice potrebbe interrompersi:
<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>
In alcune situazioni, la modifica dell'ordine degli script può essere sufficiente per evitare
le condizioni di traffico. In alternativa, puoi impedire le condizioni di gara includendo il seguente snippet di codice nelle pagine che caricano reCAPTCHA. Se utilizzi
grecaptcha.ready() per eseguire il wrapping delle chiamate API, aggiungi il seguente snippet di codice per assicurarti
che reCAPTCHA possa essere chiamato in qualsiasi momento.
<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>
In alternativa, i siti che utilizzano l'API v2 possono trovare utile utilizzare
il callback onload; il callback onload viene eseguito al termine di reCAPTCHA
Caricamento in corso. Il callback onload deve essere definito prima di caricare lo script 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>
Se non è possibile caricare reCAPTCHA in modo asincrono, è possibile includere preconnect
sono vivamente consigliati i suggerimenti delle risorse per reCAPTCHA. Questo ridurrà al minimo
durante il quale il download dello script blocca l'analizzatore sintattico.
Utilizzo dei suggerimenti delle risorse
Se includi i seguenti suggerimenti di risorse nella sezione <head> del documento,
ridurre il tempo necessario per distribuire le risorse utilizzate
reCAPTCHA. Il hint della risorsa preconnect indica al browser di stabilire un
connessione precoce con
un'origine di terze parti.
<link rel="preconnect" href="https://www.google.com">
<link rel="preconnect" href="https://www.gstatic.com" crossorigin>
Caricamento lento
In linea di massima, maggiore è il contesto di reCAPTCHA di una pagina, meglio è per stabilire se le azioni degli utenti sono legittime. Questo è particolarmente vero quando si utilizzano versioni di reCAPTCHA che non si basano su verifiche degli utenti. Pertanto, in genere non è consigliabile attendere di caricare reCAPTCHA fino a quando non si verifica un'azione limitata specifica (ad esempio l'invio di un modulo).