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

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=="
    />

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

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

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

Answer 1

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

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' 用于内联 scripts/styles，webpack plugins 可以动态生成这些。

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

How to add preconnect and preload to content security policy?

html

security

content-security-policy

webpack