google-chrome-extension - 将 iframe 注入(inject)具有限制性内容安全策略的页面

Question

我想创建一个浏览器扩展来创建侧边栏。 Chrome 没有一流的侧边栏，因此我们必须在页面中放置一个 iframe。然而，由于内容安全策略，这在许多页面上都会中断。例如。 GitHub 使用 CSP，不允许将其他站点的 iframe 嵌入其中。例如。如果您尝试将 Capitalone.com 网站放入 GitHub 上的 iframe 中，您会得到以下结果:

Refused to frame 'https://www.capitalone.com/' because it violates the following Content Security Policy directive: "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));

然而，根据维基百科，浏览器扩展应该能够注入(inject) iframe，尽管有任何内容安全策略:

According to the CSP Processing Model,[20] CSP should not interfere with the operation of browser add-ons or extensions installed by the user. This feature of CSP effectively allows any add-on or extension to inject script into websites, regardless of the origin of that script, and thus be exempt from CSP policies.

除了我正在做的事情之外，还有其他方法可以注入(inject) iframe 吗？

Answer 1

无法在 Chrome 中插入外部 iframe 是一个错误 ( crbug.com/408932 )。

如果您想在外部网站中嵌入外部框架，则必须将其加载到与您的扩展程序一起打包的框架中。

manifest.json

{
    "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。您的实现存在缺陷，可能会导致脚本运行多次。相反，你应该 declare the content script in the manifest file .

(如果您不想在每个子帧中插入帧，请删除 "all_frames": true。)

contentscript.js

// 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);
}

frame.html

<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 页面(例如 https://github.com)上保持空白。 。同时，以下消息将打印到控制台。

[blocked] The page at 'https://github.com/' was loaded over HTTPS, but ran insecure content from 'http://example.com/': this content should also be loaded over HTTPS