为什么不剥离x框架选项，使我无法在此扩展程序中加载跨网站iframe？

问题描述

上下文

我正在构建一个Chrome扩展程序，该扩展程序允许用户从网络上的任何位置在第三方网站上运行自动化脚本。该扩展程序需要具有将iframe动态插入用户在其上加载第三方网站的任何页面上的功能。

问题

当我尝试从google.com的iframe中加载linkedin.com时，我得到linkedin.com拒绝连接。如果我看的话，可以看到标题中仍然存在x-frame选项，而我已经确认已经将它们去除了。

我已将以下内容添加到扩展程序后台脚本中，以允许iframe加载到任何网站中

chrome.webRequest.onHeadersReceived.addListener(function (details) {
    const headers = details.responseHeaders.filter(header => {
        let headerName = header.name.toLowerCase();
        return !(headerName === 'content-security-policy' || headerName === 'x-frame-options');
    })
    if (details.url.includes('linkedin.com')) {
        // this console log shows that I've stripped out the necessary headers correctly
        console.debug('REMOVED HEADERS: ',headers);
    }
    return {
        responseHeaders: headers
    };
},{
    urls: ['<all_urls>']
},['blocking','responseHeaders']);

我正在google.com上的控制台中使用以下代码插入要加载iframe的linkedin.com

(function () {
    var iframe = document.createElement('iframe');
    iframe.style.position = 'absolute';
    iframe.style.zIndex = 100000;
    iframe.style.top = 0;
    iframe.style.left = 0;
    iframe.height = 600;
    iframe.width = 900;
    iframe.referrerPolicy = 'no-referrer-when-downgrade';
    iframe.src = 'https://www.linkedin.com';
    document.body.appendChild(iframe);
})();

在这里您会看到控制台日志，其中显示了从iframe请求标头中删除了x-frame和CSP的已修改标头

，但不会加载iframe。它返回200，但是什么也没发生

解决方法

这实际上是可行的，勇敢的盾牌阻止了iframe加载到页面中。