Best way to purge innerHTML from a Firefox Extension

Question

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

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.

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;

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?

Answer 1

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

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