javascript - Stripe Connect : Content Security Policy issue

Solution:

Your CSP has a lot of errors:

1. You have missed semicolons ; to separate script-src / connect-src / frame-src directives lists.

2. : is nor required in the connect-src : * ... and in the frame-src : * ...

3. Remove 'unsafe-inline' and 'unsafe-eval' from the connect-src and frame-src directives, those are not supported there

4. 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.

Solution:

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.