Javascript Cloudflare CDN中的链接jQuery脚本在控制台中的“上”抛出CSP错误；子项包括；下划线-min.js

目前我有：

<script rel="preload" as="script" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

但我在Chrome控制台中收到以下错误：

拒绝加载脚本“”，因为它违反了以下内容安全策略指令：“脚本src'self''sha256 FgpCb/KJQLNLNFU91TA32O/NMZxltwRo8QtmkMRdAu8=”。请注意，未显式设置“script src elem”，因此将“script src”用作回退

我该如何解决这个问题？我是否需要在html文档中明确包含

下划线-min.js

（以及任何其他“子包含”依赖项）？我是否能够将

cdnjs.cloudflare.com

中的所有脚本改为白名单

谢谢

编辑：这里是控制台错误的屏幕截图，该错误似乎发生在

jquery.min.js

文件中

此外，我不确定这是否相关，但我得到的是https:无法识别的内容安全策略指令“：”，这是我在一些googledevtools文章或其他地方找到的规则的一部分。但我猜冒号对于nginx中的CSP规则无效

编辑2:好的，经过更多的研究和实验，我对CSP有了更多的了解，从我所读到的内容来看，我可能遇到了FireFox独有的问题。我现在收到以下错误，即使没有定义CSP规则：

内容安全策略：忽略脚本src中的“'safe-inline'”：指定了“strict dynamic”

我最接近于一个可行的解决方案是将我需要从中加载的所有域列为白名单：

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://stackpath.bootstrapcdn.com https://ssl.google-analytics.com https://www.google.com https://www.gstatic.com; img-src 'self' data: https://ssl.google-analytics.com; style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com https://fonts.googleapis.com; font-src 'self' https://themes.googleusercontent.com; frame-src https://www.google.com; object-src 'none';";

是的，我知道我的

脚本src

和

样式src

规则中都有

'safe-inline'

，试图让网站在FireFox中运行。如果由于FF的CSP实现存在缺陷（需要确认），网站无法在FireFox中正常呈现或运行，那么CSP的目的是次要的，因此与此无关（直到等待确认的缺陷得到修复）

在撰写本文时，关于CSP的信息似乎相对有限，有人能解释一下为什么FireFox似乎在CSP规则中强制使用

'strict-dynamic'

，尽管它在规则定义的任何地方都不存在吗？FireFox对我当前的CSP规则（部分）的解释是否暗示了这一点

谢谢你的帮助

---

对于阅读CSP的任何其他人来说，看看哪些可以帮助您调试自己的CSP规则。我知道这对我有帮助

对于任何没有解决方案的潜伏者，我已经隔离了FireFox当前如何处理

rel=“preload”

属性的问题。至少可以说，这不太好，我认为Edge也是如此

TL；DR:在跨主要浏览器更统一地处理之前，不要使用

rel=“preload”

。此外，我的问题是使用CloudFlare CDN中的jQuery，CDN的目的是防止访问者（毫无意义地）反复下载相同的内容。换句话说，旗舰浏览器之间的

rel=“preload”

行为不仅不同，而且显得多余，因为CDN的要点是访问者在访问以前的网站时已经下载了给定的文件，这些网站也使用同一CDN中的同一文件

查看当前浏览器对

rel=“preload”

的支持概述

---

调查结果

Chrome和其他浏览器可能正在正确地预加载（更多）资源，尽管总体而言，我们似乎缺乏关于如何正确启动和运行CSP的工具和文档，希望这个答案能给像我这样对CSP比较陌生的人一些启示

在对CSP规则进行故障排除时，我发现了许多问题。其中之一是，将

as

属性与typehint配对可能会对CSP的当前浏览器实现产生不利影响。例如，我试图加载一个显示有

as=“font”

的Google字体，如果我没有记错的话，它会导致额外的麻烦，直到它被设置为

as=“style”

。我收集到的信息（如果您可以验证，请插入/编辑此答案）是，这是因为链接的资源实际上是一个样式表，而不是字体文件

我遇到的另一个奇怪的问题是，当您预加载资源时，您必须在加载给定资源后对其进行“初始化”。因此，您可以选择使用所需的

rel=“stylesheet/script/etc”

克隆

元素（这与DRY原则直接相反），或者将onload事件附加到

元素（这并不违背DRY，但确实感觉很过时。现在是2019年！为什么我们的浏览器不能为我们做到这一点？或者我们可以添加对类似

append=“true”

属性的浏览器支持，该属性将自动、优雅地为我们处理此问题）

为了更好地解释

onload

“解决方案”（由于我在这个问题中记录的CSP错误，在FireFox中不起作用），我将从中删除以下段落和代码片段：

在支持它的浏览器中，

rel=preload

属性将导致浏览器获取样式表，但一旦加载后，它不会应用CSS（它仅获取CSS）。为了解决这个问题，我们建议在链接上使用onload属性，在加载完成后应用CSS。

如上所述，这感觉非常陈旧。我们不应该在冗余代码和陈旧代码之间做出选择

我提到Chrome似乎有更好的CSP生产实现，但仍有一些工作要做

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://stackpath.bootstrapcdn.com https://ssl.google-analytics.com https://www.google.com https://www.gstatic.com; img-src 'self' data: https://ssl.google-analytics.com; style-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com https://fonts.googleapis.com; font-src 'self' https://themes.googleusercontent.com; frame-src https://www.google.com; object-src 'none';";

<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">