Search for answers or browse our knowledge base.
Configuring Content Security Policy (CSP) for CAPTCHA
Content Security Policy (CSP) is a security standard used on websites to prevent attacks such as cross-site scripting (XSS) and other code injection attacks.
CSP works by adding several HTTP headers to the HTTP responses, which are sent when a website visitor tries to access your website. They inform website visitors’ browsers of the trusted sources from which scripts, images, and other components can be downloaded.
Potential CAPTCHA problems caused by CSP
When you add CAPTCHA to your website with CAPTCHA 4WP, a CAPTCHA check is run whenever a user loads the form/s on which the CAPTCHA check is included. For example, if you added Google reCAPTCHA, the website visitor’s browser must also load scripts from Google.com.
Therefore, when you have a Content Security Policy in place, you need to add specific HTTP headers to allow the loading of the CAPTCHA scripts from third-party sources; otherwise, CAPTCHA will fail to load.
This is a very common problem; below we explain how you can solve this issue.
Configuring CSP to allow CAPTCHA
CAPTCHA 4WP supports three different CAPTCHA providers; Google reCAPTCHA, hCaptcha, and Cloudflare Turnstile.
Below is a list of the directives you need to add to your CSP to allow any of these providers to work on your website.
Note: CSP configuration is typically done at the web server level. However, if you do not have access to the web server, as may be the case in a managed website environment, you can install a plugin that adds the HTTP headers.
Configuring CSP for Google reCAPTCHA
When using Google reCAPTCHA, you need to add the following directives:
- script-src https://www.google.com/recaptcha/, https://www.gstatic.com/recaptcha/
- frame-src https://www.google.com/recaptcha/, https://recaptcha.google.com/recaptcha/
For more detailed information, please refer to the reCAPTCHA FAQs.
Configuring CSP for hCaptcha
When using hCaptcha, you need to add the following directives:
- script-src https://hcaptcha.com, https://*.hcaptcha.com
- frame-src https://hcaptcha.com, https://*.hcaptcha.com
- style-src https://hcaptcha.com, https://*.hcaptcha.com
- connect-src https://hcaptcha.com, https://*.hcaptcha.com
For more detailed information, please refer to the hCaptcha documentation.
Configuring CSP for Cloudflare Turnstile
When using Cloudflare Turnstile, you need to add the following directives:
For more detailed information, please refer to the Cloudflare Turnstile FAQs.
Verifying your CSP with a CSP Evaluator
Google has a CSP evaluator, which you can use to check your CSP setup. Whenever you change the CSP, it is highly recommended to test the setup, ensuring all the scripts and other third-party components are still loading.
Tip: If you are new to all of this and not sure from where to start, refer to Configuring HTTP security headers to WordPress for a guide on how to add the HTTP headers to your website using a plugin.
