Stripe Connect : Content Security Policy issue

Question

Even By using meta tags, It is still showing error and Iframe is not working

<meta http-equiv="Content-Security-Policy" content="
         default-src *; 
         style-src 'self'  'unsafe-inline'; 
         script-src * 'self' https://checkout.stripe.com 'unsafe-inline' 
         connect-src : * 'self' https://checkout.stripe.com  'unsafe-inline' 
         frame-src : * 'self'  https://checkout.stripe.com  'unsafe-inline' 
         'unsafe-eval' 
         ;" >

Link reference : https://stripe.com/docs/security/guide#content-security-policy

Error : Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)

Also I used header() to set this up, but that also didn't worked. Any Help will be appreciated

score 3 · Answer 1 · answered May 13 '21 at 11:48

Your CSP has a lot of errors:

You have missed semicolons ; to separate script-src / connect-src / frame-src directives lists.
: is nor required in the connect-src : * ... and in the frame-src : * ...
Remove 'unsafe-inline' and 'unsafe-eval' from the connect-src and frame-src directives, those are not supported there
The * (asterisk) covers any host-sources like https://checkout.stripe.com and wss://checkout.stripe.com

BUT these are not significant, these just leads the CSP you have really is:

default-src *; 
style-src 'self'  'unsafe-inline'; 
script-src * 'self' 'unsafe-inline' 'unsafe-eval'

This CSP restrict nothing except data:-Urls usage. Therefore the error:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)

cannot belong your CSP.
Looks like you already have CSP header published somewhere. Hence second CSP via <meta> or HTTP header does not have effect as expected.

Check what CSP header you really have got in browser, the tutorial is here.

Check web-server config in Nginx for add_header Content-Security-Policy ... or .htaccess file (if Apache) for Header set Content-Security-Policy ... presence.
Or maybe you have installed some plugins for managing CSP headers.

score 2 · Answer 2 · answered May 13 '21 at 09:43

You're missing img-src https://*.stripe.com described in the Stripe documentation.

Also the asterisk character alone doesn't work as "any resource" (example of incorrect use in your code: default-src *). You need to use it as part of the <host-source> (e.g. *.example.com). See MDN docs for more details.

Stripe Connect : Content Security Policy issue

2 Answers2