Django条带js阻止内联脚本答案

【问题标题】：Django stripe js blocking of inline scriptDjango条带js阻止内联脚本
【发布时间】：2020-01-22 23:20:23
【问题描述】：

我正在尝试在 Django 中实现条带支付系统。对于添加卡支付，我按照this link. 中的指南在 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 阻止了此类连接。应该注意的是，在这个阶段，测试信用卡支付按预期工作，客户借记的金额被添加到我的条带账户的测试余额中。为了解决这个阻塞问题，我按照this link. 中的说明进行操作，因此，我在我的 Django 模板中添加了以下meta 标签：

<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 的错误吗？

【问题讨论】：

不是直接的答案，但可以考虑试试 Monzilla 的 Django-CSP。您可能会更幸运，并且（对我而言）配置我的 CSP 更容易。
@bones225 我看了那个插件。但我不想为这种“小”问题使用第三方插件，并且总是尽量避免使用它们。
@ElginCahangirov 我完全同意，但是，在写完你的问题的答案后，我已经认真地重新考虑使用那个包......
@ElginCahangirov 我知道你来自哪里。对我来说，我认为 Monzilla 包对于 Django 应用程序几乎必不可少。我喜欢将 Django 安全设置仅保留在 settings.py 中。如果不同的页面需要不同的 CSP，我想一个例外。

标签： django firefox stripe-payments content-security-policy inline-scripting

【解决方案1】：

根据 Content-Security-Policy 上的 Mozilla's docs，还有吨其他安全策略，如果您的 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 directives，因此您可能需要添加一些您的页面需要的策略。

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

如果你有这样的政策：

<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。每个依赖项都需要在它们需要的每个策略中明确引用。

要是有人有package 来简化这个过程就好了……

最后，this 的回答是学习 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'"/>

【讨论】：

感谢您的回答和资源（default-src 指令是一个很好的技巧）。但最后，我看不到我的问题的答案。您是否尝试实现 stripe js 并能够摆脱 Firefox 浏览器中的上述控制台错误？
@ElginCahangirov 我没有设置 api 本身，但我能够使用您的确切 Content-Security-Policy 重新创建您的问题，并且能够通过添加我的脚本所需的策略来解决它。话虽这么说应该尝试直接回答您的问题（尽管很难不看到您收到的错误消息），所以我在更新中添加了一个。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我建议你使用 Mozilla 的django-csp。它非常易于配置，并且运行良好。

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

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

【讨论】：