Skip to main content.

Wednesday, October 26, 2005

Recently, I discovered something some interesting things about Internet Explorer:

When assigning some HTML to the innerHTML property of a DOM element, Internet Explorer performs some security text, especially if the inserted HTML contains javascript (e.g. <a href="..." onclick="javascript code">...).

If you create elements dynamically (e.g. var e = document.createElement('p');) and assign something to innerHTML before appending the created element to the DOM tree, Internet Explorer performs its security text in the zone to which about:blank belongs.

As a consequence, you'll end up in trouble when limited rights are assigned to about:blank. I've seen one case in the wild where this is the case: a Windows Server 2003 computer promting to add about:blank to the list of trusted site. I've simulated the experience on a Windows XP Pro SP2 system by adding about:blank to the "Restricted Sites" list.

The solution is quite simple: add the dynamically created element in the DOM tree before accessing any of the properties, not after. I could have known all along, anyway. From the MSDN documentation for createElement:

"Before you use new objects, you must explicitly add them to their respective collections or to the document. To insert new elements into the current document, use the insertBefore or appendChild methods."

In the example below (or here), you should see two links. When about:blank is in the restricted sites zone, clicking the "fail" link will not cause the "onclicked" alert, while clicking the "succeed" link will. An interesting observation is that the Internet Explorer Developer Toolbar will still display the onclick property. It is never executed, however.

<html>
<head>
<title>JavaScript about:blank context</title>
<script type="text/javascript">
 
function test()
{
  shouldFail();
  shouldSucceed();
}
 
function shouldFail()
{
 var box = document.getElementById('box');
 var a = document.createElement('div');
 
 // a.parentNode == null
 
 a.innerHTML = '<a href="#box" onclick="alert(\'onclick\'); return false;">fail</a>';
 
 box.appendChild(a);
 
 // a.parentNode == [object]
}
 
function shouldSucceed()
{
 var box = document.getElementById('box');
 var a = document.createElement('div');
 box.appendChild(a);
 a.innerHTML = '<a href="" onclick="alert(\'onclick\'); return false;">succeed</a>';
}
 
</script>
</head>
<body onload="test()">
<div id="box"></div>
</body>
</html>

I'm not saying that any of this behavior is wrong. I'm just mentioning this because when this security check silently blocks some code, it might be hard to find out why functionality is broken.

Comments

i want to attach files dinamically plz send me the code

Posted by amar at Thursday, December 15, 2005 11:37:06

hhh

Posted by hh at Saturday, January 21, 2006 22:31:00

Thanks a lot for this ! Please note that using href='javascript:function()' works in both case.

Thanks again.

Posted by David at Tuesday, March 14, 2006 23:06:11

hw fool u r go to hell

Posted by shjgg at Wednesday, April 19, 2006 13:45:59

This code word well

Posted by Md. Alauddin Husain at Tuesday, June 27, 2006 14:01:10

Sadly, this conflicts with another IE issue. If the page is https, and you append an empty iframe, IE thinks the iframe is non-secure content, and displays a security warning. So you have to set the source of the iframe before adding it to the document!

Posted by John Lindal at Saturday, August 12, 2006 06:47:58

thx! this helps a lot.

Posted by mosh at Tuesday, September 05, 2006 22:57:40

Thank you so much, your short article were really very helpful, i appreciate it very much.
really thank you man

Ma'moon

Posted by Ma-moon at Tuesday, September 12, 2006 19:24:51

Good Article. Retarded comments.

>> i want to attach files dinamically plz send me the code

>> hw fool u r go to hell

WTF is that? Come on people - put forth at least a LITTLE effort! I know typing is tough work but jeez.

Posted by Best Grammar Ever! at Wednesday, October 18, 2006 02:32:17

... the same thing I was just thinking ^^

Posted by Kevinin at Friday, October 20, 2006 05:49:42

Very helpful, especially the posting about the iframe with no src - cheers mate, i have been mullingthis for some time.

Posted by omar at Tuesday, November 14, 2006 23:22:09

My problem with the iframe having no src is that i dont want it to point to a page. Btw, this is someone else's code i am having to deal with - in fact it is the htmlarea wysiwyg text editor's generate() function.
Microsoft support suggests the following...
"To resolve this problem for a page that will be downloaded through SSL, set the SRC attribute of the IFRAME.
If the IFRAME is not expected to have a SRC attribute initially, point the IFRAME to a dummy HTML page."

Posted by omar at Tuesday, November 14, 2006 23:26:40

Think you can assign a dummy value to SRC as shown..
myiframe=document.createElement("IFRAME");
myiframe.src = "javascript:;";

Posted by Cool at Wednesday, November 15, 2006 22:59:32

Still doesn't work for script tags. If you try and assign <script> some javascript</script> to an innerHTML it will still erase it.

Posted by styz at Wednesday, November 22, 2006 23:18:55

Interesting

Posted by Počasí at Monday, December 04, 2006 00:21:18

the interesting point is both codes (fail and succeed functions) works properly in my computer!

OS: Win XP SP2
Browser: IE 6.0

Posted by Mansoor Omrani at Tuesday, December 12, 2006 13:08:46

Add Comment

This item is closed, it's not possible to add new comments to it or to vote on it