在firefox扩展内的注入iframe中加载本地html文件

我目前正在开发一个firefox扩展，当用户点击扩展图标时，它基本上会在当前页面中插入一个iframe。 我设法插入了iframe代码，我找到了如何将src属性链接到我的html文件

在chrome版本中，我只需做一个

 var main_html = chrome.extension.getURL('main.html');

我将链接传递给iframe的src属性，如下所示：

 iframe.setAttribute("src",main_html);

所以main_html是一个类似resource://idofmyextension/content/data/main.html

但是，正如我所怀疑的，我收到一个安全错误，告诉我位于当前url的内容无法加载数据或建立指向main.html文件的链接

有没有办法通过这个安全限制？还是以另一种方式在iframe中加载html文件

---

提前感谢。

我假设的使用，与Firefox中的常规XUL开发相比，更类似于Google Chrome extensions开发。然而，我在这里解释的方法在没有附加SDK的情况下也可以工作

In-Add-on SDK目前不可能实现，但仍有一些工作要做，请参阅

目前我想到的唯一解决办法是使用

data:

url。因此，我们应该：

const { data } = require("self");

let url = data.url("main.html");

// pass the url to the iframe

你将有：

const { data } = require("self");

let content = encodeURIComponent(data.load("main.html"));
let url = "data:text/html;charset=utf-8," + content;

// pass the url to the iframe

注意

data.load

而不是

data.url

：基本上加载资源的内容并将其用作数据url。 这是丑陋的，但至少可以在某些情况下使用，直到一个适当的修复

---

希望有帮助

我想我对这一点还不熟悉，但当你说“将url传递到iframe”时，你的确切意思是什么？这不是

这不能正常工作。许多网站都有内容隐私政策，将iFrame的src限制为相同来源的URL。因此，不会将内联内容或外部文件加载到iframe。我很清楚这是一个bug，因为在我最初的回答中，间接地提到了这个bug：你可以在那里看到我的参与。我的回答当然是针对不涉及CSP的情况。对于使用CSP的站点，您可以在加载项中拦截来自站点的http响应，并在运行时修改CSP。那就是，直到错误被修复。当然，还有很多工作要做，而在当时，这似乎不是OP的场景。请参见此处的答案，这是一个关于同一主题的更新线程，有更多答案：