[VibeCoding] 修复“integrity”属性错误

2025.06.17

技术博客

1 有一天，CSS 和 JS 突然停止加载。
2 实际误差
3 了解问题的最佳方法是询问实施者。
4 什么是完整性属性？
5 找出问题的原因以及解决问题的过程
6 奖励：哈希生成
7 概括

好久不见。
我是系统开发部的苏俊，在公司里我算是半个“人工智能专家”了。
我想简单地分享一下我在使用人工智能进行 VibeCoding 编程时遇到的一个错误。

有一天，CSS 和 JS 突然停止加载。

我在另一篇文章中描述的Chrome 扩展程序使用了 AI 和 VibeCoding，但是
当我尝试在与我通常用于开发的电脑不同的电脑上实施更改并进行测试时，我遇到了一些 CSS 和 JS 文件无法加载的问题。

我感到非常困惑，因为我没有对源代码做任何更改，而且它在我的开发电脑上显示正常。

实际误差

未能找到资源“chrome-extension://pnknjjpncnciijkpdfgfiikmhlmamaid/src/lib/bootstrap.min.css”的“integrity”属性的有效摘要，其计算出的SHA-384完整性值为“kKU3+OPzehmYTvkHC2v4pQedEFsYRKntOejtb44v+QUK8+Z3UBoSur+7Q3tDF4Rn”。该资源已被阻止。.

我用谷歌搜索了这个错误，但是找不到任何能帮我解决问题的信息。

了解问题的最佳方法是询问实施者。

我询问了人工智能，它似乎使用以下代码时会出现这种情况：

<link href="../lib/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

这

正直

看来这就是原因。有人跟我说过这件事。

什么是完整性属性？

完整性属性似乎用于验证资源的完整性，确保其未被篡改。
通过将资源的哈希值赋给该属性，浏览器会检查其检索到的资源的哈希值与完整性属性中设置的哈希值之间是否存在差异。

找出问题的原因以及解决问题的过程

这次我按照以下步骤解决了这个问题。

源代码
本身，但没有发现任何差异。
为了缩小原因范围
，我们假设当文件在服务器和 PC 之间传输时，“编码差异”会导致浏览器以不同的方式读取它们。
编码检查：
检查每个文件的编码后，我确认开发电脑使用 LF 编码，而另一台电脑使用 CRLF 编码。
纠错验证
过程的一部分，我们通过在另一台电脑上将编码更改为 LF 来确认可以正确读取该文件。

奖励：哈希生成

以下命令可以生成指定文件的哈希值。
MDN 子资源完整性请参阅

cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A

在我的环境中，上述命令没有生成预期的哈希值，但我可以使用以下命令创建它。

// 标准版本 $fileContent = Get-Content -Path file_path -Encoding Byte $hash = [System.Security.Cryptography.SHA384]::Create().ComputeHash($fileContent) [Convert]::ToBase64String($hash) 9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM // 单行版本 [Convert]::ToBase64String([System.Security.Cryptography.SHA384]::Create().ComputeHash([System.IO.File]::ReadAllBytes("file_path"))) 9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM