CODEWITHSUNDEEP
htmlstripe-payments
K. Anbar
K. Anbar

Reputation: 21

Does Stripe not work on static website due to CSP?

I'm following Stripe's simple guide to import <script src="https://js.stripe.com/v3/"></script> into a simple HTML page and opening it on a local server using ws --spa index.html.

When I open the page, Stripe errors out on a bunch of CSP issues. I modified my meta tag to include a bunch of js.stripe.com URLs but still end up with inline issues that don't go away. What can I modify to get this fixed?

Here is index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <title>Test</title>
    <meta http-equiv="Content-Security-Policy" content="
        script-src 'self' 'unsafe-inline' https://js.stripe.com https://m.stripe.network; 
        style-src 'self' 'unsafe-inline' https://js.stripe.com;; 
        frame-src 'self' https://js.stripe.com https://hooks.stripe.com;
        connect-src 'self' https://api.stripe.com https://q.stripe.com;">
    <script src="https://js.stripe.com/v3/"></script>
</head>
<body></body>
</html>

Errors:

Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'self'” preload.js:139:16
Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'self'” preload.js:139:16
Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “style-src 'self'” <anonymous code>:50:18
Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline style (style-src-elem) from being applied because it violates the following directive: “style-src 'self'” <anonymous code>:50:18
Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “style-src 'self'” <anonymous code>:55:39
Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline style (style-src-elem) from being applied because it violates the following directive: “style-src 'self'” <anonymous code>:55:39
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. markup.js:250:53
Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'self'” index.js:7764:27
Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'self'” index.js:7764:27

Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src https://m.stripe.network 'sha256-5DA+a07wxWmEka9IdoWjSPVHb17Cp5284/lJzfbl8KA=' 'sha256-/5Guo2nzv5n/w6ukZpOBZOtTJBJPSkJ6mhHpnBgm3Ls='” preload.js:139:16
Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “style-src https://m.stripe.network” <anonymous code>:50:18
Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “style-src https://m.stripe.network” <anonymous code>:55:39
Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src https://m.stripe.network 'sha256-5DA+a07wxWmEka9IdoWjSPVHb17Cp5284/lJzfbl8KA=' 'sha256-/5Guo2nzv5n/w6ukZpOBZOtTJBJPSkJ6mhHpnBgm3Ls='” index.js:7764:27

TypeError: styleElement.sheet is null
element-collapser.js:91:9
Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “style-src 'self'” element-collapser.js:88:57
Content-Security-Policy: (Report-Only policy) The page’s settings would block an inline style (style-src-elem) from being applied because it violates the following directive: “style-src 'self'”

Upvotes: 0

Views: 34

Answers (1)

Evert
Evert

Reputation: 99738

To answer the question from your title: It can definitely work on static sites, but CSP can of course block it. If you want to use CSP, you need to set the correct headers for Stripe to be able to load its assets.

There's a guide on their website that tells you want to enable: https://docs.stripe.com/security/guide#content-security-policy

Upvotes: 0

Related Questions