Getting 'blocked:csp' in response to request url https://pay.google.com/gp/p/js/pay.js

[nitzanma]

Hi everyone,
working on adding Google Pay button to React App, which will actually be part of a WebView for android application.
we're dealing with payments using Stripe.

wanted to test first implementation on my local environment,
but getting 'blocked: csp' in response to request url: https://pay.google.com/gp/p/js/pay.js.

with console saying:
Refused to load the script 'https://pay.google.com/gp/p/js/pay.js' because it violates the following Content Security Policy directive: "script-src 'self' https://js.stripe.com 'unsafe-inline'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

does anyone know how can this be solved?

thanks

[dmengelt]

@nitzanma what kind of Stripe integration do you use?

[dmengelt]

are you able to add pay.google.com to your CSP policy?

[nitzanma]

Not aware to any option like this, unfortunately.

do you know where should this be set?
is it a stripe setting in our account there?
is it internal setting in our application backend?

[dmengelt]

the CSP is set by your server (application backend) yes.

[nitzanma]

Thanks.
I added https://pay.google.com to csp setting inside our React app index.html , and afterwards some more entries, as console error suggested, and it worked.

example of how csp is set inside a meta tag can be found here:
https://blog.sucuri.net/2023/04/how-to-set-up-a-content-security-policy-csp-in-3-steps.html

Thanks for your help!