Solutions to some problems with js innerHTML_javascript skills

However, you need to know that innerHTML has some problems of its own:

1. When the HTML string contains a script tag (
) marked as defer, if the innerHTML attribute is not handled properly, it will appear on Internet Explorer Causing script injection attacks.
2. Setting innerHTML will destroy existing HTML elements that have registered event handlers, which may cause the potential risk of memory leaks on some browsers.

There are several other minor disadvantages that are worth mentioning:

1. You cannot get references to the elements you just created, and you need to manually add code to get those references ( using DOM APIs).
2. 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 related to 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 element registration event handlers and allowing the garbage collector (garbage collector) to release the memory associated with these HTML elements.
<script>…</script> 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>]*>[Ss]*?</script>[^>]*>/ig
Now, let’s combine these two techniques into a single setInnerHTML function , and bind the setInnerHTML function to YAHOO.util.Dom of YUI:
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;
                                                                                                                    >                                                                           for (i = 0; i c = o.childNodes[i];

// Clear child nodes
arguments.callee(c);

                                                                                                           Register all listeners on the element through YUI's addListener > // Remove the script from the HTML string and set the innerHTML attribute
el.innerHTML = html.replace(/
]*>[Ss]*?]*>/ig, "" ; If something is missing from the formula, please let me know.

Obviously, there are many other ways to inject malicious code on web pages. The setInnerHTML function only normalizes the execution behavior of the
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.