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

好久不见。
我是系统开发部的苏俊，在公司里我很快就成了人工智能专家。
我想简单地和大家分享一下我在使用人工智能进行 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">

这

正直

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

什么是完整性属性？

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

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

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

1. 源代码
   ，但没有发现任何差异。
2. 缩小原因范围：
   我们假设，当文件在服务器或 PC 之间传输时，由于“编码差异”，浏览器对内容的读取方式不同。
3. 检查编码
   当我检查每个文件的编码时，我发现开发电脑上的编码是 LF，而另一台电脑上的编码是 CRLF。
4. 确认修复方案
   ：作为一种变通方法，我们确认通过将另一台电脑的分区更改为 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

概括

从这个案例中我们学到了以下几点：

• 利用完整性属性实现资源验证功能
• 即使对于内容相同的资源，编码方式的差异（CRLF 与 LF）也会影响哈希值。
• 微小的配置差异都可能导致严重的错误，因此要注意不同环境之间的差异。

VibeCoding 非常有趣，但也会遇到像这样仅靠 AI 辅助难以解决的问题。这正好提醒我们基础知识的重要性。希望
这篇文章对您有所帮助！