在 onHeadersReceived 中编辑内容安全策略答案

【问题标题】：Edit Content Security Policy in onHeadersReceived在 onHeadersReceived 中编辑内容安全策略
【发布时间】：2019-07-21 13:58:58
【问题描述】：

我正在为自己开发一个小型 chrome 扩展程序，以便将 iframe 嵌入到网站中。内容安全策略使这变得困难，因为一些网站上的 frame-src 指令不允许加载我的内容。错误信息如下：

拒绝构建“mydomain”，因为它违反了以下内容安全策略指令：“frame-src someotherdomain”。

到目前为止，我已经尝试将我的主机添加到 frame-src 指令和 webRequest.onHeadersReceived 中的 frame-ancestors。

manifest.json 中的权限如下：

    "permissions": ["contextMenus", "webRequest", "<all_urls>", "tabs", "webRequestBlocking"],

编辑background.js中的标题：

chrome.webRequest.onHeadersReceived.addListener(
    editCSPHeader,
    {
        urls: [ "<all_urls>" ],
        types: [ "sub_frame" ]
    },
    ["blocking", "responseHeaders"]
  );

function editCSPHeader(r) {
    const headers = r.responseHeaders; // original headers
    for (let i=headers.length-1; i>=0; --i) {
        let header = headers[i].name.toLowerCase();
        if (header === "content-security-policy") { 
            headers[i].value = headers[i].value.replace("frame-src", "frame-src https://*.mydomain.xy/*");
        }
    }
    return {responseHeaders: headers};
}

在 iframe 仍未正确加载后，我使用 chrome://net-export 进行了捕获。此处的标题显示为未修改，即使它们应该被编辑。

【问题讨论】：

您可以嵌入一个指向您自己的扩展 html 页面的 iframe（当然在web_accessible_resources 中列出），您可以在该页面中嵌入一个 iframe。当其他扩展修改标头时，不需要 webRequest 脆弱的标头操作。
如果你想将你的 iframe 嵌入到主框架中，你需要改变主框架中的 CSP 标头。将上面代码中的 types: [ "sub_frame" ] 更改为 types: [ "main_frame" ] 即可。
将类型从sub_frame更改为main_frame确实解决了这个问题。
由于我的评论似乎已经解决了这个问题，我将其作为建议发布为答案here。

标签： javascript google-chrome-extension

【解决方案1】：

您可以从中加载 iframe 的来源受到其父框架的 CSP 的限制。

如果要将 iframe 嵌入到主框架中，则需要更改主框架中的 CSP 标头。将上面代码中的 types: [ "sub_frame" ] 更改为 types: [ "main_frame" ] 即可。

另外请注意，使用chrome.webRequest.onHeadersReceived 操作标头不是很可靠。一次只有一个扩展可以修改它们，因此其他扩展可能会破坏您的扩展。

【讨论】：