如何修复Vue+Quasar中WebAssembly.instantiate()引发的CSP RuntimeError

一、禁用Webpack的WebAssembly支持 #

你推测的WebAssembly调用来源是对的——Webpack 4默认会处理WebAssembly模块，进而触发WebAssembly.instantiate()。要在Quasar项目中彻底禁用这一行为，需修改项目的Webpack配置：

1. 打开项目根目录的quasar.conf.js文件
2. 在build配置块的extendWebpack方法中添加以下配置：

module.exports = function (ctx) {
  return {
    // ...其他原有配置
    build: {
      // ...其他build配置
      extendWebpack(cfg) {
        // 移除Webpack默认的wasm文件处理规则
        cfg.module.rules = cfg.module.rules.filter(rule => !rule.test.test('.wasm'));
        // 从解析扩展名中移除.wasm，避免Webpack尝试解析这类文件
        cfg.resolve.extensions = cfg.resolve.extensions.filter(ext => ext !== '.wasm');
        // 禁用WebAssembly实验特性（若配置存在）
        if (cfg.experiments) {
          cfg.experiments.asyncWebAssembly = false;
          cfg.experiments.syncWebAssembly = false;
        }
      }
    },
    // 若开发环境也需要禁用，可在dev配置块中添加同样的extendWebpack逻辑
    dev: {
      extendWebpack(cfg) {
        // 复制上述build中的extendWebpack代码
      }
    }
  }
}

修改后重新构建项目，Webpack将不再处理WebAssembly模块，从根源上消除CSP报错。

二、wasm-unsafe-eval的安全性说明 #

如果项目依赖的第三方库必须使用WebAssembly，无法完全禁用，推荐用wasm-unsafe-eval替代unsafe-eval，二者的安全性差异显著：

• unsafe-eval允许所有形式的动态代码执行（如eval()、new Function()等），风险极高，容易被注入恶意代码
• wasm-unsafe-eval仅允许WebAssembly模块的编译与实例化，不开放其他动态执行权限，攻击面大幅缩小
• 只要你确保项目中使用的WebAssembly模块来自可信来源（官方依赖、自行编译的代码），使用wasm-unsafe-eval是安全的

对应的CSP配置可调整为：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'wasm-unsafe-eval'; object-src 'none'; base-uri 'none';" />

三、额外排查：确认WebAssembly来源 #

Quasar 1.x核心库默认不会引入WebAssembly，若仍出现相关调用，建议排查：

• 查看package.json中的依赖项，确认是否有明确使用WebAssembly的第三方库
• 用webpack-bundle-analyzer分析打包产物，定位是否存在.wasm文件或相关引用

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