Chrome扩展选项页Content-Security-Policy配置及外部脚本加载问题

核心问题分析 #

Chrome扩展的**extension页面（包括options.html）**会忽略页面内的<meta>标签定义的CSP规则，强制使用manifest.json中的CSP配置，且extension_pages的CSP有严格限制：默认不允许加载第三方外部脚本源，script-src仅支持'self'、'unsafe-eval'（需显式声明）、'wasm-unsafe-eval'，以及Chrome官方白名单内的极少数源。这就是你所有meta标签配置无效的原因。

另外，你之前的manifest.json配置存在错误：重复定义了extension_pages键，后一个会覆盖前一个，正确的配置格式应该是单条完整的CSP字符串。

可行解决方案 #

方案1：本地托管第三方脚本（你当前的做法） #

安全风险

• 若脚本来自可信的官方源，且你在复制时验证了脚本的完整性（比如对比官方提供的哈希值），风险极低。
• 风险点在于：原脚本更新后你无法自动同步，可能导致功能失效；若原脚本被恶意篡改后你不知情就复制，会引入恶意代码。建议定期检查原脚本更新，验证哈希值，确保脚本未被篡改。

Chrome Web Store审核合规性

这种做法是合规的，只要满足以下条件：

• 脚本无恶意代码、不违反Chrome Web Store政策（如不非法收集用户数据）。
• 在扩展的隐私政策中明确说明使用的第三方服务（若脚本涉及用户数据交互）。

方案2：使用Sandboxed iframe加载外部脚本 #

如果需要保持脚本的自动更新（避免本地托管的同步问题），可以用sandboxed iframe来加载外部脚本，sandbox页面的CSP限制更宽松：

1. 在扩展目录中创建sandbox-widget.html：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://js.example.com;">
</head>
<body>
  <!-- 插入小部件的容器元素 -->
  <div id="widget-container"></div>
  <script src="https://js.example.com/1.0.0/widget.prod.min.js"></script>
  <!-- 初始化小部件的代码 -->
</body>
</html>

2. 在manifest.json中配置sandbox规则：

"sandbox": {
  "pages": ["sandbox-widget.html"],
  "content_security_policy": "script-src 'self' https://js.example.com; object-src 'none';"
}

3. 在options.html中嵌入这个iframe：

<iframe src="sandbox-widget.html" width="100%" height="500" frameborder="0" style="border:none;"></iframe>

这种方式既满足加载外部脚本的需求，又不违反extension_pages的CSP规则。

纠正你的manifest配置错误 #

即使无法加载外部脚本，正确的extension_pages CSP配置应该是：

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

注意不要重复定义extension_pages键，否则会被覆盖。

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