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

Question

我正在运行 web-ext lint 并返回一些如下错误:

UNSAFE_VAR_ASSIGNMENT

Unsafe assignment to innerHTML

Due to both security and performance concerns, this may not be set using dynamic values which have not been adequately sanitized. This can lead to security issues or fairly serious performance degradation.

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

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 .