浏览器扩展中向任意URL发起网络请求的问题求助

问题1：CSP 违规错误 #

你看到的错误并非来自提供的 fetch 代码，而是扩展中存在内联 JavaScript（如 javascript: 链接、内联事件处理器或 <script> 标签内的代码），违反了浏览器扩展默认的内容安全策略（CSP）。

修复方案： #

1. 移除所有内联 JavaScript

   • 将内联事件处理器（如 onclick="func()"）替换为外部 JS 文件中的 addEventListener 调用。
   • 将 <script> 标签内的代码移到单独的 .js 文件中。
   • 彻底避免使用 javascript: 格式的 URL。

2. 若必须保留内联代码（不推荐）

   • 在 manifest.json 的 CSP 配置中添加对应代码的哈希值或随机数（nonce）。例如：

     "content_security_policy": {
       "extension_pages": "script-src 'self' 'sha256-你的代码哈希值'; object-src 'none'"
     }
     

   注意：使用 unsafe-inline 会严重降低扩展安全性，不建议使用。

问题2：自托管实例的动态 URL 权限 #

由于每个用户的自托管 URL 不同，无法在 manifest.json 中预先定义所有允许的域名。可以通过动态权限请求解决：

Manifest V3 实现步骤： #

1. 在 manifest.json 中添加基础权限：

   "host_permissions": ["<all_urls>"],
   "permissions": ["permissions"]
   

   这不会直接授予所有域名权限，只是允许后续请求特定域名的权限。

2. 当用户输入自托管 URL 后，调用浏览器权限 API 请求访问该域名：

   const userHostUrl = "https://用户的自托管实例地址.com";
   const requiredPermissions = {
     origins: [`${userHostUrl}/*`]
   };
   
   // Chrome/Firefox 兼容的权限请求
   (chrome.permissions || browser.permissions).request(requiredPermissions)
     .then(granted => {
       if (granted) {
         // 权限已授予，执行请求
         fetch(`${userHostUrl}/api/auth/status`)
           .then(response => {
             if (!response.ok) throw new Error(`HTTP 错误：${response.status}`);
             // 处理响应逻辑
           })
           .catch(err => console.error("请求失败：", err));
       } else {
         // 用户拒绝权限，提示错误
         alert("需要授予该域名访问权限才能继续");
       }
     });
   

Manifest V2 替代方案： #

Manifest V2 允许直接在 permissions 中添加 <all_urls>，但这会授予扩展访问所有网站的权限，安全性较低。更优的方式是引导用户在浏览器扩展设置中手动添加自托管域名，或使用动态权限请求（部分浏览器支持）。

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