13

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?

Community
  • 1
  • 1
mlissner
  • 17,359
  • 18
  • 106
  • 169

1 Answers1

6

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.

jjdoe
  • 175
  • 11
  • Your solution adds, but not replaces, the document's content - maybe add something to that effect. – Xan Aug 10 '17 at 10:09
  • @Xan I added a link to a different question for that. – jjdoe Aug 10 '17 at 13:58
  • 1
    Might want to take the non-`innerHtml` method from that question here. – Xan Aug 10 '17 at 13:59
  • Someone who fixed innerHTML usage in another WebExtension: https://github.com/iniqua/firefox-plugin-popup-logout/commit/8daf55e64a12115bb5df94fd59bd80b23423e057 – Smile4ever Aug 19 '17 at 14:20