添加Sub-resource Integrity(SRI)后CSS加载失败问题求助

问题原因 #

控制台显示内容长度匹配但哈希校验不通过，说明生成哈希时使用的CSS文件内容，与浏览器实际读取的文件存在细微差异，常见诱因包括：

• 文件换行符格式不一致（比如本地是CRLF，浏览器读取的是LF，反之亦然）
• 生成哈希时用了错误的文件路径，读取了其他文件
• 文件带有隐藏的UTF-8 BOM头

解决步骤 #

1. 确认文件内容一致性 #

用文本编辑器（如VS Code）打开tables.css，检查右下角的换行符标识（显示LF或CRLF），确保和生成哈希时的文件格式统一。如果是从其他系统复制的文件，建议改为LF（macOS/Unix默认格式）。

2. 重新生成正确的哈希值 #

先进入CSS文件所在的目录：

cd /Users/ambrosine/Developer/Web/

再执行哈希生成命令：

openssl dgst -sha384 -binary tables.css | openssl base64 -A

把生成的新哈希值替换到HTML的integrity属性中。

3. 手动验证哈希正确性 #

如果仍有问题，可直接复制CSS纯内容计算哈希，对比之前的结果：

echo -n "table,
td,
th {
    border: 1px solid black;
}

td,
th {
    padding: 5px;
}" | openssl dgst -sha384 -binary | openssl base64 -A

4. 补充crossorigin属性（可选但推荐） #

即使是本地文件，为符合SRI规范，建议添加该属性：

<link rel="stylesheet" href="tables.css"
      integrity="生成的正确哈希值"
      crossorigin="anonymous">

内容的提问来源于stack exchange，提问作者Ter Maxima