Custom Headers for Content-Type in the web.config file? Don’t do it.

Life’s about lessons learned, and here is one lesson I learned that I hope will save someone else from hours of frustration.  As I scoured the web looking for ways to improve the SEO of one of my sites and conform to standards, I must have run across some article, post, or tip which suggested I add this to the web.config file:

<configuration>
  <httpprotocol>
    <customheaders>
      <add name="Content-Type" value="text/html; charset=utf-8"></add>
    </customheaders>
  </httpprotocol>
</configuration>

I probably did it because I didn’t want to type out:

<head>
  <meta name="Content-Type" value="text/html; charset=utf-8" />
</head>

on every page and because of maintenance reasons.  Well, everything was fine and dandy until I decided to convert one of my .aspx pages to .html and write my own AJAX code.  I didn’t even notice the problem until I tried pulling up my site in Internet Explorer as I do most of my testing on Google Chrome.  Everything displayed fine on Google Chrome, but on Internet Explorer, it broke the CSS of the page and was asking you if you wanted to open or save the default document instead of rendering it.  I pulled my hair out researching and troubleshooting the problem (checked to see if it was a browser compatibility issue, due to caching, settings enabled/disabled, etc.) and almost gave up, but I finally figured it out when I reviewed the console from Google Chrome’s Developer tools and noticed I was getting these strange error messages:

Resource interpreted as Image but transferred with MIME type text/ html
Resource interpreted as Script but transferred with MIME type text/ html
Resource interpreted as Stylesheet but transferred with MIME type text/ html

It was adding HTTP headers to all my links which caused Internet Explorer to interpret them incorrectly.  Once I removed it, my site rendered correctly again on Internet Explorer.  I also learned there is a correct way of adding HTTP headers for charset according to W3C.

For ASP and ASP.Net pages, you can add this line to the page:

< %Response.charset="utf-8"%>

Or you can add this to the web.config file:

<configuration>
  <system .web>
    <globalization fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" culture="auto" uiCulture="auto"></globalization>
  </system>
</configuration>

Leave a Reply