How to fix Content Security Policy for Stripe in a React app

2 years ago

#37297

Tomaz_

I have not worked with Content Security Policy before. I'm getting the following error when redirecting users to Stripe Checkout.

Even after adding meta tags to index.html, I'm still getting error. Here is what I'm doing :


<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <meta
      http-equiv="Content-Security-Policy"
      content="
         default-src *; 
         style-src 'self'  'unsafe-inline'; 
         img-src https://*.stripe.com;
         script-src * 'self' https://checkout.stripe.com 'unsafe-inline'; 
         connect-src  * 'self' https://checkout.stripe.com  ; 
         frame-src * 'self'  https://checkout.stripe.com ; "
    />

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

What is the proper way to write Content Security Policy and what I'm doing wrong?

html

reactjs

stripe-payments

content-security-policy