如何在内容安全策略中添加预连接和预加载？答案

【问题标题】：How to add preconnect and preload to content security policy?如何在内容安全策略中添加预连接和预加载？
【发布时间】：2021-02-21 04:02:10
【问题描述】：

是否可以将 preconnect 和 preload 添加到 CSP 元标记？

<!DOCTYPE html>
<html>
  <head>
<meta
      http-equiv="Content-Security-Policy"
      content="base-uri 'self'; object-src 'none'; script-src 'nonce-pb+8iY9WcWmhlEX6d1cjqA=='; style-src 'nonce-IOaKe0RIRR+SDo/VCRRk/g==' 'nonce-1akTtzYTJ2M1nq/GqmKH8Q==' 'nonce-bebsmDPpynkvU6DpcJMXOA=='"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
      rel="preconnect"
      as="fetch"
      href="https://fonts.gstatic.com"
      crossorigin
    />
    <link
      rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;700&family=Roboto+Slab:wght@400;500&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;700&family=Roboto+Slab:wght@400;500&display=swap"
      media="print"
      onload="this.media='all'"
      nonce="IOaKe0RIRR+SDo/VCRRk/g=="
    />

我可以添加“style-src”策略，但不确定如何为preconnect 和preload 添加https://fonts.gstatic.com 和https://fonts.googleapis.com 域。

上下文：这可能与 Webpack 有关，因为我使用 webpack 作为捆绑器，使用 index.html 作为模板。其次，我正在构建一个静态 SPA 并在 s3 中提供服务并在云端进行缓存。

我正在使用想法来加快谷歌字体加载速度 https://csswizardry.com/2020/05/the-fastest-google-fonts

【问题讨论】：

标签： html security webpack content-security-policy

【解决方案1】：

通常，您可以使用'nonce-value' 和/或主机源来允许外部样式表。
您不必为每个脚本/样式生成唯一的随机数，您可以为所有脚本/样式使用一个生成的值。但是您需要在每个页面加载时生成一个新的随机数。

AFAIK 不可能每次都为已经生成的 webpack 包提供新的'nonce-value'。所以只需使用主机源而不是随机数：

<meta
  http-equiv="Content-Security-Policy"
  content="base-uri 'self'; object-src 'none';
     script-src 'self' host-source_1 host-source_2 'sha256-value_of_inline_script_1' 'sha256-value_of_inline_script_2';
     style-src 'self' https://fonts.googleapis.com;
     font-src https://fonts.gstatic.com data:;
  "/>

注意：使用'hash-value' 用于内联脚本/样式，webpack 使用plugins 动态生成这些。

【讨论】：