CSP (Content-Security-Violation) for inlining styles
Closed this issue · 2 comments
Even if the options are { autoHideBadge: true } when calling the exported load method, the following error occurs int he Dev Console: (newlines inserted for sake of readability)
ReCaptchaInstance.js:63 Refused to apply inline style because it violates
the following Content Security Policy directive: "default-src 'self'".
Either the 'unsafe-inline' keyword, a hash ('sha256-ky+Jc9PO/UE8J1qJ/xk7n36I3MqWIjjFdFqRguhIL/8='), or a nonce ('nonce-...')
is required to enable inline execution. Note also that 'style-src' was not explicitly set,
so 'default-src' is used as a fallback.
Why are these inline styles required in first place when I'd expect no UI changes with the above option?
On which browser does this occur?
This is basically necessary, because Google does not offer any functionality to hide the badge through the reCAPTCHA API. The autoHideBadge option is just a convenience functionality provided by this library, which adds the styles to hide the badge automatically.
@WipeAir I see. This is then the root cause of the problem 🤔
Including the following CSS rule into our shipped CSS avoids these CSP issues. Maybe you can add a hint for the "autoHideBadge" to your README.
.grecaptcha-badge { visibility: hidden; }Thank you. You can continue with the state of this issue as you like 👋