如何使用 SRI 哈希和“onload”属性

Question

按照 Google Lighthouse 的建议为我的网站获得更快的响应，我正在使用这个技巧来加载字体：

<link as="style"
  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&amp;display=swap"
  onload="this.onload=null;this.rel='stylesheet'"
  rel="preload">

但由于我严格的 CSP 规则，它失败了，我不知道如何为这个“onload”属性添加 sha384 哈希：/

我尝试像这样获取 onload 内容哈希：

echo "this.onload=null;this.rel='stylesheet'" | openssl dgst | openssl enc -base64 -A

输出：npWtxZLLH7z2/zORM47igyJ5eTYuOl9qxzn4A632S7yMmMKBDHhL5ZHC6eBSxc/C

然后我将它添加到 CSP SRI 列表中并刷新，但它失败了：

拒绝执行内联事件处理程序，因为它违反了 以下内容安全策略指令：“script-src 'strict-dynamic' '[...其他 SRI 哈希列表...]' sha384-npWtxZLLH7z2/zORM47igyJ5eTYuOl9qxzn4A632S7yMmMKBDHhL5ZHC6eBSxc/C 'unsafe-inline' http: https:"。请注意，如果 源列表中存在散列值或随机数值。

如何在不授权所有内联脚本的情况下允许这个内联“onload”小脚本？ 为什么我的 SRI 在添加时不起作用？ :(

谢谢！

Answer 1

为什么我的 SRI 在添加时不起作用？ :(

在 style-src 指令的示例中解释了 here。跟script-src的情况一样。

如何在没有授权的情况下允许这个内联“onload”小脚本 内联脚本？

在topic 中将“load”的内联事件处理程序移动到单独的脚本中，例如“click”。然后可以通过'nonce-value'或'sha256/sha384/sha512-value'来允许。

更新：

我希望明确更改要做（将内联处理程序移动到单独的脚本）：

<link as="style" id="fonts"
  href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&amp;display=swap"
  rel="preload">

<script nonce="sever_generated_value"> // if 'nonce-value' used.
  // Or just calculate hash sha256 (or sha384/512) of this script
  // and insert it into 'script-src' as 'sha256-calculated_value' 
  fonts.addEventListener("load", function() {
     this.onload=null;
     this.rel='stylesheet';
     });
</script>

'nonce-value'/'hash-value' 可以允许这种单独的内联脚本。

PS：请注意，内容安全策略不支持通过 SRI 为 external 样式表提供“哈希值”。仅支持内置 <style>...</style>。对于脚本，“哈希值”is supported for both：内置<script>...</script> 和外部<script src='...' integrity='hash_here'>