Comments on: The Problem With innerHTML http://www.julienlecomte.net/blog/2007/12/38/ Web Development, Operating System Programming and Amateur Astronomy Sat, 10 Jul 2010 05:57:06 +0000 http://wordpress.org/?v=2.9.1 hourly 1 By: Frank Thuerigen http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-2169 Frank Thuerigen Mon, 24 Dec 2007 23:22:47 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-2169 ... max row tables, of course. Sry. … max row tables, of course. Sry.

]]> By: Frank Thuerigen http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-2167 Frank Thuerigen Mon, 24 Dec 2007 23:21:34 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-2167 @Joseph, if you have too many table or select/option entries - recreate the whole table or select. If it is still too many, your app has a faulty design anyway, since bloated selects are not user-friendly and max column tables should be replaced by an optimized design as well. my $0.02 of course. Merry Christmas time everybody, Frankie / Berlin / Germany @Joseph,

if you have too many table or select/option entries – recreate the whole table or select. If it is still too many, your app has a faulty design anyway, since bloated selects are not user-friendly and max column tables should be replaced by an optimized design as well.

my $0.02 of course.

Merry Christmas time everybody,

Frankie / Berlin / Germany

]]> By: Joseph http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-1606 Joseph Fri, 21 Dec 2007 09:43:26 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-1606 I'm sorry, code was posted incorrectly: <code> wrapper = document.createElement('div'); if (/^t(body|foot|head)$/i.test(el.tagName)) { wrapper.innerHTML = '<table>' + html + '</table>'; wrapper = wrapper.getElementsByTagName('tbody')[0]; } else if (/^select$/i.test(el.tagName)) { wrapper.innerHTML = '<select name="tmp">' + html + '</select>'; wrapper = wrapper.getElementsByTagName('select')[0]; } else { wrapper.innerHTML = html; } while(wrapper.firstChild) { el.appendChild(wrapper.firstChild); } </code> I’m sorry, code was posted incorrectly:

wrapper = document.createElement('div');

if (/^t(body|foot|head)$/i.test(el.tagName)) {
wrapper.innerHTML = '<table>' + html + '</table>';
wrapper = wrapper.getElementsByTagName('tbody')[0];
} else if (/^select$/i.test(el.tagName)) {
wrapper.innerHTML = '<select name="tmp">' + html + '</select>';
wrapper = wrapper.getElementsByTagName('select')[0];
} else {
wrapper.innerHTML = html;
}

while(wrapper.firstChild) {
el.appendChild(wrapper.firstChild);
}

]]> By: Joseph http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-1604 Joseph Fri, 21 Dec 2007 09:40:10 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-1604 Really nice article Julien! but, simple using innerHTML is not enough, especially it is problematic with html form elements, "table" and "option" elements. I think your code needs some improvements to fix all noted problems with various tags. see code below: <code> wrapper = document.createElement('div'); if (/^t(body|foot|head)$/i.test(el.tagName)) { wrapper.innerHTML = '' + html + ''; wrapper = wrapper.getElementsByTagName('tbody')[0]; } else if (/^select$/i.test(el.tagName)) { wrapper.innerHTML = '' + html + ''; wrapper = wrapper.getElementsByTagName('select')[0]; } else { wrapper.innerHTML = html; } while(wrapper.firstChild) { el.appendChild(wrapper.firstChild); } </code> Really nice article Julien!

but, simple using innerHTML is not enough, especially it is problematic with html form elements, “table” and “option” elements.

I think your code needs some improvements to fix all noted problems with various tags. see code below:


wrapper = document.createElement('div');

if (/^t(body|foot|head)$/i.test(el.tagName)) {
wrapper.innerHTML = '' + html + '';
wrapper = wrapper.getElementsByTagName('tbody')[0];
} else if (/^select$/i.test(el.tagName)) {
wrapper.innerHTML = '' + html + '';
wrapper = wrapper.getElementsByTagName('select')[0];
} else {
wrapper.innerHTML = html;
}

while(wrapper.firstChild) {
el.appendChild(wrapper.firstChild);
}

]]> By: Amit Jaiswal http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-1398 Amit Jaiswal Tue, 18 Dec 2007 11:54:48 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-1398 What I have noticed while using innerHTML is that if I create a select box through innerHTML in a DIV which is in a form and then I submit the for the select box is not captured in request(JAVA) in case of Firefox but gets captured in case of IE. Is this due to "You don’t get back a reference to the element(s) you just created, forcing you to add code to retrieve those references manually (using the DOM APIs…)" What I have noticed while using innerHTML is that if I create a select box through innerHTML in a DIV which is in a form and then I submit the for the select box is not captured in request(JAVA) in case of Firefox but gets captured in case of IE.
Is this due to
“You don’t get back a reference to the element(s) you just created, forcing you to add code to retrieve those references manually (using the DOM APIs…)”

]]> By: Julien Lecomte http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-1372 Julien Lecomte Tue, 18 Dec 2007 02:17:48 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-1372 @Steven Thanks. You're absolutely right! @Steven

Thanks. You’re absolutely right!

]]> By: Steven Levithan http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-1370 Steven Levithan Tue, 18 Dec 2007 01:59:24 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-1370 One more security hole to plug is </script> tags with whitespace or other attributes, which I believe browsers allow (at least whitespace). So you could modify the last regex to /<script[^>]*(?:\/>|>[\S\s]*?<\/script[^>]*>)/ig One more security hole to plug is </script> tags with whitespace or other attributes, which I believe browsers allow (at least whitespace). So you could modify the last regex to /<script[^>]*(?:\/>|>[\S\s]*?<\/script[^>]*>)/ig

]]> By: Steven Levithan http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-1369 Steven Levithan Tue, 18 Dec 2007 01:53:43 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-1369 <code>/<script[^>]*>((.|[\r\n])*?)<\\?\/script>/ig</code> ...should be: <code>/<script[^>]*>[\S\s]*?<\/script>/ig</code> For one, it's more readable, and secondly it's much more efficient. If you want to also match self-closed script elements you could use: <code>/<script[^>]*(?:\/>|>[\S\s]*?<\/script>)/ig</code> /<script[^>]*>((.|[\r\n])*?)<\\?\/script>/ig

…should be:

/<script[^>]*>[\S\s]*?<\/script>/ig

For one, it’s more readable, and secondly it’s much more efficient. If you want to also match self-closed script elements you could use:

/<script[^>]*(?:\/>|>[\S\s]*?<\/script>)/ig

]]> By: Blog do Márcio d’Ávila http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-1314 Blog do Márcio d’Ávila Mon, 17 Dec 2007 02:18:38 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-1314 [...] na programação de páginas web, vale a pena The Problem With innerHTML, por Julien Lecomte, [...] [...] na programação de páginas web, vale a pena The Problem With innerHTML, por Julien Lecomte, [...]

]]> By: Miguel Ventura http://www.julienlecomte.net/blog/2007/12/38/comment-page-1/#comment-1305 Miguel Ventura Sun, 16 Dec 2007 22:48:27 +0000 http://www.julienlecomte.net/blog/2007/12/38/#comment-1305 There isn't really much use on using regex to filter tags. Regex aren't powerful enough on their own, without grammars (<a title="x">bbb<a title=""> kind of stuff would filter too much) and therefore you can always get around it. Try filtering something like html = "<scrivoid(0);pt defer=\"true\">alert('foo');" So there's no real security benefit. Filtering scripts before adding them to any DOM structure (even one that doesn't belong to the document tree) won't be an easy job... There isn’t really much use on using regex to filter tags. Regex aren’t powerful enough on their own, without grammars (<a title=”x”>bbb<a title=”"> kind of stuff would filter too much) and therefore you can always get around it. Try filtering something like

html = “<scrivoid(0);pt defer=\”true\”>alert(‘foo’);”

So there’s no real security benefit. Filtering scripts before adding them to any DOM structure (even one that doesn’t belong to the document tree) won’t be an easy job…

]]>