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.
Posted by karma at 18:36:37. Filed under: Other Programming
Comments
Add Comment