8

我正在尝试在 Django 中实现条带支付系统。要添加卡付款，我按照此链接中的指南进行操作。在 Django 模板和 CSS 和 JS 代码中添加 HTML 标记作为单独的静态文件后，我在 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" />

而这一次之前提到的 inline-script 块错误再次出现在 Firefox 控制台中。:)

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

编辑

考虑到付款按预期工作并且 Chromium 浏览器没有在开发人员工具上记录任何错误，这可能只是 Firefox 错误吗？

4

3 回答 3

5

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

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

HTTP Content-Security-Policy (CSP) default-src 指令用作其他 CSP获取指令的后备。对于以下每个不存在的指令，用户代理将查找 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-srcscript-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'"/>
于 2019-09-29T04:14:15.180 回答
4

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

于 2019-09-30T17:49:42.883 回答
1

我建议您使用django-cspMozilla。它非常易于配置，并且运行良好。

在这里你可以找到 repo： https ://github.com/mozilla/django-csp

这里是文档：https ://django-csp.readthedocs.io/en/latest/

于 2019-10-02T16:10:42.563 回答