Firefox WebExtension,隔离的HTML叠加层

Question

Firefox WebExtension,隔离的HTML叠加层

For*_*vin 6 javascript iframe google-chrome-extension content-security-policy firefox-addon-webextensions

我正在寻找一种使用WebExtensions在某些网站上显示孤立叠加层的方法.
iframe似乎是这样做的方式,因为它为css,js和DOM提供了一个完整的独立范围.另一个巧妙的事情是目标网站将无法阅读或更改内容.

在Chrome扩展程序中似乎没有任何问题,但在Firefox中使用WebExtensions,即使它们共享相同的语法,我也会收到安全警告/错误,但它不起作用.

我尝试过两种不同的东西:

创建一个没有src属性的iframe并将其注入到网站主体中.此方法失败,因为我在执行时收到CSP错误/警告iframe.contentWindow.document.open().
相关内容 - 脚本代码:

let html = `
    <!DOCTYPE html>
    <html>
      <head></head>
      <body>
        <h1>TEST</h1>
      </body>
    </html>
`
let iframe = document.createElement('iframe')
document.body.appendChild(iframe)
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(html)
iframe.contentWindow.document.close()

Run Code Online (Sandbox Code Playgroud)

我尝试的另一件事(因为它会禁止网站访问内容会更有意义),就是将我的iframe代码放入overlay.html我的WebExtension中的文件()中,并通过将其设置为src来使iframe加载browser.extension.getURL('overlay.html').
相关内容 - 脚本代码:
```
let iframe = document.createElement('iframe')
iframe.src = browser.extension.getURL('overlay.html')
document.body.appendChild(iframe)
```
Run Code Online (Sandbox Code Playgroud)
在清单中,我web_accessible_resources为此定义了overlay.html :
```
"web_accessible_resources": [ 
    "overlay.html"
],
```
Run Code Online (Sandbox Code Playgroud)
关于这一点的是,iframe根本不加载overlay.html文件.但它肯定是可用的,否则location.href = browser.extension.getURL('overlay.html')将无法正常工作.如果这样做会非常方便,因为我可以将整个叠加层(html,css,js)存储为扩展中的单独文件.好像它将是一个独立的网站.使用内容脚本我可以访问它以添加新数据或其他任何内容.

编辑:

目前我正在使用srcdociframe 的属性来设置它应包含的源代码(感谢wOxxOm).所以至少我有一些现在有用的东西.但我真正不喜欢这种方法的是我无法与内容脚本中的iframe内容进行交互.有趣的是,我可以在iframe的js代码中与父页面进行交互,但同样不能与内容脚本进行交互.将所有的html,css,js代码放入一个字符串而不是像普通网站这样的多个文件,这也非常麻烦,不方便且难以维护.

Answer 1

Dan*_*ane 3

问题

首先，我们知道这个问题是一个安全问题，那么问题到底是什么？当尝试通过设置 iframe src 将扩展资源加载到 iframe 时，浏览器会抱怨安全性并阻止 iframe 通过不同的协议进行连接，在本例中为“moz-extension://”。

解决方案

从扩展上下文加载 html 等并作为字符串注入。

本质

为了解决这个问题，我们可以将 iframe 的 src 属性设置为data:text/html;charset=utf8,${markup}。

这直接告诉 iframe 内容是 html，它使用 utf8 编码，后面跟着原始标记。我们完全绕过了 iframe 通过网络加载任何资源的需要。

Firefox 内容脚本的执行上下文与其加载的页面是分开的。这意味着您可以在不违反 CSP 的情况下发出 xhr 请求。

如果您向标记发出 xhr 请求，则可以获取字符串形式的响应内容，并将其直接注入到 iframe src 属性中。

因此内容脚本：

    function loaded (evt) {
    if (this.readyState === 4 && this.status === 200) {
        var html = this.responseText;
        console.log(html);
        var iframe = document.createElement('iframe');

        iframe.src = 'data:text/html;charset=utf-8,' + html;
        document.body.appendChild(iframe);

        console.log('iframe.contentWindow =', iframe.contentWindow);
    } else {
        console.log('problem loading');
    }
}

var xhr = new XMLHttpRequest();
xhr.overrideMimeType("text/html");
xhr.open("GET", browser.extension.getURL('test.html'), false);
xhr.addEventListener("readystatechange", loaded);


xhr.send(null);

Run Code Online (Sandbox Code Playgroud)

使用一个简单的 HTML 文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta charset="utf8" />
</head>
<body>
   <h1>Hello World</h1>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

现在您已经成功地将 html 模板注入到目标 iframe 中。

如果您需要任何图像、脚本、CSS 文件等，您需要根据上述方法编写引导加载程序，将新的脚本标签等直接注入 iframe 文档中。

归档时间：	8 年，10 月前
查看次数：	723 次
最近记录：	8 年，10 月前