innerHTML application_HTML/Xhtml_web page production

blank’s blog: http://www.planabc.net/ The use of the
innerHTML attribute is very popular because it provides a simple way to completely replace the content of an HTML element. Another method is to use the DOM Level 2 API (removeChild, createElement, appendChild). But obviously, using innerHTML to modify the DOM tree is a very easy and effective method. However, you need to be aware that innerHTML has some problems of its own:

When an HTML string contains a script tag (

) marked as defer, a script injection attack can occur on Internet Explorer if the innerHTML attribute is mishandled. Setting innerHTML will destroy existing HTML elements that have registered event handlers, causing a potential risk of memory leaks on some browsers.

There are several other minor disadvantages that are also worth mentioning:

You cannot get references to the elements you just created, you need to manually add code to get those references (using DOM APIs). You cannot set the innerHTML attribute on all HTML elements in all browsers (for example, Internet Explorer does not allow you to set the innerHTML attribute on the row element of a table).

I am more concerned about the security and memory issues associated with using the innerHTML attribute. Obviously, this is not a new problem, and there are already talented people who have figured out solutions around some of these problems.
Douglas Crockford wrote a cleanup function that is responsible for breaking some circular references caused by HTML elements registering event handlers and allowing the garbage collector to release the memory associated with these HTML elements.
Removing script tags from HTML strings is not as easy as it looks. A regular expression can achieve the desired effect, although it is difficult to know whether it covers all possibilities. Here is my solution: <script>/</script>[^>]*>[Ss]*?]*>/ig

Now, let’s combine these two techniques into a single setInnerHTML function and bind the setInnerHTML function to YUI’s YAHOO.util.Dom:
YAHOO.util.Dom.setInnerHTML = function (el, html) {
el = YAHOO.util.Dom.get(el);
if (!el || typeof html !== 'string ') {
return null;
}
// Abort circular reference
(function (o) {
var a = o.attributes, i, l, n, c;
if (a) {
l = a.length; for (i = 0; i n = a[i].name;
if (typeof o[n] === 'function') {
o[n] = null;
}
}
}
a = o.childNodes;
if (a) {
l = a.length; for (i = 0; i c = o.childNodes[i];
// Clear child nodes
arguments.callee(c);
// Remove all listeners registered on the element through YUI's addListener
YAHOO.util.Event.purgeElement(c);
}
}
})(el);
// Remove the script from the HTML string and set the innerHTML attribute <script> el.innerHTML = html.replace(/</script>[^>]*>[Ss]*?
]*>/ig, "");
// Return the reference of the first child node
return el.firstChild;
};
If there is anything else this function should do or something is missing from the regex, please let me know. <script>Obviously, there are many other ways to inject malicious code on web pages. The setInnerHTML function only normalizes the execution behavior of the <br /> tag on all A-grade browsers. If you are going to inject untrusted HTML code, be sure to filter it on the server side first, there are many libraries that can do this. <script defer>&hellip;</script>Original text: "The Problem With innerHTML" by Julien Lecomte