Chrome扩展加载tp.media外部脚本触发CSP安全错误，求解决方案

问题分析 #

错误提示明确说明，你的扩展内容安全策略（CSP）的script-src指令仅允许加载来自'self'的脚本，而你尝试加载的https://tp.media/content?xxx属于外部资源，因此被拦截。

正确解决方案 #

Chrome扩展的CSP配置需要在manifest.json中明确声明允许的外部脚本源，具体步骤如下：

1. 修改manifest.json的CSP配置
   在你的扩展manifest.json文件中，找到content_security_policy字段（无则添加），将https://tp.media添加到script-src指令中：

   {
     "manifest_version": 3,
     // 其他扩展配置项...
     "content_security_policy": {
       "extension_pages": "script-src 'self' https://tp.media; object-src 'none';"
     }
   }
   

   若你的扩展使用Manifest V2，配置格式略有差异：

   {
     "manifest_version": 2,
     // 其他扩展配置项...
     "content_security_policy": "script-src 'self' https://tp.media; object-src 'none'"
   }
   

2. 验证配置生效
   修改完成后重新加载扩展，再次尝试加载目标外部脚本，此时CSP规则应允许该资源正常加载。

常见误区提醒 #

• 不要尝试通过内联脚本或动态创建script标签绕开CSP，Chrome扩展的CSP对此类操作限制严格，且不符合安全规范。
• 仅添加必要的外部源，避免过度放宽CSP引发安全风险。

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