内联脚本的 Django Stripe js 阻塞

Question

我正在尝试在 Django 中实现 strip 支付系统。对于添加卡支付，我遵循了 this link. 中的指南在 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 会阻止此类连接。应该注意的是，在此阶段测试信用卡付款按预期工作，客户借记的金额已添加到我的条纹帐户的测试余额中。为了解决这个阻塞问题，我按照 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 的错误？

Answer 1

根据 Mozilla's docs在 Content-Security-Policy 上，还有大量其他安全策略，如果您的 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对于您定义的每个策略，因为 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 answer 是了解内容安全策略的极好资源。

编辑

给你准确的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'"/>