javascript - 来自源 'undefined' 的脚本在 CSP 中意味着什么？

Question

我最近从 stripe.js v2 转移到了 stripe.js v3/elements。作为其中的一部分，我收到了新的 CSP 错误。这些似乎不会导致 Stripe 失败，但我想了解它们:

Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src"). Source: ;undefined.
elements-inner-card-15fb9df8718486f330c3990dde96bfd7.html:1

Content Security Policy: The page's settings blocked the loading of a resource at self ("script-src"). Source: ;undefined.
controller-3984d4085075df939703ec0d22159407.html:1

两者都是 elements-inner-card-15fb9df8718486f330c3990dde96bfd7.html和 controller-3984d4085075df939703ec0d22159407.html来自 Stripe 。我不明白的是 script-src的 undefined ？

• 如何script-src是undefined ？ <script>元素通常有一个 src ，如果不是，则为 unsafe-inline .什么是undefined什么意思？

• 如何修改我的 CSP 以允许 Stripe v3？

编辑:错误似乎只发生在 Firefox 上，当使用 LastPass 时。 Chrome 不会显示此错误，禁用 Addons 的 Firefox 也不会。

Answer 1

对于那些像我一样最终来到这里的人，解决方案不同于“禁用插件”。

上下文:我在 React 中使用 Stripe ，我使用 react-stripe-elements去做吧。当我这样做时出现 CSP 错误:

<form>
    {loading ? <Spinner /> : <CardElement /> }
</form>

动态挂载/卸载似乎不太顺利。我是这样改的:

<form>
    <div className={classnames({hidden: !loading})}><Spinner /></div>
    <div className={classnames({hidden: loading})}><CardElement /></div>
</form>

当然，使用相应的 CSS 来隐藏 hidden，错误就消失了。

希望它能帮助一些迷失的灵魂:)