内联脚本的Django stripe js阻塞
Django stripe js blocking of inline script
我正在尝试在 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. 中的说明进行操作，因此，我将以下 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 错误吗？
根据内容安全策略 Mozilla's docs，还有 吨 其他安全策略，如果您的 js/css 文件需要其中之一要设置，它们将被阻止。
幸运的是，有一个简单的解决方法，default-src。来自上述文档：
The HTTP Content-Security-Policy (CSP) default-src directive serves as a fallback for the other CSP fetch directives. For each of the following directives that are absent, the user agent will look for the default-src directive and will use this value for it:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; ...
请注意 default-src 仅适用于 fetch directives，因此您可能需要添加一些页面所需的政策。
此外，您需要为您定义的每个策略指定 self，因为当所需策略为 null[=59 时，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 or jQuery。每个依赖项都需要在它们需要的每个策略中明确引用。
要是有人 package 可以简化这个过程就好了...
最后， 答案是学习内容安全策略的绝佳资源。
编辑
为了向您提供页面所需的准确 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'"/>
这个问题的答案是 Redux DevTools Firefox 扩展。禁用此扩展后，控制台错误消失。您可以转到 this link in Firefox browser with Redux DevTools enabled. There is also an open github issue 关于这个问题来轻松测试它。
我建议您使用 Mozilla 的 django-csp。
它非常容易配置并且运行完美。
您可以在此处找到存储库：
https://github.com/mozilla/django-csp
我正在尝试在 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. 中的说明进行操作，因此，我将以下 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 错误吗？
根据内容安全策略 Mozilla's docs，还有 吨 其他安全策略，如果您的 js/css 文件需要其中之一要设置，它们将被阻止。
幸运的是，有一个简单的解决方法，default-src。来自上述文档：
The HTTP Content-Security-Policy (CSP) default-src directive serves as a fallback for the other CSP fetch directives. For each of the following directives that are absent, the user agent will look for the default-src directive and will use this value for it:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; ...
请注意 default-src 仅适用于 fetch directives，因此您可能需要添加一些页面所需的政策。
此外，您需要为您定义的每个策略指定 self，因为当所需策略为 null[=59 时，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 or jQuery。每个依赖项都需要在它们需要的每个策略中明确引用。
要是有人 package 可以简化这个过程就好了...
最后，
编辑
为了向您提供页面所需的准确 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'"/>
这个问题的答案是 Redux DevTools Firefox 扩展。禁用此扩展后，控制台错误消失。您可以转到 this link in Firefox browser with Redux DevTools enabled. There is also an open github issue 关于这个问题来轻松测试它。
我建议您使用 Mozilla 的 django-csp。
它非常容易配置并且运行完美。
您可以在此处找到存储库： https://github.com/mozilla/django-csp