このドキュメントでは、reCAPTCHA スクリプトタグを読み込むためのベスト プラクティスについて説明します。 この情報は、reCAPTCHA v2 と v3 の両方に適用されます。
reCAPTCHA の非同期読み込み
reCAPTCHA のすべてのバージョンは、非同期で読み込むことができます。reCAPTCHA を非同期で読み込んでも、不審なトラフィックを特定する機能には影響しません。期限 非同期スクリプトのパフォーマンス上のメリットを活かし、reCAPTCHA の読み込み、 おすすめします。
<script async src="https://www.google.com/recaptcha/api.js">
reCAPTCHA を非同期で読み込む場合は、reCAPTCHA を 読み込みが完了するまで使用しないでください。たとえば、次のコードは break:
<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>
状況によっては、スクリプトの順序を調整するだけで競合を回避できる場合があります。
あります。または、Terraform で参照する変数の値を
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 コールバック。reCAPTCHA が終了すると onload コールバックが実行される
読み込み中。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 の読み込みを待機する 行う（フォームの送信など）は、一般的には推奨されません。