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

Question

是否可以将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=="
    />

I can add 'style-src' policies, but am unsure how to add the https://fonts.gstatic.com and the https://fonts.googleapis.com domains for preconnect and preload .

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

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

Answer 1

1. 通常，您可以使用'nonce-value'和/或主机源来允许外部样式表。

2. 您不必为每个脚本/样式生成唯一的随机数，您可以为所有脚本/样式使用一个生成的值。 但是您需要在每个页面加载时生成一个新的随机数。

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 有插件可以即时生成这些。