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

Question

遵循谷歌灯塔的建议，为我的网站获得更快的响应，我使用这个技巧来发布加载字体：

<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规则，它失败了，我不知道如何为这个"添加sha384哈希；"加载"；属性：/

我尝试获得onload内容哈希，如下所示：

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

输出：npWtxZLLH7z2/zORM47igyJ5eTYuOl9qxzn4A632S7yMmMKBDHhL5ZHC6eBSxc/C

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

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令："；脚本src"严格动态"[…其他SRI哈希列表…]"sha384-npWtxZLLH7z2/zORM47igyJ5eTYuOl9qxzn4A632S7yMmMKBDHhL5ZHC6eBSxc/C"不安全的内联"http:https:"。请注意，如果源列表中存在哈希值或随机数值。

如何允许这种内联"加载"；没有授权所有内联脚本的小脚本？为什么添加SRI时SRI不起作用？：(

谢谢！

Answer 1

为什么添加SRI时SRI不起作用？：(

这里以样式的src指令为例进行了解释。与脚本src的情况相同。

如何允许这种内联"加载"；没有授权的小脚本内联脚本？

将"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为外部样式表提供"哈希值"。仅内置<style>...</style>支持。对于脚本，内置<script>...</script>和外部<script src='...' integrity='hash_here'>都支持"哈希值">