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

问题描述

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

I'm running web-ext lint and getting back a few errors like this:

不安全地分配给innerHTML

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.

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

The code in question is basically doing:

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满意的最佳解决方案是什么.我想我需要将上面的字符串转换成一串命令来代替一个节点?

I'm not a big JS dev, so I understand the security vulnerability here, but I don't really know what the best solution is to make AMO and the linter happy. I suppose I need to convert the string above into a bunch of commands to make a node instead?

推荐答案

是的，这样会更安全.对于上面的示例，

Yes, that would be safer. For the example above it would be

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);

要在清除文档主体之前有多种方法，请参见使用纯方法删除所有内容JS .

To clear the document body prior there are several methods, see Remove all content using pure JS.

这篇关于从Firefox扩展中清除innerHTML的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！