javascript – Firefox Addon SDK:将插件文件加载到iframe中

我想将一个资源://链接分别加载到我的Firefox插件中的本地文件到网页中的iframe.

原因是,出于安全原因,资源应该可视地嵌入到网页中,而不是让网站访问它的DOM.

该问题已在过去的各个地方进行过讨论,例如:这里(没有解决方案):
https://bugzilla.mozilla.org/show_bug.cgi?id=792479

由于大多数帖子都比较陈旧,我想问一下,如果在此期间有任何新的解决方案或解决方法.

解决方法

我认为我在错误或在jetpack的ML中提出了一个糟糕的解决方法,基本上是在数据:url中转换你的资源://(使用data.load加载HTML内容,然后编码并附加为前缀,所以这样的事情应该有效:
/* main.js */
const { data } = require('sdk/self');

// just an example,you can use `tab.attach` too
require('sdk/page-mod').PageMod({
  include: '*',contentScriptFile: data.url('content.js'),contentScriptOptions: {
    content: encodeURIComponent(data.load('index.html'))
  }
});

/* content.js */
let iframe = document.body.appendChild(document.createElement('iframe'));

iframe.setAttribute('sandBox','allow-scripts');
// maybe you want also use the seamless attribute,see:
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

iframe.contentwindow.location.href = 'data:text/html;charset=utf-8,' + self.options.content;

这当然是一种解决方法,我希望你提到的错误很快就会解决.
请注意,通过这种方式,您无法直接从iframe与父文档进行通信,但这也意味着您无法绕过,这就是您要阻止的.

当然,您仍然可以使用附加代码在iframe和父文档之间进行通信(您需要附加内容脚本并使用port和postMessage).

编辑:更改了url的设置方式,否则仍然可以从父文档中获取src属性,并包含完整的HTML.

相关文章

什么是深拷贝与浅拷贝?深拷贝与浅拷贝是js中处理对象或数据...
前言 今天复习了一些前端算法题,写到一两道比较有意思的题:...
最近在看回JavaScript的面试题,this 指向问题是入坑前端必须...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面