Chrome扩展：响应接收时用JS修改<meta>标签适配CSP

嘿，针对你这个Chrome扩展的CSP适配需求，我来分享下怎么通过修改页面的<meta>标签来调整内容安全策略，同时尽量降低XSS风险。

核心思路 #

页面的CSP通常有两种生效方式：HTTP响应头，或者<meta http-equiv="Content-Security-Policy">标签。你已经搞定了响应头的处理，但meta标签的CSP也会独立生效，所以需要在页面加载初期就修改这些标签，确保第三方JS能被允许执行。

具体实现步骤（以Manifest V3为例） #

1. 配置扩展权限

首先要确保你的manifest.json包含必要的权限，这样才能注入脚本修改DOM：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["activeTab", "scripting", "webRequest"],
  "host_permissions": ["<all_urls>"], // 替换为你需要作用的特定域名范围
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  }
}

2. 注入脚本修改Meta标签

关键是要在页面DOM开始构建时注入脚本（runAt: 'document_start'），这样能在meta标签的CSP生效前修改它。这里是具体的代码示例：

在你的弹窗脚本（比如popup.js）中：

document.querySelector('#launch-panel').addEventListener('click', async () => {
  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });

  // 先注入修改CSP的脚本
  await chrome.scripting.executeScript({
    target: { tabId: activeTab.id },
    func: adjustMetaCSP,
    runAt: 'document_start'
  });

  // 再添加你的浮动iframe面板
  await chrome.scripting.executeScript({
    target: { tabId: activeTab.id },
    func: renderFloatingIframe
  });
});

// 核心：修改meta标签的CSP逻辑
function adjustMetaCSP() {
  // 监听head节点的变化，捕获动态添加的meta标签
  const headObserver = new MutationObserver((mutations) => {
    mutations.forEach(mut => {
      mut.addedNodes.forEach(node => {
        if (node.tagName === 'META' && node.httpEquiv?.toLowerCase() === 'content-security-policy') {
          updateCSPContent(node);
        }
      });
    });
  });

  headObserver.observe(document.head, { childList: true, subtree: true });

  // 处理页面已有的meta标签
  document.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(updateCSPContent);

  function updateCSPContent(metaTag) {
    let cspContent = metaTag.content;
    const trustedThirdParty = 'https://your-third-party-host.com'; // 替换为你的第三方JS域名

    // 避免重复添加同一源
    if (cspContent.includes(trustedThirdParty)) return;

    // 修改script-src指令，添加可信第三方源
    if (cspContent.includes('script-src')) {
      cspContent = cspContent.replace(/script-src ([^;]+)/, `script-src $1 ${trustedThirdParty}`);
    } else {
      // 如果没有script-src，直接添加
      cspContent += `; script-src ${trustedThirdParty}`;
    }

    metaTag.content = cspContent;
  }
}

// 生成浮动iframe的逻辑
function renderFloatingIframe() {
  const iframe = document.createElement('iframe');
  iframe.src = chrome.runtime.getURL('panel.html'); // 替换为你的面板URL
  iframe.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px;
    height: 480px;
    border: none;
    z-index: 99999;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
  `;
  document.body.appendChild(iframe);
}

关键注意事项 #

• 降低XSS风险：尽量不要直接允许整个第三方域名，优先使用脚本哈希或者随机nonce来限制可执行的JS。比如预先计算第三方JS的SHA-256哈希，然后把'sha256-xxxxxx'加入script-src，这样只有匹配该哈希的脚本才能执行，大大降低劫持风险。
• CSP优先级：如果页面同时通过响应头和meta标签设置CSP，浏览器会取最严格的规则，所以要确保你同时处理了响应头（你之前的webRequest逻辑）和meta标签的CSP。
• Manifest V2适配：如果你还在使用V2，把chrome.scripting.executeScript换成chrome.tabs.executeScript，背景页配置也需要调整。
• 测试不同网站：有些网站的CSP可能包含script-src-elem、script-src-attr等细分指令，你可能需要根据实际情况调整这些指令的规则。

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