search

AurityLab / vue-recaptcha-v3

A simple and easy to use reCAPTCHA (v3 only) library for Vue.
Apache License 2.0
236 stars 25 forks source link

CSP violation in production #562

Closed berlaga closed 2 years ago

berlaga commented 2 years ago

I host my VueJS SPA app in Azure. I get the following message when the app is loaded.

Refused to load the script 'https://www.google.com/recaptcha/api.js?render=explicit' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

reCaptcha docs recommend: 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.

How can I accomplish that?

berlaga commented 2 years ago

Just to add more details. The actual problem is in ReCaptchaLoader.js

image

berlaga commented 2 years ago

My bad. Disregard. I incorrectly configured Content Security Policy. For people that may encounter this: configure CSP inside your server.js. This way your Node app will set the correct CSP header regardless of IIS settings. It works fine now.

pouriabagheri commented 2 years ago

Hi @berlaga would you mind sharing your CSP directives that got ReCaptcha working ?

berlaga commented 2 years ago

Sure. Please see below. I'm crediting this article for the solution: https://www.digitalocean.com/community/tutorials/how-to-secure-node-js-applications-with-a-content-security-policy

Put this inside your server file, like server.js.

app.use(function (req, res, next) { res.setHeader( "Content-Security-Policy", "default-src 'self';font-src 'self' https: data: https://cdn.jsdelivr.net https://fonts.gstatic.com; img-src 'self'; script-src 'self' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/; style-src 'self' https: 'unsafe-inline'; frame-src 'self' https://www.google.com/recaptcha/ https://recaptcha.google.com/recaptcha/;" ); next(); });

On Thu, Feb 17, 2022 at 2:38 AM Poorya Bagheri @.***> wrote:

Hi @berlaga https://github.com/berlaga would you mind sharing your CSP directives that got ReCaptcha working ?

— Reply to this email directly, view it on GitHub https://github.com/AurityLab/vue-recaptcha-v3/issues/562#issuecomment-1042655649, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEYHXDEFFN2FUOWMZN3XORDU3SQWFANCNFSM5HVVQ5NA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>