Stripe Content Security Policy Error for img src in Expess App

Question

After entering card details and proceeding for payment, a small blank pop up from stripe appears and i get an error in the console.

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

Here is the screenshot of the error error

I have also set the content security policies as per stripe but still the same error again and again.

app.post('/payments/create', async (request, response) => {
    response.set("Content-Security-Policy", `script-src 'self' https://js.stripe.com https://checkout.stripe.com; style-src 'self' checkout.stripe.com; frame-src 'self' *.stripe.com *.stripe.network; img-src data: 'self' https://*.stripe.com; connect-src 'self' *.stripe.com;`);

    const total = request.query.total;
    const paymentIntent = await stripe.paymentIntents.create({
        amount: total, //subunits of the currency
        currency: "usd",
    });
    response.status(201).send({
        clientSecret: paymentIntent.client_secret,
    }); // OK and Created something
})

Answer 1

The error says that your img-src directive is "img-src data: https://q.stripe.com" while your policy definition says it is "img-src data: 'self' https://*.stripe.com;". You should check if there are multiple CSPs defined in response headers or meta tags. Content will need to pass all policies, and in this case there is likely another policy causing it to break. You might have tried to implement CSP in another way first and forgot to remove it.