StripeJS - CSP 错误：由于缺少“worker-src”指令，拒绝从“blob:”URL 创建工作人员

Question

在本地项目中集成 Stripe API 时，我遇到了与 内容安全策略 (CSP) 和 Web Workers 相关的问题。

问题描述：

当我尝试加载集成了 Stripe.js 的页面时，我在控制台中收到以下错误：

Refused to create a worker from 'blob:https://m.stripe.network/9ebe38a1-64c4-425e-835f-e4af76e27553' because it violates the following Content Security Policy directive: "script-src https://m.stripe.network 'sha256-/5Guo2nzv5n/w6ukZpOBZOtTJBJPSkJ6mhHpnBgm3Ls='". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

该错误表明 Stripe 正在尝试从

blob:

URL 创建 Web Worker，但它被页面的 内容安全策略 (CSP) 阻止。

到目前为止我尝试过的：

我已更新 HTML 代码中的 CSP 策略，特别是在

worker-src

指令中，以允许

blob:

URL。这是我正在使用的 CSP 版本：

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src *; style-src *; img-src *; font-src *; connect-src *; frame-src *; object-src *; child-src *; media-src *; manifest-src *; worker-src * blob:;">

即使包含

worker-src * blob:

指令，我仍然看到相同的错误。

这是我的代码到目前为止的样子：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy"
        content="default-src * blob:; script-src *; style-src *; img-src *; font-src *; connect-src *; frame-src *; object-src *; child-src *; media-src *; manifest-src *; worker-src * blob:;">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://js.stripe.com/v3/"></script>

    <title>Stripe Integration - Proof of Concept</title>
</head>

<body>
    <form action="">
        <label for="">Label</label>
        <input type="text" name="" id="">
    </form>
    <script>
        const stripe = Stripe('pk_test_---'); 
    </script>
</body>

</html>

为什么我认为这是 CSP 问题：

错误消息表明问题与缺乏适当的 CSP 指令有关，该指令允许从

blob:

URL 创建 Web Workers。

我尝试过的：

在 CSP 中的
```
blob:
```
指令中添加了
```
worker-src
```
。
尝试对 CSP 中的所有源允许
```
*
```
（例如，
```
script-src *
```
）。
我已经阅读了如何在 CSP 中明确允许
```
blob:
```
URL，并且我已遵循官方文档中的建议，但错误仍然存在。

我在寻找什么：

如果我是否错过了任何步骤，或者是否有更有效的方法可以以安全的方式在内容安全策略中允许

blob:

Web Workers，我将不胜感激。

有人遇到过这个问题吗，或者有人知道如何解决吗？

预先感谢您的帮助。

其他详细信息：

Stripe.js 版本：我正在使用最新版本的 Stripe.js。
环境：使用位于
```
127.0.0.1:5500
```

Answer 1

这些是 Stripe.js 需要的 CSP 指令 https://docs.stripe.com/security/guide?csp=csp-js#content-security-policy

您可以将它们添加到您的集成中并重试吗？

StripeJS - CSP 错误：由于缺少“worker-src”指令，拒绝从“blob:”URL 创建工作人员

问题描述投票：0回答：1

问题描述：

到目前为止我尝试过的：

这是我的代码到目前为止的样子：

为什么我认为这是 CSP 问题：

我尝试过的：

我在寻找什么：

有人遇到过这个问题吗，或者有人知道如何解决吗？

其他详细信息：

1个回答

最新问题

StripeJS - CSP 错误：由于缺少“worker-src”指令，拒绝从“blob:”URL 创建工作人员

问题描述 投票：0回答：1

问题描述：

到目前为止我尝试过的：

这是我的代码到目前为止的样子：

为什么我认为这是 CSP 问题：

我尝试过的：

我在寻找什么：

有人遇到过这个问题吗，或者有人知道如何解决吗？

其他详细信息：

1个回答

最新问题

问题描述投票：0回答：1