我想创建一个浏览器扩展，它创建一个侧栏。Chrome没有一流的侧边栏，所以我们必须在页面中添加iframe。但是，由于内容安全策略，这在许多页面上会中断。例如。GitHub使用CSP,它不允许将来自其他站点的IFRAME嵌入其中。例如。如果您尝试将CapitalOne.com网站放在GitHub的iframe中，您会得到以下信息：
拒绝对“https://www.capitalone.com/”进行帧处理，因为它违反了以下内容安全策略指令：“frame-src'self'render.githubusercontent.com www.youtube.com assets.braintreegateway.com”。
下面是一个简单的浏览器扩展来再现这一点：
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status === 'complete') {
chrome.tabs.executeScript(tabId, { code: 'document.body.innerHTML=\'<iframe style=\"width:600px; height:600px\" src=\"https://www.capitalone.com/\"></iframe>\' + document.body.innerHTML;' }, function() {
console.log('Iframe injection complete');
})
}
}.bind(this));
然而，根据维基百科的说法，浏览器扩展应该能够注入iframe，尽管有任何内容安全策略：
根据CSP处理模型，[20]CSP不应干扰用户安装的浏览器加载项或扩展的操作。CSP的这一特性有效地允许任何插件或扩展将脚本注入到网站中，而不管该脚本的来源如何，因此不受CSP策略的约束。
除了我现在做的以外，还有什么其他方法可以注射iframe吗？
无法在Chrome中插入外部iframe是一个错误(crbug.com/408932)。
如果你想在一个外部网站中嵌入一个外部框架，那么它必须加载在一个与你的扩展打包的框架中。
{
"name": "Embed external site",
"version": "1",
"manifest_version": 2,
"content_scripts": [{
"js": ["contentscript.js"],
"matches": ["*://*/*"],
"all_frames": true
}],
"web_accessible_resources": [
"frame.html"
]
}
如果希望始终在文档中插入内容脚本，请不要使用chrome.tabs.onupdated+chrome.tabs.executescript。您的实现有缺陷，可能会导致脚本多次运行。相反，您应该在清单文件中声明内容脚本。
（如果不想在每个子帧中插入帧，请删除“all_frames”:true。）
// Avoid recursive frame insertion...
var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
if (!location.ancestorOrigins.contains(extensionOrigin)) {
var iframe = document.createElement('iframe');
// Must be declared at web_accessible_resources in manifest.json
iframe.src = chrome.runtime.getURL('frame.html');
// Some styles for a fancy sidebar
iframe.style.cssText = 'position:fixed;top:0;left:0;display:block;' +
'width:300px;height:100%;z-index:1000;';
document.body.appendChild(iframe);
}
<style>
html, body, iframe, h2 {
margin: 0;
border: 0;
padding: 0;
display: block;
width: 100vw;
height: 100vh;
background: white;
color: black;
}
h2 {
height: 50px;
font-size: 20px;
}
iframe {
height: calc(100vh - 50px);
}
</style>
<h2>Displaying https://robwu.nl in a frame</h2>
<iframe src="https://robwu.nl/"></iframe>
注意到我在框架中加载了一个https站点是很重要的。如果您试图加载帧中的HTTP站点，那么如果父帧之一是https页，则混合内容策略将阻止加载帧。
将https://robwu.nl/替换为http://example.com/，在https://github.com等https页面上，框架将保持空白。同时，以下消息将打印到控制台。
[blocked]“HTTPS://github.com/”上的页面通过HTTPS加载，但从“http://example.com/”运行了不安全的内容：此内容也应通过HTTPS加载
