Workaround – IE6+ local script restrictions

- Image via Wikipedia
In the early years of internet growth I had the opportunity to work as a web designer. As web designer I designed a web page. Simple not too complicated. And it rocked. Literally. Admired by many. By today’s standards web page was LAME. Totally. But it used an interesting JavaScript. As now I was using Linux at the time and I replaced the default mouse cursor with cool animated Linux penguin. The penguin was fabulous. The animation was interesting. The script was flawless. It did not bother me that the script was not working in IE because at that time netscape ruled the web and Microsoft did not bother to make it work on Linux1.
To fully appreciate what happened next look at one of the high budget horror movies that the industry is feeding you. Dark times came over web development. World wide web – that was once brewing in the black cauldron; broiled over and development became gruesome nightmare. Wars broke out. Major player corporations prayed on the unsuspected developers and lured them to their cause. There were some casualties; but mainly in the management area and web site development became an art. Most of the wars ended in status quo or with legislation disputes and web developers got standardization. Or did we?
Once you get a task of developing a web page you surely think about which technology you will be using. You weigh between Adobe Flash and Silverlight, client side or server side scripting. But in the end you still have to write an HTML document. Usually you will want to include some kind of client side script. Probably JavaScript so that you are platform independent2. For example you will want to do simple background image replacement triggered on HTML elements onMouseOver event. Thinking like this will force you to create a document that is similar to this:
1 2 3 4 5 6 7 8 9 | <html>
<head>
<title>JavaScript Test</title>
</head>
<body>
<div id="square" style="margin: 0pt auto; background-color: green; width: 100px; height: 100px;" onmouseover="document.getElementById('square').style.backgroundColor='red';" onmouseout="document.getElementById('square').style.backgroundColor='green';">
</div>
</body>
</html> |
Security warning without MOTW in IE6+
Result will look promising in every browser. Except IE. Specially if you are developing for 6+ version of the IE. Not knowing that Microsoft expertly decided that their web browser MUST improve security of your computer3. And here is where a developer stops with development and starts searching for a solution.
Solution is quite simple if you know where to look for it. The web page running in web browser is run locally and is not hosted on any web server. As a result IE forces web page to run in the security zone of the location the page was saved from. Since the page was created on your local computer this is pretty stupid but for the sake of our computer security let’s go with it. Microsoft also states that this is true as long as that security zone is more restrictive than the Local Machine zone, otherwise Local Machine zone is used. So we opened the file and it got bumped to Local Machine Zone which does not allow executing any script without blocking it. Now I am clapping as mad to the ingenuity of IE developers and on the other hand seeping madly through tons of useless internet garbage until I discovered MOTW. MOTW – is an acronym meaning “Mark of the Web”.
Actually it is an HTML comment which is added to the markup of the page right after <!DOCTYPE/> element. When a user opens the Web page from their local machine, Internet Explorer references this comment to determine the security zone in which it should run the page. For local domain it will look like this:
1 | <!-- saved from url=(0014)about:internet --> |
By adding this comment to my HTML page JavaScript miraculously started to work. Bravo Microsoft. Here is just another example of the standardization of the web:
1 2 3 4 5 6 7 8 9 10 | <!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>JavaScript Test</title>
</head>
<body>
<div id="square" style="margin: 0pt auto; background-color: green; width: 100px; height: 100px;" onmouseover="document.getElementById('square').style.backgroundColor='red';" onmouseout="document.getElementById('square').style.backgroundColor='green';">
</div>
</body>
</html> |
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=27f9e4c2-f04b-4822-bfcc-3502e1fa1ee8)
