Support Thread for Google reCAPTCHA plugin

[celextel108]

Is that api.js loading? Use Developer Tools->Network with JS filter to check.

Thanks @torvista for your response.

Content-Security-Policy in our website is not allowing reCAPTCHA to show up in our website.

reCAPTCHA is showing up without the Content-Security-Policy Meta Tag with the following Page Source [sitekey changed]:

<fieldset>
<script src="https://www.recaptcha.net/recaptcha/api.js?hl=en" async="" defer=""></script>
<div class="g-recaptcha" data-sitekey="6Led-h19" style="margin:5px"><div style="width: 304px; height: 78px;"><div><iframe title="reCAPTCHA" src="https://www.recaptcha.net/recaptcha/api2/anchor?ar=1&amp;k=6Led-h19&amp;co=aHR0cHM6Ly93d3cuY2VsZXh0ZWwuYml6OjQ0Mw..&amp;hl=en&amp;v=vP4jQKq0YJFzU6e21-BGy3GP&amp;size=normal&amp;cb=gdu5ptc1j68c" role="presentation" name="a-90eefeo4gtr8" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation" width="304" height="78" frameborder="0"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea></div><iframe style="display: none;"></iframe></div>
</fieldset>

reCAPTCHA is not showing up even after modifying the Meta Tag as follows:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' https://www.paypalobjects.com https://ajax.googleapis.com/ https://www.recaptcha.net/ 'unsafe-inline'; img-src 'self' https://www.paypalobjects.com/ https://fpdbs.paypal.com/ https://fpdbs.sandbox.paypal.com/; child-src 'self' https://www.recaptcha.net/ https://www.google.com; object-src 'self' https://docs.google.com; base-uri 'self'; form-action 'self' https://www.paypal.com/ https://uri.paypal.com/ https://www.sandbox.paypal.com/;">

Please suggest us if anything else has to be added for the reCAPTCHA to work with the Content-Security-Policy Meta Tag.

Thanks,

Lakshmanan

[celextel108]

reCAPTCHA is showing up after modifying the Content-Security-Policy Meta Tag as follows:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' 'nonce-{NONCE}'; script-src 'self' https: 'nonce-{NONCE}' https://www.paypalobjects.com https://ajax.googleapis.com/ https://www.recaptcha.net/ 'unsafe-inline'; img-src 'self' https://www.paypalobjects.com/ https://fpdbs.paypal.com/ https://fpdbs.sandbox.paypal.com/; child-src 'self' https://www.recaptcha.net/ https://www.google.com; object-src 'self' https://docs.google.com; base-uri 'self'; form-action 'self' https://www.paypal.com/ https://uri.paypal.com/ https://www.sandbox.paypal.com/;">

We have added 'nonce-{NONCE}' after we went through the Frequently Asked Questions at the following URL:
https://developers.google.com/recaptcha/docs/faq

I'm using Content-Security-Policy (CSP) on my website. How can I configure it to work with reCAPTCHA?
We recommend using the nonce-based approach documented with CSP3. Make sure to include your nonce in the reCAPTCHA api.js script tag, and we'll handle the rest.
Note: reCAPTCHA also works with 'strict-dynamic' on browsers that support it.
Alternatively, please add the following values to the 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/

Thanks @torvista for providing this useful Zen Cart Google reCAPTCHA Plugin.

Lakshmanan