javascript - XSS safe img src insertion -

how safely push user influenced url dom, namely src attribute of img?

<img> won't execute else valid img , scripting in svg limited. casual onload tricks won't work aswell because input quoted. enough ensure safe dom insertion via img?

the snippet simplified, there checks url being valid url.

edit: http://foo" onerror="alert('xss')" " is not valid url, see here: http://foo" onerror="alert('xss')" ". can assume url sure valid url. see https://en.wikipedia.org/wiki/percent-encoding#types_of_uri_characters, check if javascript string url , https://jsfiddle.net/mppkgd7u/

var user = 'random/url/path'; // kind of user generated string  var url = 'http://' + user; // guaranteed url  document.getelementbyid('view').innerhtml = '<img src="'+url+'">';  console.log(document.getelementbyid('view').innerhtml);

<div id=view>  </div>

what if user's string 'no" onerror="alert(0)'?

this'll expand to:

<img src="http://no" onerror="alert(0)"> 

the safest way use document.createelement , assign src attribute. using innerhtml isn't safe approach

var img = document.createelement('img'); img.src = ...;