webpack-subresource-integrity插件在Nuxt.js中未生效问题排查

问题详情 #

在Nuxt.js（v2.15.8）的Webpack配置中添加webpack-subresource-integrity插件以启用子资源完整性（SRI），配置代码如下：

extend(config) {
  config.output!.crossOriginLoading = "anonymous";
},
plugins: [
  new SriPlugin({
    hashFuncNames: ["sha256", "sha512"],
  }),
],

构建过程无报错，但浏览器DOM中的<script>标签并未出现预期的integrity和crossorigin属性。预期标签格式：

<script src="/_nuxt/app.js" integrity="sha256-QcoWoREdQOlM2GAA/i4qmOYRMED/cckK1XPNKTCVh9g= sha512-S163FQo9fj70zvaK4IouYKyk2O2jyKGNimr/z6SJD6xHeN7p4sQOS979HKwDhpXTS7OUegEleaP1q/K6qjVjxw==" crossorigin="anonymous">

调试发现webpack-subresource-integrity和html-webpack-plugin内部生成的script标签符合预期，但浏览器实际显示的标签缺失相关属性。

使用版本：

"nuxt": "^2.15.8", ("@nuxt/webpack": "2.15.8")
"webpack-subresource-integrity": "1.5.2"

解决思路与方案 #

1. 调整插件加载顺序 #

Nuxt内部依赖html-webpack-plugin，webpack-subresource-integrity需要在它之前初始化才能正确修改HTML输出。通过build.extend方法手动添加插件并调整顺序：

build: {
  extend(config, { isDev, isClient }) {
    // 仅在生产环境客户端构建启用SRI
    if (!isDev && isClient) {
      config.output.crossOriginLoading = 'anonymous';
      const SriPlugin = require('webpack-subresource-integrity');
      // 用unshift确保插件优先加载
      config.plugins.unshift(
        new SriPlugin({
          hashFuncNames: ['sha256', 'sha512'],
        })
      );
    }
  }
}

2. 检查自定义HTML模板是否干扰 #

如果项目使用了自定义app.html模板，需确保模板没有覆盖或修改script标签的渲染逻辑。默认模板示例：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

避免在模板中手动编写script标签，让Webpack插件自动处理。

3. 排查SSR渲染的属性丢失问题 #

如果.nuxt/dist/client/index.html中的script标签已包含integrity属性，但浏览器显示缺失，说明SSR过程中Nuxt重置了标签属性。可通过以下配置禁用Nuxt自动注入脚本的逻辑：

render: {
  injectScripts: false
}

注意：此配置会关闭Nuxt自动脚本注入，需手动在app.html中添加对应脚本引用，确保路径和属性正确。

4. 升级插件版本 #

webpack-subresource-integrity@1.5.2版本较旧，可能与Nuxt 2.15.8的Webpack版本存在兼容性问题。尝试升级到最新兼容版本：

npm install webpack-subresource-integrity@latest --save-dev

内容的提问来源于stack exchange，提问作者Tyrion Vu Van Phong