Questo documento illustra le best practice per il caricamento del tag script reCAPTCHA. Queste informazioni si applicano sia a reCAPTCHA v2 sia a v3.
Caricamento di reCAPTCHA in modo asincrono
Tutte le versioni di reCAPTCHA possono essere caricate in modo asincrono. Il caricamento asincrono di reCAPTCHA non influisce sulla capacità di identificare il traffico sospetto. Dati i vantaggi in termini di prestazioni degli script asincroni, è generalmente consigliato caricare in modo asincrono reCAPTCHA.
<script async src="https://www.google.com/recaptcha/api.js">
Quando carichi reCAPTCHA in modo asincrono, tieni presente che reCAPTCHA non può essere utilizzato fino al termine del caricamento. Ad esempio, il seguente codice potrebbe causare errori:
<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
condizioni di razza. 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 potrebbero trovare utile utilizzare il callback onload; il callback onload viene eseguito al termine del caricamento di reCAPTCHA. 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 il caricamento di reCAPTCHA non è un'opzione, consigliamo vivamente di includere i suggerimenti per le risorse preconnect in reCAPTCHA. In questo modo, il tempo di download dello script dell'analizzatore sintattico viene ridotto al minimo.
Utilizzo dei suggerimenti sulle risorse
L'inclusione dei seguenti suggerimenti di risorse in <head> del documento riduce il tempo necessario per fornire le risorse utilizzate da reCAPTCHA. Il suggerimento della risorsa preconnect indica al browser di stabilire una connessione in anteprima 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 generale, maggiore è il contesto di reCAPTCHA per una pagina, migliore sarà l'informazione per determinare se le azioni degli utenti sono legittime. Ciò è particolarmente vero quando si utilizzano versioni di reCAPTCHA che non si basano sulle sfide degli utenti. Pertanto, in genere non è consigliabile attendere di caricare reCAPTCHA finché non si verifica una specifica azione limitata (ad esempio l'invio di un modulo).