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

Question

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

UNSAFE_VAR_ASSIGNMENT

innerHTML 的不安全赋值

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

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

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

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

Answer 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。