Mengintegrasikan reCAPTCHA untuk WAF dengan Cloudflare

action-token

Anda harus menjalankan reCAPTCHA di halaman web untuk membuat token tindakan. Setelah reCAPTCHA membuat token tindakan, Anda melampirkan token tindakan ke header permintaan yang telah ditentukan sebelumnya di mana pun Anda perlu melindungi tindakan pengguna, seperti checkout. Secara default, token tindakan berlaku selama 30 menit, tetapi dapat bervariasi bergantung pada traffic. Anda harus melampirkan token tindakan ke header permintaan yang telah ditentukan sebelumnya sebelum token berakhir, sehingga Cloudflare dapat mengevaluasi atribut token.

Untuk menerapkan token tindakan reCAPTCHA, lakukan hal berikut:

1. Buat kunci token tindakan untuk situs Anda.

   gcloud

   Untuk membuat kunci reCAPTCHA, gunakan perintah gcloud recaptcha keys create.

   Sebelum menggunakan salah satu data perintah di bawah, lakukan penggantian berikut:

   • DISPLAY_NAME: Nama untuk kunci. Biasanya nama situs.
   • INTEGRATION_TYPE: Jenis integrasi. Tentukan score atau checkbox.
   • DOMAIN_NAME: Domain atau subdomain situs yang diizinkan menggunakan kunci.

     Tentukan beberapa domain sebagai daftar yang dipisahkan koma. Opsional: Tentukan --allow-all-domains untuk menonaktifkan verifikasi domain.

     Menonaktifkan verifikasi domain merupakan risiko keamanan karena tidak ada batasan pada situs, sehingga kunci reCAPTCHA Anda dapat diakses dan digunakan oleh siapa saja.

   • WAF_FEATURE: Nama fitur WAF. Tentukan action-token.
   • WAF_SERVICE: Nama penyedia layanan WAF. Tentukan cloudflare untuk cloudflare.

   Jalankan perintah gcloud recaptcha keys create:

   Linux, macOS, atau Cloud Shell

   gcloud recaptcha keys create \
   --web \
   --display-name=DISPLAY_NAME  \
   --integration-type=INTEGRATION_TYPE \
   --domains=DOMAIN_NAME \
   --waf-feature=WAF_FEATURE \
   --waf-service=WAF_SERVICE

   Windows (PowerShell)

   gcloud recaptcha keys create `
   --web `
   --display-name=DISPLAY_NAME  `
   --integration-type=INTEGRATION_TYPE `
   --domains=DOMAIN_NAME `
   --waf-feature=WAF_FEATURE `
   --waf-service=WAF_SERVICE

   Windows (cmd.exe)

   gcloud recaptcha keys create ^
   --web ^
   --display-name=DISPLAY_NAME  ^
   --integration-type=INTEGRATION_TYPE ^
   --domains=DOMAIN_NAME ^
   --waf-feature=WAF_FEATURE ^
   --waf-service=WAF_SERVICE

   Respons berisi kunci reCAPTCHA yang baru dibuat.

   REST

   Untuk mengetahui informasi referensi API tentang jenis kunci dan jenis integrasi, lihat Kunci dan Jenis integrasi.

   Sebelum menggunakan salah satu data permintaan, lakukan penggantian berikut:

   • DISPLAY_NAME: Nama untuk kunci. Biasanya nama situs.
   • INTEGRATION_TYPE: Jenis integrasi. Tentukan score atau checkbox.
   • DOMAIN_NAME: Domain atau subdomain situs yang diizinkan menggunakan kunci.

     Tentukan beberapa domain sebagai daftar yang dipisahkan koma. Opsional: Tentukan --allow-all-domains untuk menonaktifkan verifikasi domain.

     Menonaktifkan verifikasi domain merupakan risiko keamanan karena tidak ada batasan pada situs, sehingga kunci reCAPTCHA Anda dapat diakses dan digunakan oleh siapa saja.

   • WAF_FEATURE: Nama fitur WAF. Tentukan action-token.
   • WAF_SERVICE: Nama penyedia layanan WAF. Tentukan cloudflare untuk cloudflare.

   Metode HTTP dan URL:

   POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

   Isi JSON permintaan:

   
   {
     "displayName": "DISPLAY_NAME",
      'wafSettings': "  {
          "wafService": "WAF_SERVICE",
     
   "wafFeature": "WAF_FEATURE"
     }
     "webSettings": {
       "allowedDomains": "DOMAINS",
       "integrationType": "TYPE_OF_INTEGRATION"
      }
      
   }
   

   Untuk mengirim permintaan Anda, pilih salah satu opsi berikut:

   curl

   Simpan isi permintaan dalam file bernama request.json, dan jalankan perintah berikut:

   curl -X POST \
        -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json; charset=utf-8" \
        -d @request.json \
        "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

   PowerShell

   Simpan isi permintaan dalam file bernama request.json, dan jalankan perintah berikut:

   $cred = gcloud auth print-access-token
   $headers = @{ "Authorization" = "Bearer $cred" }
   
   Invoke-WebRequest `
       -Method POST `
       -Headers $headers `
       -ContentType: "application/json; charset=utf-8" `
       -InFile request.json `
       -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

   Anda akan melihat respons JSON seperti berikut:

   
   {
     "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
   "displayName": "DISPLAY_NAME,
   
   "webSettings": {
     "allowAllDomains": true,
     "allowedDomains": [
       "localhost"
     ],
   
    "integrationType": "SCORE",
   
   
   },
   "wafSettings": {
     "wafService": "cloudflare",
   
     "wafFeature": "ACTION_TOKEN"
     
   
   }
   }
   
   

   Catat kunci token tindakan Anda untuk digunakan nanti.

2. Integrasikan JavaScript reCAPTCHA di halaman web Anda dengan kunci token tindakan yang Anda buat. Untuk mengetahui petunjuknya, lihat dokumen yang sesuai dengan jenis integrasi kunci token tindakan Anda.
   • Untuk jenis integrasi SCORE, lihat Mengintegrasikan kunci berbasis skor dengan frontend.
   • Untuk jenis integrasi CHECKBOX, lihat Merender widget reCAPTCHA di frontend.
3. Setelah Anda menerima token dari reCAPTCHA, lampirkan token ke header permintaan yang telah ditentukan sebelumnya dalam format berikut:

    X-Recaptcha-Token: value-of-your-action-token
   

   Anda dapat menggunakan bahasa seperti XHR, Ajax, atau Fetch API untuk melampirkan token ke header permintaan yang telah ditentukan sebelumnya.

   Contoh skrip berikut menunjukkan cara melindungi tindakan execute dan melampirkan token ke header permintaan yang telah ditentukan menggunakan JavaScript + XHR:

     
     <script>
       src="https://www.google.com/recaptcha/enterprise.js?render=ACTION_TOKEN_KEY"></script>
   
       <script>
       function onSuccess(action_token) {
            const xhr = new XMLHttpRequest();
            xhr.open('GET','YOUR_URL', false);
            // Attach the action-token to the predefined request header
            xhr.setRequestHeader("X-Recaptcha-Token", action_token);
            xhr.send(null);
          }
          function onError(reason) {
            alert('Response promise rejected: ' + reason);
          grecaptcha.enterprise.ready(function () {
            document.getElementById("execute-button").onclick = () => {
              grecaptcha.enterprise.execute('ACTION_TOKEN_KEY', {
              }).then(onSuccess, onError);
            };
          });
         }
       </script>
     
     

session-token

JavaScript reCAPTCHA menetapkan token sesi reCAPTCHA sebagai cookie di browser pengguna akhir setelah penilaian. Browser pengguna akhir melampirkan cookie dan memperbarui cookie selama JavaScript reCAPTCHA tetap aktif.

Untuk memberikan token sesi sebagai cookie, instal kunci token sesi di setidaknya salah satu halaman web Anda yang dijelajahi pengguna akhir sebelum halaman yang perlu dilindungi. Misalnya, jika Anda ingin melindungi halaman checkout, instal kunci token sesi di halaman beranda atau halaman produk.

Anda dapat menyertakan JavaScript reCAPTCHA di halaman web Anda dengan mengonfigurasi file wrangler.toml saat menginstal paket reCAPTCHA untuk Cloudflare atau menginstal session-key di halaman web Anda. Menyertakan JavaScript reCAPTCHA dari Cloudflare mengintegrasikan reCAPTCHA menggunakan kunci session-token tanpa perlu menginstal kunci secara manual di halaman web Anda.

Anda dapat menggunakan cookie ini untuk melindungi permintaan dan pemuatan halaman berikutnya pengguna akhir di domain tertentu. Token sesi berlaku selama 30 menit secara default. Namun, jika pengguna akhir tetap berada di halaman tempat Anda menerapkan session-token, reCAPTCHA akan memuat ulang session-token secara berkala untuk mencegahnya berakhir.

Instal token sesi di setiap halaman yang perlu dilindungi oleh reCAPTCHA. Sebaiknya lindungi setiap halaman dengan reCAPTCHA dan gunakan aturan Google Cloud Armor untuk menerapkan akses di semua halaman, kecuali halaman pertama yang dijelajahi pengguna akhir.

   recaptcha-ca-t=value-of-your-session-token;domain=domain;expires=expiration_time

Untuk menerapkan token sesi reCAPTCHA, lakukan hal berikut:

1. Buat kunci token sesi untuk situs Anda.

   gcloud

   Untuk membuat kunci reCAPTCHA, gunakan perintah gcloud recaptcha keys create.

   Sebelum menggunakan salah satu data perintah di bawah, lakukan penggantian berikut:

   • DISPLAY_NAME: Nama untuk kunci. Biasanya nama situs.
   • INTEGRATION_TYPE: Jenis integrasi. Tentukan score.
   • DOMAIN_NAME: Domain atau subdomain situs yang diizinkan menggunakan kunci.

     Tentukan beberapa domain sebagai daftar yang dipisahkan koma. Opsional: Tentukan --allow-all-domains untuk menonaktifkan verifikasi domain.

     Menonaktifkan verifikasi domain merupakan risiko keamanan karena tidak ada batasan pada situs, sehingga kunci reCAPTCHA Anda dapat diakses dan digunakan oleh siapa saja.

   • WAF_FEATURE: Nama fitur WAF. Tentukan session-token.
   • WAF_SERVICE: Nama penyedia layanan WAF. Tentukan cloudflare untuk cloudflare.

   Jalankan perintah gcloud recaptcha keys create:

   Linux, macOS, atau Cloud Shell

   gcloud recaptcha keys create \
   --web \
   --display-name=DISPLAY_NAME  \
   --integration-type=INTEGRATION_TYPE \
   --domains=DOMAIN_NAME \
   --waf-feature=WAF_FEATURE \
   --waf-service=WAF_SERVICE

   Windows (PowerShell)

   gcloud recaptcha keys create `
   --web `
   --display-name=DISPLAY_NAME  `
   --integration-type=INTEGRATION_TYPE `
   --domains=DOMAIN_NAME `
   --waf-feature=WAF_FEATURE `
   --waf-service=WAF_SERVICE

   Windows (cmd.exe)

   gcloud recaptcha keys create ^
   --web ^
   --display-name=DISPLAY_NAME  ^
   --integration-type=INTEGRATION_TYPE ^
   --domains=DOMAIN_NAME ^
   --waf-feature=WAF_FEATURE ^
   --waf-service=WAF_SERVICE

   Respons berisi kunci reCAPTCHA yang baru dibuat.

   REST

   Untuk mengetahui informasi referensi API tentang jenis kunci dan jenis integrasi, lihat Kunci dan Jenis integrasi.

   Sebelum menggunakan salah satu data permintaan, lakukan penggantian berikut:

   • DISPLAY_NAME: Nama untuk kunci. Biasanya nama situs.
   • INTEGRATION_TYPE: Jenis integrasi. Tentukan score.
   • DOMAIN_NAME: Domain atau subdomain situs yang diizinkan menggunakan kunci.

     Tentukan beberapa domain sebagai daftar yang dipisahkan koma. Opsional: Tentukan --allow-all-domains untuk menonaktifkan verifikasi domain.

     Menonaktifkan verifikasi domain merupakan risiko keamanan karena tidak ada batasan pada situs, sehingga kunci reCAPTCHA Anda dapat diakses dan digunakan oleh siapa saja.

   • WAF_FEATURE: Nama fitur WAF. Tentukan session-token.
   • WAF_SERVICE: Nama penyedia layanan WAF. Tentukan cloudflare untuk cloudflare.

   Metode HTTP dan URL:

   POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

   Isi JSON permintaan:

   
   {
     "displayName": "DISPLAY_NAME",
      'wafSettings': "  {
          "wafService": "WAF_SERVICE",
     
   "wafFeature": "WAF_FEATURE"
     }
     "webSettings": {
       "allowedDomains": "DOMAINS",
       "integrationType": "TYPE_OF_INTEGRATION"
      }
      
   }
   

   Untuk mengirim permintaan Anda, pilih salah satu opsi berikut:

   curl

   Simpan isi permintaan dalam file bernama request.json, dan jalankan perintah berikut:

   curl -X POST \
        -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json; charset=utf-8" \
        -d @request.json \
        "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

   PowerShell

   Simpan isi permintaan dalam file bernama request.json, dan jalankan perintah berikut:

   $cred = gcloud auth print-access-token
   $headers = @{ "Authorization" = "Bearer $cred" }
   
   Invoke-WebRequest `
       -Method POST `
       -Headers $headers `
       -ContentType: "application/json; charset=utf-8" `
       -InFile request.json `
       -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

   Anda akan melihat respons JSON seperti berikut:

   
   {
     "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
   "displayName": "DISPLAY_NAME,
   
   "webSettings": {
     "allowAllDomains": true,
     "allowedDomains": [
       "localhost"
     ],
   
    "integrationType": "SCORE",
   
   
   },
   "wafSettings": {
     "wafService": "cloudflare",
   
     "wafFeature": "SESSION_TOKEN"
   
   
   }
   }
   
   

   Catat kunci session-token Anda untuk digunakan nanti.

   Jika Anda ingin menyuntikkan JavaScript reCAPTCHA dari Cloudflare, lewati langkah berikutnya dan konfigurasi wranger.toml.

2. Tambahkan kunci session-token dan waf=session ke JavaScript reCAPTCHA.

   Skrip contoh berikut menunjukkan cara menerapkan token sesi di halaman web:

   <!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <title>reCAPTCHA WAF Session Token</title>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=SESSION_TOKEN_KEY&waf=session" async defer></script>
    <body></body>
   </head>
   </html>

challenge-page

Saat Anda menerapkan halaman tantangan reCAPTCHA, reCAPTCHA akan mengalihkan ke halaman antara yang menentukan apakah perlu menampilkan tantangan CAPTCHA kepada pengguna. Oleh karena itu, verifikasi CAPTCHA mungkin tidak terlihat oleh semua pengguna.

Untuk menerapkan halaman tantangan reCAPTCHA, lakukan hal berikut:

1. Buat kunci halaman tantangan untuk situs Anda.

   gcloud

   Untuk membuat kunci reCAPTCHA, gunakan perintah gcloud recaptcha keys create.

   Sebelum menggunakan salah satu data perintah di bawah, lakukan penggantian berikut:

   • DISPLAY_NAME: Nama untuk kunci. Biasanya nama situs.
   • INTEGRATION_TYPE: Jenis integrasi. Tentukan invisible.
   • DOMAIN_NAME: Domain atau subdomain situs yang diizinkan menggunakan kunci. Tentukan --allow-all-domains.
   • WAF_FEATURE: Nama fitur WAF. Tentukan challenge-page.
   • WAF_SERVICE: Nama penyedia layanan WAF. Tentukan cloudflare untuk cloudflare.

   Jalankan perintah gcloud recaptcha keys create:

   Linux, macOS, atau Cloud Shell

   gcloud recaptcha keys create \
   --web \
   --display-name=DISPLAY_NAME  \
   --integration-type=INTEGRATION_TYPE \
   --domains=DOMAIN_NAME \
   --waf-feature=WAF_FEATURE \
   --waf-service=WAF_SERVICE

   Windows (PowerShell)

   gcloud recaptcha keys create `
   --web `
   --display-name=DISPLAY_NAME  `
   --integration-type=INTEGRATION_TYPE `
   --domains=DOMAIN_NAME `
   --waf-feature=WAF_FEATURE `
   --waf-service=WAF_SERVICE

   Windows (cmd.exe)

   gcloud recaptcha keys create ^
   --web ^
   --display-name=DISPLAY_NAME  ^
   --integration-type=INTEGRATION_TYPE ^
   --domains=DOMAIN_NAME ^
   --waf-feature=WAF_FEATURE ^
   --waf-service=WAF_SERVICE

   Respons berisi kunci reCAPTCHA yang baru dibuat.

   REST

   Untuk mengetahui informasi referensi API tentang jenis kunci dan jenis integrasi, lihat Kunci dan Jenis integrasi.

   Sebelum menggunakan salah satu data permintaan, lakukan penggantian berikut:

   • DISPLAY_NAME: Nama untuk kunci. Biasanya nama situs.
   • INTEGRATION_TYPE: Jenis integrasi. Tentukan invisible.
   • DOMAIN_NAME: Domain atau subdomain situs yang diizinkan menggunakan kunci. Tentukan --allow-all-domains.
   • WAF_FEATURE: Nama fitur WAF. Tentukan challenge-page.
   • WAF_SERVICE: Nama penyedia layanan WAF. Tentukan cloudflare untuk cloudflare.

   Metode HTTP dan URL:

   POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

   Isi JSON permintaan:

   
   {
     "displayName": "DISPLAY_NAME",
      'wafSettings': "  {
          "wafService": "WAF_SERVICE",
     
   "wafFeature": "WAF_FEATURE"
     }
     "webSettings": {
       "allowedDomains": "DOMAINS",
       "integrationType": "TYPE_OF_INTEGRATION"
      }
      
   }
   

   Untuk mengirim permintaan Anda, pilih salah satu opsi berikut:

   curl

   Simpan isi permintaan dalam file bernama request.json, dan jalankan perintah berikut:

   curl -X POST \
        -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json; charset=utf-8" \
        -d @request.json \
        "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

   PowerShell

   Simpan isi permintaan dalam file bernama request.json, dan jalankan perintah berikut:

   $cred = gcloud auth print-access-token
   $headers = @{ "Authorization" = "Bearer $cred" }
   
   Invoke-WebRequest `
       -Method POST `
       -Headers $headers `
       -ContentType: "application/json; charset=utf-8" `
       -InFile request.json `
       -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

   Anda akan melihat respons JSON seperti berikut:

   
   {
     "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
   "displayName": "DISPLAY_NAME,
   
   "webSettings": {
     "allowAllDomains": true,
     "allowedDomains": [
       "localhost"
     ],
   
     "integrationType": "INVISIBLE",
    
   
   },
   "wafSettings": {
     "wafService": "cloudflare",
   
     "wafFeature": "CHALLENGE_PAGE"
     
   
   }
   }
   
   

   Catat kunci halaman tantangan Anda untuk digunakan nanti.

2. Untuk mengalihkan pengguna ke halaman tantangan reCAPTCHA dan menerima token reCAPTCHA, buat kebijakan firewall dengan tindakan redirect di halaman yang dilindungi.

express

Untuk menerapkan reCAPTCHA ekspres, buat kunci ekspres.

1. In the Google Cloud console, activate Cloud Shell.

   Activate Cloud Shell

   At the bottom of the Google Cloud console, a Cloud Shell session starts and displays a command-line prompt. Cloud Shell is a shell environment with the Google Cloud CLI already installed and with values already set for your current project. It can take a few seconds for the session to initialize.

2. gcloud

   Untuk membuat kunci reCAPTCHA, gunakan perintah gcloud recaptcha keys create.

   Sebelum menggunakan salah satu data perintah di bawah, lakukan penggantian berikut:

   • DISPLAY_NAME: Nama untuk kunci. Biasanya nama situs.
   • WAF_SERVICE: Nama penyedia layanan WAF. Tentukan cloudflare untuk cloudflare.

   Jalankan perintah gcloud recaptcha keys create:

   Linux, macOS, atau Cloud Shell

   gcloud recaptcha keys create \
   --express \
   --display-name=DISPLAY_NAME  \
   --waf-service=WAF_SERVICE

   Windows (PowerShell)

   gcloud recaptcha keys create `
   --express `
   --display-name=DISPLAY_NAME  `
   --waf-service=WAF_SERVICE

   Windows (cmd.exe)

   gcloud recaptcha keys create ^
   --express ^
   --display-name=DISPLAY_NAME  ^
   --waf-service=WAF_SERVICE

   Respons berisi kunci reCAPTCHA yang baru dibuat.

   REST

   Untuk mengetahui informasi referensi API tentang jenis kunci dan jenis integrasi, lihat Kunci dan Jenis integrasi.

   Sebelum menggunakan salah satu data permintaan, lakukan penggantian berikut:

   • DISPLAY_NAME: Nama untuk kunci. Biasanya nama situs.
   • WAF_SERVICE: Nama penyedia layanan WAF. Tentukan cloudflare untuk cloudflare.

   Metode HTTP dan URL:

   POST https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys

   Isi JSON permintaan:

   
   {
     "displayName": "DISPLAY_NAME",
      'wafSettings': "  {
          "wafService": "WAF_SERVICE",
     
   }
   

   Untuk mengirim permintaan Anda, pilih salah satu opsi berikut:

   curl

   Simpan isi permintaan dalam file bernama request.json, dan jalankan perintah berikut:

   curl -X POST \
        -H "Authorization: Bearer $(gcloud auth print-access-token)" \
        -H "Content-Type: application/json; charset=utf-8" \
        -d @request.json \
        "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys"

   PowerShell

   Simpan isi permintaan dalam file bernama request.json, dan jalankan perintah berikut:

   $cred = gcloud auth print-access-token
   $headers = @{ "Authorization" = "Bearer $cred" }
   
   Invoke-WebRequest `
       -Method POST `
       -Headers $headers `
       -ContentType: "application/json; charset=utf-8" `
       -InFile request.json `
       -Uri "https://recaptchaenterprise.googleapis.com/v1/projects/PROJECT_ID/keys" | Select-Object -Expand Content

   Anda akan melihat respons JSON seperti berikut:

   
   {
     "name": "projects/project-id/keys/7Ldqgs0UBBBBBIn4k7YxEB-LwEh5S9-Gv6QQIWB8m",
   "displayName": "DISPLAY_NAME,
   
   },
   "wafSettings": {
     "wafService": "cloudflare",
   
     
   
   }
   }
   
   

   Catat kunci ekspres Anda untuk digunakan nanti.