Chrome扩展CSP限制导致Elfsight应用无法加载的解决咨询

安全阿岳

2026-7-29

解决方案

以下是针对你遇到的Chrome扩展Manifest V3加载Elfsight脚本被CSP拦截问题的解决步骤：

修正CSP配置格式
Manifest V3中extension_pages的CSP需要明确组合多个指令，确保script-src和script-src-elem都包含目标地址，同时保留必要的默认规则。正确的配置示例：
```
"content_security_policy": {
  "extension_pages": "script-src 'self' https://static.elfsight.com; script-src-elem https://static.elfsight.com; object-src 'none'; style-src 'self' 'unsafe-inline';"
}
```
注：style-src中的'unsafe-inline'是React样式注入的常规需求，若你的项目无需可移除。
优先使用script-src指令
部分场景下Chrome对script-src-elem的解析存在兼容性差异，直接在script-src中包含目标地址即可覆盖脚本加载规则，简化后的配置：
```
"content_security_policy": {
  "extension_pages": "script-src 'self' https://static.elfsight.com; object-src 'none'; style-src 'self' 'unsafe-inline';"
}
```
确认脚本加载上下文
若你是在**内容脚本（Content Script）**中加载该脚本，extension_pages的CSP不会生效。此时需通过chrome.scripting.executeScript API注入外部脚本，示例代码：
```
chrome.scripting.executeScript({
  target: { tabId: tabId },
  files: ['https://static.elfsight.com/platform/platform.js']
});
```
同时要在manifest.json中添加对应权限：
```
"permissions": ["scripting"]
```
强制刷新扩展配置
修改manifest.json后，必须在Chrome扩展管理页（chrome://extensions/）点击「重新加载」按钮，确保新的CSP规则生效。
排查内联代码残留
即便设置了INLINE_RUNTIME_CHUNK=false，仍需检查构建后的index.html是否存在未预期的内联脚本。若有，可临时在script-src中添加'unsafe-inline'排查问题，或调整React构建配置彻底移除内联代码。