使用 Chrome 扩展删除所有 CSP 标头以允许 iframe

Question

我正在尝试创建一个 Chrome 扩展，它将 iframe 侧边栏注入到任何页面上。我遇到了一些网站使用 CSP 指令来限制可以构建的内容的问题（下面的示例是 LinkedIn）。我想我会尝试使用 onBeforeSendHeaders 来捕获所有

content-security-policy

标头并删除它们，但我没有取得任何成功。

拒绝框架“https://example.com/”，因为它违反了 以下内容安全策略指令：“frame-src 'self' *.doubleclick.net www.slideshare.netradar.cedexis.complatform.linkedin.commedia-exp1.licdn.commedia-exp2.licdn.com m.c.exp1.licdn.com m.c.exp2.licdn.com media-lcdn.licdn.com m.c.lcdn.licdn.com cdn.embedly.com https://www.linkedin.com lichat.azurewebsites.net www.youtube.com www.facebook.com player.vimeo.com embed.ted.com livestream.com embed.gettyimages.com w.soundcloud.com www.lynda.com media.licdn.com”。

这是我的清单文件：

{
    "manifest_version": 2,
    "name": "My Ext",
    "description": "My ext desc",
    "version": "0.1",
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["jquery-3.3.1.min.js","content.js","scripts.js"],
        "css": ["content.css"]
    }],
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": ["tabs","activeTab","storage","webRequest","webRequestBlocking","<all_urls>"],
    "browser_action": {
        "default_icon": {
            "16": "images/icon16.png",
            "32": "images/icon32.png",
            "48": "images/icon48.png",
            "128": "images/icon128.png"
        }
    },
    "icons": {
        "16": "images/icon16.png",
        "32": "images/icon32.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    }
}

这是我的background.js中尝试删除标题的代码：

chrome.webRequest.onBeforeSendHeaders.addListener(
function(details) {
    console.log(details.requestHeaders);
  for (var i = 0; i < details.requestHeaders.length; ++i) {
    if (details.requestHeaders[i].name === 'content-security-policy') {
      details.requestHeaders.splice(i, 1);
      break;
    }
  }
  return {requestHeaders: details.requestHeaders};
},
{urls: ["<all_urls>"]},
["blocking", "requestHeaders"]);

有什么想法我哪里出错了吗？

编辑：我还尝试了一种使用

onHeadersReceived

添加允许 example.com 的附加标头的方法。我可以看到标头已添加，并且它阻止加载另一个框架，但 example.com 仍然被拒绝 - 我认为是因为它仍然与前一个标头冲突？

该版本的清单是相同的，但这是该版本的background.js：

chrome.webRequest.onHeadersReceived.addListener(function(details) {
    console.log(details.responseHeaders);
    details.responseHeaders.push({
        name: 'content-security-policy',
        value: 'frame-src example.com'
    });
    return { responseHeaders: details.responseHeaders };
}, {
    urls: ['*://*.linkedin.com/*']
}, [
    "responseHeaders","blocking"
]);

这是控制台日志的内容和背景的屏幕截图：

Answer 1

@Matt 你找到这个问题的答案了吗？如果是的话，您可以发布您是如何解决的