从 Firefox 扩展中清除 innerHTML 的最佳方法

Posted

技术标签:

【中文标题】从 Firefox 扩展中清除 innerHTML 的最佳方法【英文标题】:Best way to purge innerHTML from a Firefox Extension 【发布时间】:2018-01-16 16:15:48 【问题描述】:

我正在运行 web-ext lint 并返回一些类似这样的错误:

UNSAFE_VAR_ASSIGNMENT

innerhtml 的不安全赋值

出于安全和性能方面的考虑,可能无法使用未经充分清理的动态值进行设置。这可能会导致安全问题或相当严重的性能下降。

有问题的代码基本上是在做:

var html = '<style>body  margin: 0;  iframe  border: none; ' +
           '</style><iframe src="' + URL.createObjectURL(blob) +
           '"  ></iframe>';
document.documentElement.innerHTML = html;

我不是一个大的 JS 开发者,所以我理解这里的安全漏洞,但我真的不知道让 AMO 和 linter 满意的最佳解决方案是什么。我想我需要将上面的字符串转换成一堆命令来创建一个节点?

【问题讨论】:

【参考方案1】:

是的,那样会更安全。对于上面的示例,它将是

var css = 'body  margin: 0;  iframe  border: none; ';
var style = document.createElement('style');
style.appendChild(document.createTextNode(css));
document.body.appendChild(style);

var frame = document.createElement('iframe');
frame.width = "100%";
frame.height = "100%";
frame.src = URL.createObjectURL(blob);
document.body.appendChild(frame);

清除文档正文之前有几种方法,见Remove all content using pure JS。

【讨论】:

您的解决方案添加但不替换文档的内容 - 可能会添加一些内容。 @Xan 我为此添加了指向另一个问题的链接。 可能想从这里的问题中采用非innerHtml 方法。 修复了另一个 WebExtension 中的 innerHTML 使用的人:github.com/iniqua/firefox-plugin-popup-logout/commit/…

以上是关于从 Firefox 扩展中清除 innerHTML 的最佳方法的主要内容,如果未能解决你的问题,请参考以下文章

设置 .innerHTML

Firefox 中的 svg innerHTML 无法显示

innerHTML、<form> 和 Firefox

这还是Chrome和Firefox吗?阻止卸载劫持浏览器

innerHTML 适用于 IE 和 Firefox,但不适用于 Chrome

为啥innerHTML =“”在Firefox中很慢