Menangani respons CAPTCHA dari AWS WAF - AWS WAF, AWS Firewall Manager, dan AWS Shield Advanced

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Menangani respons CAPTCHA dari AWS WAF

AWS WAF Aturan dengan CAPTCHA tindakan menghentikan evaluasi permintaan web yang cocok jika permintaan tidak memiliki token dengan stempel waktu CAPTCHA yang valid. Jika permintaan adalah panggilan GET teks/html, CAPTCHA tindakan kemudian melayani klien pengantara dengan teka-teki CAPTCHA. Ketika Anda tidak mengintegrasikan CAPTCHA JavaScript API, pengantara menjalankan teka-teki dan, jika pengguna akhir berhasil menyelesaikannya, secara otomatis mengirimkan kembali permintaan.

Saat Anda mengintegrasikan CAPTCHA JavaScript API dan menyesuaikan penanganan CAPTCHA Anda, Anda perlu mendeteksi respons CAPTCHA yang mengakhiri, menyajikan CAPTCHA kustom Anda, dan kemudian jika pengguna akhir berhasil memecahkan teka-teki, kirimkan kembali permintaan web klien.

Contoh kode berikut ini menunjukkan cara untuk melakukannya.

catatan

Respons AWS WAF CAPTCHA tindakan memiliki kode status HTTP 405, yang kami gunakan untuk mengenali CAPTCHA respons dalam kode ini. Jika titik akhir Anda yang dilindungi menggunakan kode status HTTP 405 untuk mengkomunikasikan jenis respons lain untuk panggilan yang sama, kode contoh ini akan membuat teka-teki CAPTCHA untuk tanggapan tersebut juga. 

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="<Integration URL>/jsapi.js" defer></script>
</head>
<body>
    <div id="my-captcha-box"></div>
    <div id="my-output-box"></div>

    <script type="text/javascript">
    async function loadData() {
        // Attempt to fetch a resource that's configured to trigger a CAPTCHA
        // action if the rule matches. The CAPTCHA response has status=HTTP 405.
        const result = await AwsWafIntegration.fetch("/protected-resource");

        // If the action was CAPTCHA, render the CAPTCHA and return

        // NOTE: If the endpoint you're calling in the fetch call responds with HTTP 405
        // as an expected response status code, then this check won't be able to tell the
        // difference between that and the CAPTCHA rule action response.

        if (result.status === 405) {
            const container = document.querySelector("#my-captcha-box");
            AwsWafCaptcha.renderCaptcha(container, {
                apiKey: "...API key goes here...",
                onSuccess() {
                    // Try loading again, now that there is a valid CAPTCHA token
                    loadData();
                },
            });
            return;
        }

        const container = document.querySelector("#my-output-box");
        const response = await result.text();
        container.innerHTML = response;
    }

    window.addEventListener("load", () => {
        loadData();
    });
    </script>
</body>
</html>