javascript - 来自Cloudflare CDN的链接jQuery脚本在控制台中的“sub-include” underscore-min.js上引发CSP错误

Question

目前我有：

<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>

我已经设置了CSP规则：

add_header Content-Security-Policy: "default-src 'self' https:; script-src 'self' 'sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=';";

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


  拒绝加载脚本' https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'，因为它违反了以下内容安全策略指令：“ script-src'self''sha256-FgpCb / KJQlLNfOu91ta32o / NMZxltwRo8QtmkMRdAu8 ='”。请注意，未明确设置“ script-src-elem”，因此将“ script-src”用作后备。


我该如何解决？我是否需要在HTML文档中明确包含 underscore-min.js（以及任何其他“包含在子项下的”依赖项）？我可以将 cdnjs.cloudflare.com中的所有脚本列入白名单吗？

谢谢！

编辑：这是 jquery.min.js文件中似乎正在发生的控制台错误的屏幕截图。



另外，不确定是否与此相关，但是我在一些Google devtools文章或其他地方找到的https：部分得到了 Unrecognized Content-Security-Policy directive ':'。但是我想冒号对于nginx中的CSP规则无效？

编辑2：好的，因此，在进行更多的研究和实验之后，我对CSP有了更多的了解，并且从我读到的内容中，我可能会遇到仅FireFox的问题。我现在收到以下错误，即使未定义CSP规则：


  内容安全政策：忽略script-src中的“'unsafe-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';";

是的，我知道我的 'unsafe-inline'和 script-src规则中都包含 style-src，目的是使网站在FireFox中正常工作。如果由于FF的CSP实施存在错误（需要确认）而导致网站不再在FireFox中呈现或正常运行，则CSP的目的是次要的，因此是无关紧要的（直到此错误等待确认为止）。

既然在撰写本文时，关于CSP的信息似乎相对有限，所以谁能阐明为什么FireFox似乎强迫 'strict-dynamic'进入CSP规则，尽管在规则定义中没有出现。 FireFox对我当前的CSP规则（的一部分）的解释是否隐含或附加了？

谢谢您的帮助。

对于其他所有学习CSP的人，请查看 https://cspvalidator.org/，它可以帮助您调试自己的CSP规则。我知道这对我有帮助！

Answer 1

对于任何无法解决的潜伏者，我将问题隔离为FireFox当前如何处理rel="preload"属性。至少可以这样说，效果并不好，并且我假设Edge也是如此。

TL; DR：除非在主要浏览器中更统一地处理rel="preload"，否则请不要使用。另外，我的问题是使用CloudFlare CDN中的jQuery，而CDN的目的是防止访问者（毫无意义地）反复下载相同的内容。换句话说，rel="preload"不仅在旗舰浏览器之间有不同的作用，而且也变得多余，因为CDN的意义在于访问者在访问以前的网站时也已经下载了给定的文件，这些网站也使用相同的文件。相同的CDN。

Click here查看当前浏览器对rel="preload"的支持概述。



发现

Chrome和其他浏览器正在正确地处理要预加载（更多）的资源，尽管总的来说，我们似乎缺少有关如何正确启动和运行CSP的工具和文档，希望此答案能为其他相对较早的人提供一些见解。像我一样对CSP陌生

在对CSP规则进行故障排除时，我发现了许多问题。其中之一是，将as属性与typehint配对可能会对您与CSP的当前浏览器实现不利。例如，我试图加载带有as="font"的Google字体，如果我正确记起的话，这会引起更多的麻烦，直到将其设置为as="style"为止。我收集到的信息（如果可以通过其他方式验证，请输入/编辑此答案）是因为链接的资源确实是样式表而不是字体文件。

我遇到的另一个奇怪之处是，当您预加载资源时，必须在加载给定资源后实际“初始化”给定资源。因此，您的选择是用所需的<link>克隆rel="stylesheet/script/etc"元素（这直接与DRY原理相反），或者将onload事件附加到<link>元素（不违反DRY） ，但确实有些陈旧。这是2019年！为什么我们的浏览器无法为我们做到这一点呢；或者我们可以为append="true"属性之类的东西添加浏览器支持，从而自动为我们妥善处理此问题）。

我将从the following GitHub project引出以下段落和代码段，以更好地解释onload“解决方案”（由于我在此问题中记录的CSP错误，在FireFox中不起作用）：


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

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

如前所述，这感觉很陈旧。我们不必在冗余代码和原始代码之间进行选择。

我提到过，Chrome似乎在CSP上具有更好的生产实现，但仍有一些工作要做。另外，我自然而然地选择了这个原因，是因为我在努力提高网站的速度和性能，因此我使用了Chrome Inspector的Lightouse / Audit工具。好吧，从我进行的所有测试中，我们似乎应该已经预期将已经缓存在客户端计算机上的资源（Bootstrap，jQuery，Google Fonts等）在执行审核之前已清除，然后重新下载以进行说明在生成的报告中。很好（我理解这是理想的行为）；但是，如果我们有一个广播箱作为开发人员在执行审计时覆盖通过CDN清除共享资源的方式，那么我相信开发人员将对他们的网站性能有更深入的了解。或者至少在报告中有所区别，以确切显示花费了多少时间下载和初始化链接的资源。

这些依赖关系不止于 rel="preload"。在进行故障排除时，在某些情况下，我尝试通过CloudFlare的CDN链接到的第一个资源上的 rel="connect"替代值。在对该主题进行研究时，我发现了以下信息： the following article：


  我们要讨论的最后资源提示是预连接。 Preconnect允许浏览器在将HTTP请求实际发送到服务器之前设置早期连接。这包括DNS查找，TLS协商，TCP握手。反过来，这消除了往返延迟，并为用户节省了时间。
  
  “预连接是优化工具箱中的重要工具……它可以消除请求路径中许多昂贵的往返行程-在某些情况下，可以将请求等待时间减少数百甚至数千毫秒。 -Ilya Grigorik”


但是，毫不奇怪， preconnect在不支持 preload的浏览器中的性能类似。当您认为问题出在CSP规则而不是标记方面时，很容易将所有这些混为一谈。

我希望这可以提供一些背景信息，并有助于减轻有关CSP的挫败​​感以及迄今为止在主要浏览器中目前（缺乏）适当的实现。请随时编辑此答案以进行改进或添加更多上下文和信息，以使我们的开发人员受益。