Django Stripe JS阻止内联脚本

Question

我正在尝试在Django中实现条纹支付系统。要添加卡付款，我遵循了此链接中的指南。在Django模板中添加HTML标记以及CSS和JS代码作为单独的静态文件后，在Firefox中出现以下控制台错误：

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”)

我从上述错误消息中了解到的是，<script src="https://js.stripe.com/v3/"></script>JS文件包含指向其他JS文件的链接，而Firefox阻止了此类连接。应当注意，在此阶段，测试信用卡付款正在按预期方式工作，并且客户借记的金额已添加到我的条纹帐户的测试余额中。为了解决此阻塞问题，我遵循了此链接中的说明。因此，我meta在Django模板中添加了以下标记：

<meta http-equiv="Content-Security-Policy" content="connect-src https://api.stripe.com; frame-src https://js.stripe.com https://hooks.stripe.com; script-src https://js.stripe.com" />

添加上述Content-Security-Policy指令后，Firefox控制台不再显示上述阻止错误，但是这次我的静态JS文件被阻止了。我修改了如下指令以允许我的JS文件（'self在'script-src'指令中添加了' ）：

<meta http-equiv="Content-Security-Policy" content="connect-src https://api.stripe.com; frame-src https://js.stripe.com https://hooks.stripe.com; script-src 'self' https://js.stripe.com" />

并且这一次之前提到的内联脚本阻止错误再次出现在Firefox控制台中。:)

您能帮我解决这个问题吗？关于Firefox控制台错误的原因，我的理解正确吗？为什么实施的解决方案不起作用？

编辑

考虑到付款按预期进行并且Chromium浏览器未在开发人员工具上记录任何错误，难道仅仅是Firefox的错误？

Answer 1

根据Mozilla 的Content-Security-Policy文档，还有大量其他安全策略，如果您的 js/css 文件需要设置其中之一，它们将被阻止。

幸运的是，有一个简单的解决方法，default-src. 从上述文档：

HTTP Content-Security-Policy (CSP) default-src 指令用作其他 CSP fetch 指令的后备。对于以下每个不存在的指令，用户代理将查找 default-src 指令并为其使用此值：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; ...

请注意，default-src仅适用于fetch 指令，因此您可能需要添加一些页面所需的策略。

此外，您需要为self您定义的每个策略指定，因为 Firefox 只会default-src在所需策略为null时查看。

因此，如果您有这样的政策：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src http://example.com;">

您将自己排除在script-src政策，但应该由所有其他政策所覆盖，随着政策的不同之处在于外观script-src作为备份之前希望default-src（例如script-src-elem）。

不幸的是，这也扩展到您的脚本具有的所有依赖项，例如bootstrap或jQuery。每个依赖项都需要在它们需要的每个策略中明确引用。

如果有人有一个包来简化这个过程......

最后，这个答案是学习 Content-Security-Policy 的绝佳资源。

编辑

为了向您提供您的页面所需的确切信息 Content-Security-Policy，我需要查看您收到的错误消息。话虽如此，鉴于我拥有的信息（为了可读性而换行），这是一个猜测：

<meta http-equiv="Content-Security-Policy" content="
default-src 'self'; 
connect-src 'self' https://api.stripe.com; 
frame-src 'self' https://js.stripe.com https://hooks.stripe.com; 
script-src 'self' https://js.stripe.com 'unsafe-inline'
"  />

您应该不添加换行符的政策在实际的代码，而不是把它写这样的：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://api.stripe.com; frame-src 'self' https://js.stripe.com https://hooks.stripe.com; script-src 'self' https://js.stripe.com 'unsafe-inline'"/>

Answer 2

这个问题的答案是Redux DevTools Firefox 扩展。禁用此扩展后，控制台错误消失。您可以通过在启用了 Redux DevTools 的 Firefox 浏览器中访问此链接来轻松测试这一点。还有一个关于这个问题的开放github 问题。