I've setup WAF for my API Gateway with a CAPTCHA rule for one of the endpoints:
- Rule 1: URI contains string "/my_protected_endpoint" AND
- Rule 2: Http Method matches string "POST"
I've got a simple test page setup with the following code:
async function protectedPostRequest(data) {
const result = await AwsWafIntegration.fetch(
`${API_URL}/my_protected_endpoint`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data)
}
);
console.log({result});
if (result.status === 405) {
AwsWafCaptcha.renderCaptcha(
document.querySelector("#container"),
{
apiKey: <My API Key>,
onSuccess: () => protectedPostRequest(data),
onError: (error) => console.log(error),
}
);
} else {
const text = await result.text?.();
if(result.ok) {
alert(text);
} else {
console.log(text || String(result));
}
}
The issue I'm running into is, even after successfully completing the CAPTCHA, the requests still result in a 405 code. I've already confirmed that the requests contain "X-Aws-Waf-Token" in the header.
I've also got a Cloudfront for the Api Gateway if that makes any difference..