Chrome扩展报CSP违规拒绝执行内联事件处理器错误如何解决

开发用于从后端获取数据的Chrome扩展时运行抛出异常，核心报错信息如下：

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'".
项目技术栈：后端采用FastAPI开发，前端采用Angular开发。

该报错属于Chrome扩展内容安全策略（CSP）拦截，当前主流Chrome扩展均要求使用Manifest V3规范，其默认CSP规则明确禁止在HTML中直接编写内联事件处理器、内联脚本块。出现该报错的核心原因是Angular构建产物包含内联代码，或是代码中存在直接写在HTML标签属性上的事件绑定，触发了CSP拦截，该问题和后端FastAPI逻辑无直接关联。

按以下顺序排查调整即可解决：

• 调整Angular构建配置，从构建层面消除内联资源
  打开项目根目录下的angular.json文件，找到生产环境构建配置对应的optimization节点，将inlineCritical属性设置为false，避免构建过程中自动注入内联的关键样式、脚本块，配置参考：

  "optimization": {
    "scripts": true,
    "styles": {
      "minify": true,
      "inlineCritical": false
    },
    "fonts": true
  }
  

  执行生产构建时追加--csp参数，启用框架自带的CSP兼容构建模式，命令如下：

  ng build --csp --configuration production
  

• 排查清理不规范的内联事件写法
  遍历扩展所有页面（弹窗页、设置页、内容脚本注入页）的HTML模板，删除直接写在标签属性上的原生事件绑定（例如<button onclick="loadData()">获取后端数据</button>这类写法），统一使用Angular标准的(click)等事件绑定语法，或是在TS代码中通过addEventListener接口注册事件，这类写法经Angular编译后不会生成内联事件处理器，完全符合CSP要求。
• 合规配置manifest.json的CSP规则
  不要尝试通过添加'unsafe-inline'值放开脚本权限，Manifest V3环境下该值会被Chrome直接忽略，甚至会导致扩展无法安装、无法通过应用商店审核。保持合规的基础配置即可：

  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
  }
  

• 后端跨域适配（解决CSP修复后的数据请求问题）
  上述脚本拦截问题解决后，若出现跨域报错，可在FastAPI中引入CORSMiddleware中间件，将扩展对应origin（格式为chrome-extension://<你的扩展32位ID>）加入允许跨域列表，即可正常拉取后端数据。

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