如何使用 SRI 哈希和 "onload" 属性

Question

遵循 Google Lighthouse 的建议以获得对我的网站的更快响应，我正在使用这个技巧来 post-加载字体：

<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 列表并刷新，但它失败了：

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' '[...list of other SRI hashes...]' sha384-npWtxZLLH7z2/zORM47igyJ5eTYuOl9qxzn4A632S7yMmMKBDHhL5ZHC6eBSxc/C 'unsafe-inline' http: https:". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

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

谢谢！

Answer 1

Why my SRI doesn't work when I add it ? :(

在 style-src 指令的示例中进行了解释。与script-src情况相同。

How to permit this inline "onload" little script without authorize all inline scripts ?

将 '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：请注意，内容安全策略不支持 'hash-value' 通过 SRI 的外部样式表。仅支持 built-in <style>...</style>。对于脚本 'hash-value' is supported for both: buil-in <script>...</script> 和外部 <script src='...' integrity='hash_here'>

如何使用 SRI 哈希和 "onload" 属性

How to work with SRI hash and "onload" attribute

attributes

content-security-policy

subresource-integrity