Node.js helmet & stripe - Site was blocked due to its Cross-Origin-Resource-Policy header

Question

I'm using node.js helmet and on a specifc route /shop stripe for payment. If I have the default helmet config:

app.use(helmet());

I'm getting this error in Console:

The resource at “https://js.stripe.com/v3/” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#

The only setup what seems to work and I'm getting no console error is:

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      //"default-src": [ "'self'" ],
      "default-src": [ "'self'" "js.stripe.com" ],
      "img-src": [ "'self'", "data:" ],
      "script-src": [ "'self'", "js.stripe.com" ],
      //"script-src": [ "'self'", "js.stripe.com", "m.stripe.network", "m.stripe.com" ],
      //"script-src": [ "'self'", "https://js.stripe.com", "js.stripe.com" ],
      //"script-src": [ "'self'" ],
    }
  },
  //crossOriginResourcePolicy: { policy: "cross-origin" }
  crossOriginEmbedderPolicy: false
}));

But is this the best one and most secure to enable stripe on that specific route and no console error?

Version

"helmet": "^6.1.5",

Helmet https://helmetjs.github.io/

Answer 1

This CORS error is happening because you tried to load js.stripe.com from your server instead of in the browser. The Stripe server is not designed to serve this library via a cross-origin request, so you need to add this line in your HTML file directly instead:

<script src="https://js.stripe.com/v2/"></script>