Element.innerhtml the security issues involved

As we all know, the innerHTML attribute was introduced in IE4, and many browsers also supported it for a long time, and the arrival of HTML5 made it standardized.

innerHTML's explanation on the MDN is:

The property Element.innerHTML Sets or gets the HTML syntax describing the element ' s descendants.

That is, you can set and get the descendants of an element that is represented by HTML syntax, but not much, but settings can raise security issues:

Element.innerhtml= "<script>console.log (' hello ') </script>";

That is, inserting the script into the descendant of the element, which may "leave a hand" for an XSS-like attack, like the example above does not actually execute the embedded JS script, and the MDN also states "HTML5 specifies that a <script> tag inserted via innerHTML should Not execute. ".

Therefore, the industry does not recommend inserting text with innerHTML and replacing it with node.textcontent.

Element.innerhtml the security issues involved