Protect IE from empty img src
In a previous post, I discussed the problem with setting an HTML image’s src attribute to an empty string. In Internet Explorer, Safari, and Chrome, this results in a second request being made to the server (Firefox 3.5 patched this behavior and Opera doesn’t exhibit the behavior). My post also showed a couple of ways to detect this issue on the server side at the time a request is received. I noted that it’s very difficult to detect these requests from Internet Explorer because it doesn’t send different Accept headers for image requests than it does for HTML requests. After a bit more investigation, I’ve found a way to prevent this behavior in Internet Explorer through version 8.
The
I’m still not entirely sure why this is true, but if you specify a base URL in the page using the <base> tag. For those unaware, the <base> tag is used to alter how URLs are resolved and linked to within a page. The href attribute is used to indicate the base URL from which relative URLs on the page should be resolved. This affects not just the <a> tag, but also any tags that accept a URL as an attribute value. Consider the following:
<img src="smile.gif">
To resolve smile.gif for this tag, the browser looks at the path of the containing page and then append smile.gif. So if the page is http://www.nczonline.net/blog/, then the image is resolved to http://www.nczonline.net/blog/smile.gif. This is how normal URL resolution works. Adding a <base> tag alters the default URL resolution. Example:
<html>
<head>
<base href="/stories/">
</head>
<body>
<img src="smile.gif">
</body>
</html>
If this page has a path of http://www.nczonline.net/blog/, then the image’s URL is resolved to http://www.nczonline.net/stories/smile.gif. That’s because the base URL is reset to http://www.nczonline.net/stories/ by the <base> tag, so all URLs on the page are now resolved relative to that address. This is a convenient way to avoid duplicating the same URL information for every link on the page.
The approach
For some reason that I still don’t understand, the act of setting a base URL on a page causes Internet Explorer to ignore any <img src=""> that appears on the page, including <input type="image" src="">. As long as a
If you have the possibility of an empty string image URL on your page, it would serve you well to set the base URL for the page. Since you probably don’t want to actually change how the URL is resolved, just set the base URL to the current path for the page. In PHP, you can use this code:
echo "<base href=\"{$_SERVER['REQUEST_URI'];}\">";
That way, you’re including the base URL to avoid the extra image request without changing how all URLs on the page are resolved.
Conclusion
Specifying a base URL on a page is a quick and easy solution to prevent an extra request due to an empty image source URL in Internet Explorer. It’s important to note that this has no effect on the other browsers with this behavior. For those, you’ll still have to use the server-side detection logic shared in the previous post to detect such a request and abort before server resources are used. At least for Internet Explorer, the solution is simple and can save your server.
Credits
Although I started running tests with this as part of an investigation based on a WHAT-WG mailing list discussion, Ben Alman hinted at this solution in a tweet to me that I apparently missed. Had I been paying attention, this would have been a much faster followup!
Disclaimer: Any viewpoints and opinions expressed in this article are those of Nicholas C. Zakas and do not, in any way, reflect those of my employer, my colleagues, Wrox Publishing, O'Reilly Publishing, or anyone else. I speak only for myself, not for them.
