This document shows examples of how to implement the features of reCAPTCHA for WAF for Google Cloud Armor.
You can use one or more features of reCAPTCHA for WAF in a single application.
If you want to use more than one feature, then you must create a reCAPTCHA key for each of those features and use them in your application. For example, if you want to use reCAPTCHA action-tokens and reCAPTCHA challenge page, then you must create an action-token key and a challenge-page key, and use them in your application.Example 1: Using reCAPTCHA session-tokens and reCAPTCHA challenge page
You can add a reCAPTCHA session-token on pages that a user might access so that the cookie gets refreshed periodically, for example, a login page. Configure a Google Cloud Armor security policy rule to redirect the request to a reCAPTCHA challenge page when the score is low.
The following illustration shows a workflow that uses reCAPTCHA session-token and reCAPTCHA challenge page features:
Example 2: Using reCAPTCHA action-tokens and reCAPTCHA challenge page
You can add a reCAPTCHA action-token to protect a user action, such as checkout. Configure a Google Cloud Armor security policy rule to redirect the request to a reCAPTCHA challenge page in any of the following conditions:
- The score is low.
- The
action_name
attribute of the action-token does not match the user action that is protected.
The following illustration shows a workflow that uses reCAPTCHA action-token and reCAPTCHA challenge page features:
The following sample script shows how to use a reCAPTCHA action-token and redirect to a reCAPTCHA challenge page with the action-token attached as header:
<script src="https://www.google.com/recaptcha/enterprise.js?render=ACTION_TOKEN_SITE_KEY"></script>
<script>
function onSuccess(token) {
const xhr = new XMLHttpRequest();
xhr.open('GET','http://www.example.com/checkout', false);
xhr.setRequestHeader("X-Recaptcha-Token", token);
xhr.onreadystatechange = function() {
// Make sure that the request is finished and response is ready with 200
if (this.readyState == 4 && this.status == 200) {
// Display the response, it could be a reCAPTCHA challenge
// page based on your Google Cloud Armor security rule settings.
document.open();
document.write(xhr.responseText);
document.close();
}
};
xhr.send(null);
}
grecaptcha.enterprise.ready(function () {
document.getElementById("execute-button").onclick = () => {
grecaptcha.enterprise.execute('ACTION_TOKEN_SITE_KEY', {
}).then(onSuccess, onError);
};
});
</script>
What's next
- Learn how to implement reCAPTCHA WAF features with Google Cloud Armor.
- Learn more about features for integration with WAF service providers.