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 mands to make a node instead?

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 mands to make a node instead?

• javascript
• jquery
• firefox-addon-webextensions

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Aug 8, 2017 at 23:20 mlissnermlissner 18.2k1818 gold badges121121 silver badges176176 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.