Internet Explorer, MIME sniffing and broken images

Recently we noticed how some of our Drupal 7 sites displayed broken images. After further inspection, all these images appeared to be image styles which were converted from one format to another using the ImageCache Actions module. This is pretty commong when you need an image which has a mask applied to in order to cut-out a transparant PNG version.

Also, the broken images only appeared in Internet Explorer up to version 11 (what's new...). Other browsers were unaffected. But all this information didn't make sense. Why started images to appear broken all of the sudden? IE9 or IE10 sure as hell did not change so it must have been something else.

Zooming in on the imagecache actions module and its convert action. The thing is, Drupal 7 does not actually change the file extension of the image, it only changes the MIME-type. So an image is with extension .jpg is rendered as PNG. This is respected by all browsers, even older one like IE9. It might be a bit weird, and people tried to fix it, but there does not seem to be a way to do this in a clean non-hackish way. 

So how come this "suddenly" stopped working? Enter october 2015 and Drupal 7.40. This maintenance release included one alteration to your default .htaccess file, adding a nosniff header because it is an attack vector. But adding this also prevents IE (up to 11) to detect the right file-type for images like these, which results in broken images. Other projects have recently reported this issue as well.

The quick fix is easy, just remove the header. I'm not sure about the security implications but since 7.40 was a maintenance release and not a security release, they should be minor. Maybe somebody else can shed some light on this.

The longer fix is upgrading to Drupal 8 which has this problem fixed by actually changing the extension of the image, or revisiting the issue mentioned above trying to fix this in Drupal 7.


Drupal 8 + Gulp + BrowserSync

Read More »


This is the company blog of
Drupal specialist

We are located in Breda (Netherlands) and build websites using Drupal. More about us.

Content on this blog is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Netherlands License.

Creative Commons License

Recent Comments