title: How to fix Content Security Policy for Stripe in a React app
body: <p>I have not worked with Content Security Policy before. I'm getting the following error when redirecting users to Stripe Checkout.</p>
  <p><a href="https://i.stack.imgur.com/h6Gd5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h6Gd5.png" alt="Error Image" /></a></p>
  <p>Even after adding meta tags to index.html, I'm still getting error. Here is what I'm doing :</p>
  <pre><code>
  &lt;link rel=&quot;icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
      &lt;meta
        name=&quot;description&quot;
        content=&quot;Web site created using create-react-app&quot;
      /&gt;
      &lt;meta
        http-equiv=&quot;Content-Security-Policy&quot;
        content=&quot;
           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 ; &quot;
      /&gt;
  
  </code></pre>
  <p>Stripe docs : <a href="https://stripe.com/docs/security/guide#content-security-policy" rel="nofollow noreferrer">https://stripe.com/docs/security/guide#content-security-policy</a></p>
  <p>What is the proper way to write Content Security Policy and what I'm doing wrong?</p>