源代码'undefined'的脚本在CSP中是什么意思？

Posted 2021-03-30

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

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都来自条纹。我不明白的是script-src的undefined？

• script-src怎么能成为undefined？一个<script>元素通常有一个src，如果不是它的unsafe-inline。 undefined是什么意思？
• 如何修改我的CSP以允许Stripe v3？

编辑：使用LastPass时，Firefox上似乎只会出现错误。 Chrome不会显示此错误，Firefox也不会显示Addons。

答案

对于像我这样在这里结束的人来说，解决方案与“禁用插件”不同。

上下文：我在React中使用条带，我使用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>

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

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