我是Intab的作者，这是一个Chrome扩展程序，它可以让您内联查看链接而不是打开新标签页。幕后并没有太多花哨的东西，只是一个iframe将用户单击的URL加载进来。
它运行良好，但遇到设置X-Frame-Options头为DENY或SAMEORIGIN的网站时就会出问题。一些大型网站，如Google和Facebook都使用了这个选项，这使得体验有些不流畅。
有什么方法可以解决这个问题吗？既然我正在使用Chrome扩展程序，是否有任何浏览器级别的东西可以访问以帮助解决这个问题？期待任何想法或帮助！
此答案适用于ManifestV2和已安装政策的MV3扩展。
对于普通的ManifestV3扩展，请查看其他答案。
Chrome提供了webRequestAPI来拦截和修改HTTP请求。您可以删除X-Frame-Options标头以允许在iframe中内联页面。
chrome.webRequest.onHeadersReceived.addListener(
function(info) {
var headers = info.responseHeaders;
for (var i=headers.length-1; i>=0; --i) {
var header = headers[i].name.toLowerCase();
if (header == 'x-frame-options' || header == 'frame-options') {
headers.splice(i, 1); // Remove header
}
}
return {responseHeaders: headers};
}, {
urls: [
'*://*/*', // Pattern to match all http(s) pages
// '*://*.example.org/*', // Pattern to match one http(s) site
],
types: [ 'sub_frame' ]
}, [
'blocking',
'responseHeaders',
// Modern Chrome needs 'extraHeaders' to see and change this header,
// so the following code evaluates to 'extraHeaders' only in modern Chrome.
chrome.webRequest.OnHeadersReceivedOptions.EXTRA_HEADERS,
].filter(Boolean)
);
webRequest 和 webRequestBlocking 权限，以及您打算拦截的 URL 模式，例如上面的示例中的 "*://*/*" 或 "*://www.example.org/*"。请注意，本答案末尾还有一个警告！
适用于Chrome 96及更高版本的manifest.json，
在安装过程中不会显示单独的"阻止页面内容"权限。
"minimum_chrome_version": "96",
"permissions": ["declarativeNetRequestWithHostAccess"],
"host_permissions": ["*://*.example.com/"],
"background": {"service_worker": "bg.js"},
使用 initiatorDomains 和 requestDomains 的 Chrome 101 及更高版本的 bg.js
（不要忘记在 manifest.json 中添加 "minimum_chrome_version": "101"）
const iframeHosts = [
'example.com',
];
chrome.runtime.onInstalled.addListener(() => {
const RULE = {
id: 1,
condition: {
initiatorDomains: [chrome.runtime.id],
requestDomains: iframeHosts,
resourceTypes: ['sub_frame'],
},
action: {
type: 'modifyHeaders',
responseHeaders: [
{header: 'X-Frame-Options', operation: 'remove'},
{header: 'Frame-Options', operation: 'remove'},
// Uncomment the following line to suppress `frame-ancestors` error
// {header: 'Content-Security-Policy', operation: 'remove'},
],
},
};
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: [RULE.id],
addRules: [RULE],
});
});
如果您的扩展程序需要与这些旧版本兼容，请使用以下内容。
适用于Chrome 84及更高版本的manifest.json，
在安装过程中显示了一个单独的权限，用于"阻止页面内容"
"permissions": ["declarativeNetRequest"],
"host_permissions": ["*://*.example.com/"],
"background": {"service_worker": "bg.js"},
使用已弃用的domains的Chrome 84及更高版本的bg.js
const iframeHosts = [
'example.com',
];
chrome.runtime.onInstalled.addListener(() => {
chrome.declarativeNetRequest.updateDynamicRules({
removeRuleIds: iframeHosts.map((h, i) => i + 1),
addRules: iframeHosts.map((h, i) => ({
id: i + 1,
condition: {
domains: [chrome.runtime.id],
urlFilter: `||${h}/`,
resourceTypes: ['sub_frame'],
},
action: {
type: 'modifyHeaders',
responseHeaders: [
{header: 'X-Frame-Options', operation: 'remove'},
{header: 'Frame-Options', operation: 'remove'},
// Uncomment the following line to suppress `frame-ancestors` error
// {header: 'Content-Security-Policy', operation: 'remove'},
],
},
})),
});
});
在添加iframe或打开扩展页面之前，您可能需要删除网站(s)的服务工作者并清除其缓存，因为许多现代网站使用服务工作者创建页面而无需进行网络请求，从而忽略我们的头部剥离规则。
在manifest.json中的"permissions"中添加"browsingData"。