时间戳

首页 > 解决方案 > 如何使用 SRI 哈希和“onload”属性

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

问题描述

按照 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' '[...list of other SRI hashes...]' sha384-npWtxZLLH7z2/zORM47igyJ5eTYuOl9qxzn4A632S7yMmMKBDHhL5ZHC6eBSxc/C 'unsafe-内联'http：https：“。请注意，如果源列表中存在散列值或随机数值，则忽略“不安全内联”。

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

谢谢 ！

标签： attributescontent-security-policysubresource-integrity

解决方案

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

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

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

将“加载”的内联事件处理程序移动到单独的脚本，如本主题中的“点击” 。然后可以通过“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'>

推荐阅读