Angular 18升级后Subresource Integrity哈希不匹配问题求助

问题核心定位 #

你的情况关键在于dist目录下生成的index.html哈希是正确的，但服务端返回的页面哈希错误，说明问题不在Angular构建流程，而在服务端对index.html的后续处理环节。

具体排查与解决步骤 #

• 检查服务端的HTML篡改机制
  排查服务端是否存在以下操作：

  • 反向代理/CDN的HTML自动压缩、脚本注入
  • 服务器端模板引擎（如Nginx的sub_filter、Node.js模板渲染）对index.html内容的修改
    这些操作会改变Angular构建生成的index.html内容，导致内嵌的SRI哈希与实际静态文件不匹配。

• 对比服务端返回与dist目录的index.html差异
  用curl http://your-domain/index.html获取服务端返回的页面，和dist文件夹里的index.html做对比：

  • 重点核对<script>和<link>标签的integrity属性值
  • 检查静态文件的文件名是否被服务端重命名（比如去掉了哈希后缀）

• 调整Angular构建配置适配服务端处理
  如果服务端必须对HTML做压缩等处理，确保Angular构建时先完成最终优化，让SRI哈希基于最终文件生成。修改angular.json的build配置，细化optimization选项：

  "dev": {
    "optimization": {
      "scripts": true,
      "styles": {
        "minify": true,
        "inlineCritical": false
      },
      "fonts": true
    },
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "subresourceIntegrity": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "9mb",
        "maximumError": "10mb"
      },
      {
        "type": "anyComponentStyle",
        "maximumWarning": "90kb",
        "maximumError": "100kb"
      }
    ]
  }
  

• 验证webpack-subresource-integrity兼容性
  Angular 18对应的webpack版本可能与旧版插件不兼容，确保@angular/cli和@angular-devkit/build-angular更新到Angular 18的稳定版本，避免版本适配问题。

• 临时禁用服务端HTML处理排查
  暂时关闭服务端的压缩、注入等功能，测试是否还会出现哈希不匹配，以此确认问题根源是否在服务端环节。

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