使用Chrome扩展程序注入远程iframe

Question

使用Chrome扩展程序注入远程iframe

Phi*_*ins 9 google-chrome-extension content-security-policy

对于我的生活,我无法让我的Chrome扩展程序显示带有远程网址的iframe.

我在控制台中看到以下消息 -

拒绝构建" https://www.example.com/ ",因为它违反了以下内容安全策略指令:"child-src'self'".请注意,'frame-src'未明确设置,因此'child-src'用作后备.

我在这里找到了一个解决方案(将iframe注入到具有限制性内容安全策略的页面中),这需要注入一个本地iframe,然后comatins引用远程URL的另一个iframe.这应该绕过声音安全策略.但由于某种原因,它似乎不适用于我的情况.我错过了什么或改变了镀铬安全政策？

以下是我的扩展程序中与此问题相关的部分内容.注意 - 这段代码并不是最漂亮的,因为我一直在努力让它发挥作用.

现在这种方式的工作方式是background.js向inject.js发送一条消息.inject.js插入第一个iframe,引用本地文件infobar.html.此页面是我们的主要用户界面,我们希望将iframe中显示的远程html页面作为此页面的一部分.然后infobar.js插入一个引用本地文件frame.html的iframe.最后,frame.html将iframe硬编码到我们的远程网址.

根据之前的回答,只有第一个iframe应该受内容安全策略的约束.但是,这似乎并非如此,因为引用example.com的实际上是3个iframe深度.

的manifest.json

{
...
  "content_security_policy": "script-src 'self'; object-src 'self'; frame-src https://www.example.com; child-src https://www.example.com",
  "background": {
    "scripts": [
      "js/jquery/jquery.min.js",
      "src/bg/background.min.js"
    ],
    "persistent": true
  },
...
  "content_scripts": [
    {
      ...
      "css": [
        ...
        "src/inject/inject.min.css"
      ],
      "js": [
        ...
        "src/inject/inject.min.js"
      ]
    }
  ],
  "externally_connectable": {
    "matches": [
      "*://localhost/*",
      "*://*.example.com/*
    ]
  },
  "web_accessible_resources": [
    "src/inject/inject.html",
    "src/inject/infobar.html",
    "src/inject/infobar.min.js",
    "src/inject/frame.html"
  ],
  "sandbox": {
    "pages": [
      "src/inject/infobar.html",
      "src/inject/frame.html"
    ]
  }
}

Run Code Online (Sandbox Code Playgroud)

inject.js

var iframe = document.createElement("iframe");
iframe.scrolling = "no";
iframe.style.cssText = "display:none;";
...
$(iframe).load(function () {
    var message = {
        command: "render-frame",
        context: data,
        frameUrl: chrome.runtime.getURL("src/inject/frame.html")
    };
    iframe.contentWindow.postMessage(message, '*');
    iframe.style.cssText = "border: 0px; overflow: visible; padding: 0px; right: auto; width: 100%; height: " + toolbarHeight + "px; top: 0px; left: 0px; z-index: 2147483647; box-shadow: rgba(0, 0, 0, 0.498039) 0px 3px 10px; position: fixed; display: none;";
});
...
iframe.src = chrome.runtime.getURL("src/inject/infobar.html");      
...     
document.documentElement.appendChild(iframe);

Run Code Online (Sandbox Code Playgroud)

infobar.html

简单的HTML页面.没有任何相关的东西.参考信息infobar.js.

infobar.js

window.addEventListener("message", function (event) {
    var command = event.data.command;
    switch (command) {
        case "render-frame":
            var frame = document.createElement("iframe");
            frame.scrolling = "no";
            frame.src = event.data.frameUrl;
            document.getElementById("content").appendChild(frame); 
...
            break;
    }
});

Run Code Online (Sandbox Code Playgroud)

frame.html

<html>
<head>
    <style>
        html, body, iframe, h2 {
            margin: 0;
            border: 0;
            padding: 0;
            display: block;
            width: 100vw;
            height: 100vh;
            background: white;
            color: black;
        }
    </style>
</head>
<body>
<iframe src="https://www.example.com/page.html"></iframe>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Usa*_*jaz 1

chrome.webRequest正确的方法是在后台脚本中使用API 并拦截 HTTP 响应。

然后，您可以覆盖响应标头以修改 Content-Security-Policy 标头。您还可以修改X-Frame-Options标题（如果需要）。

文档：chrome.webRequest

归档时间：	7 年，11 月前
查看次数：	980 次
最近记录：	7 年，8 月前