CSP setup for Stripe Integration

Question

I have a stripe elements integration on my project. I use sapper on front end and ruby on the backend.

I followed the tutorial to setup the server to generate payment intent using stripe private key and front end to show stripe embeddable UI using stripe publish key, everything works fine the only problem is as follows.

Once a payment is done using test card details I get the following error Refused to load the image 'https://hooks.stripe.com/img/favicon.png' because it violates the following Content Security Policy directive: "img-src data: https://q.stripe.com".

Answer 1

The issue that you describe is related to the CSP and how it is configured for your project. Stripe has documentation related to the CSP describing all the required directives https://stripe.com/docs/security/guide#content-security-policy. It requires img-src directive to allow loading of the content from https://*.stripe.com while your current directive permits only data: and https://q.stripe.com. Extending your current directive with the requirements from Stripe should solve the issue.