集成Stripe.js时CSP阻止blob: URL创建Web Worker的问题求助

大家好，我在本地项目里集成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 Worker，所以我肯定是CSP的配置哪里不对。

具体尝试过的操作清单 #

• 在CSP的worker-src指令里添加了blob:
• 试过把所有CSP源都设为*（比如script-src *），相当于放宽所有限制
• 我查过相关资料，知道blob: URL需要在CSP里显式允许，也照着官方文档的建议做了，但还是没用

我想寻求的帮助 #

希望有大佬能指点一下，我是不是漏掉了什么步骤？或者有没有更安全的方式，能在CSP里允许Stripe通过blob: URL创建Web Worker？

有没有朋友之前遇到过同样的问题，或者知道怎么解决的？

提前谢谢大家的帮忙了！

补充信息 #

• Stripe.js版本：用的是最新版的Stripe.js
• 开发环境：本地用HTTP服务器跑的，地址是127.0.0.1:5500

备注：内容来源于stack exchange，提问作者Nicolas Estevez