Question 44407 in Html Question posted in
Some basic documentation can be found here.

Stripe CSP when loading stripe.js – Html

I’m trying to load <script src="https://js.stripe.com/v3/"></script> on a static page, so I’ve added the following Content-Security-Policy:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
        script-src 'self' 'unsafe-inline' https://js.stripe.com https://maps.googleapis.com;
        connect-src 'self' https://api.stripe.com https://hooks.stripe.com https://maps.googleapis.com;
        frame-src 'self' https://js.stripe.com https://hooks.stripe.com;
        " />

I then start my static server (that gives the good CORS headers) and I get the following error in the browser console

ERROR: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). content.js:40:10

ERROR: Content Security Policy: The page’s settings observed the loading of a resource at inline (“script-src”). A CSP report is being sent. content.js:40:10

WARNING: Partitioned cookie or storage access was provided to “https://js.stripe.com/v3/m-outer-93afeeb17bc37e711759584dbfc50d47.html#url=http%3A%2F%2Flocalhost%3A3000%2Ffr%2Foffers%2Fclimb-up-regular-price-live%2Forder%2F&title=Achats%20group%C3%A9s%20-%20Climb%20Up%20live&referrer=http%3A%2F%2Flocalhost%3A3000%2Ffr%2Foffers%2Fclimb-up-regular-price-live%2Forder%2F&muid=76c455da-cdc3-49bb-8a74-21f2190214463691c5&sid=51750ec5-9420-4acd-aa45-01249980a50dbcc98a&version=6&preview=false” because it is loaded in the third-party context and dynamic state partitioning is enabled.

ERROR: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”). content.js:40:10

WARNING: Partitioned cookie or storage access was provided to “https://m.stripe.network/inner.html#url=http%3A%2F%2Flocalhost%3A3000%2Ffr%2Foffers%2Fclimb-up-regular-price-live%2Forder%2F&title=Achats%20group%C3%A9s%20-%20Climb%20Up%20live&referrer=http%3A%2F%2Flocalhost%3A3000%2Ffr%2Foffers%2Fclimb-up-regular-price-live%2Forder%2F&muid=76c455da-cdc3-49bb-8a74-21f2190214463691c5&sid=51750ec5-9420-4acd-aa45-01249980a50dbcc98a&version=6&preview=false” because it is loaded in the third-party context and dynamic state partitioning is enabled.

And of course the page stays empty, the integration doesn’t work.

Here are the response headers from my server for that page

HTTP/1.1 200 OK
content-type: text/html; charset=utf-8
content-length: 2333
access-control-allow-origin: http://localhost:3000, https://js.stripe.com
access-control-allow-methods: GET, POST
date: Tue, 07 Mar 2023 07:52:38 GMT

Any idea on why Stripe.js refuses to load?

Thanks a lot 😉

EDIT 07/03/2023

I’ve tried to run all that with https, doesn’t work either.

Tags:

2

Answers


  1. 0

    I’m not very familiar with CSP, but here are a few things you can try:

    1. Remove all self from your meta tag, so something like this:
    <meta http-equiv="Content-Security-Policy" content="default-src;
  script-src https://js.stripe.com https://maps.googleapis.com;
  connect-src https://api.stripe.com https://hooks.stripe.com https://maps.googleapis.com;
  frame-src https://js.stripe.com https://hooks.stripe.com;" />

    1. Make sure to read this Stripe doc, that mention some caveats if you are using Trusted Types.

    2. Double check that you don’t have another policy on the page that is overriding the allow-lists you set.

    Login or Signup to reply.
  2. 0

    The two main suspects in this situation are

    1. Another CSP. If content is blocked by a default CSP added by the framework it doesn’t help to add another one. But your headers doesn’t show any.

    2. An event attribute like onclick="…". These will not be allowed by ‘unsafe-inline’. They can be allowed with additional controls in CSP level 3, but it is better to rewrite them to use event listeners. It is a bit puzzling that this appears in the content.js file, but it may be the js file inserting an element that includes an event attribute.

    If this doesn’t help, try to examine what could trigger the CSP error at line 40 of content.js.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search