by Andreas

Jquery + JSON: IE8/IE9 treats response as downloadable file

We’ve recently been working with the pretty brilliant web based elFinder file manager. This component has a truckload of features, but for a very specific function (uploading files through the web browser) we came across a tricky problem. Upon receiving a JSON response from an HTTP handler (.asxh) Internet Explorer 8 triggered the following warning:

To Help Protect Your Security, Internet Explorer has blocked this website from displaying content with security certificate errors. Click here for options…

image

After opting for “Download file”, subsequent responses just triggered the “Save file” dialog box. The contents of this file was the perfectly fine JSON response, but this was not understood by Internet Explorer 8. In Internet Explorer 9 the warning was supressed and the response seemed to simply be ignored, leaving our jQuery component waiting for its JSON reply in vain. Chrome, Opera and Firefox had no issues, and processed the response as pure JSON.

After a fair bit of research trying to find the bug both server and client side, it turned out that Internet Explorer didn’t like that the Content-Type in the response header was "application/json”. Setting the Content-Type to “text/html” specifically for IE in the .asxh handler before returning the JSON response did the trick. It now works as expected across all browsers.

A simple method checks the browser and updates the content type if applicable (note: this is just an extract):

        private static string SetContentTypeBasedOnBrowserAndCommand(HttpContext context)
        {
            var contentType = "application/json"; // default
            // if browser is IE
            if (DegreeCore.Util.BrowserUtil.IsIE(context.Request.Browser))
            {
                // override response
                 contentType = "text/html"; 
            }

            return contentType;

        }

 

The non-reversible hair loss from occational problems like this has yet again been put on hold – for now.

Tags: ,

25 comments on “Jquery + JSON: IE8/IE9 treats response as downloadable file

  1. Zlatko on said:

    I have the same problem (json) in Firefox!???

  2. Really? Have you tried changing the content type to “text/html” before returning the response for FF as well?

    Another thing you can check is what the “accepted types” in the Request header says for your application. Make sure it includes “text/html” or at least “*/*”, or else the browser might not accept it and only offer you the option to save it as a file.

    Let me know how you go, because this could be useful for others!

  3. Zlatko on said:

    it seems that everything is ok!? But it isn’t!!!

    elFinder 2.0

    I have the same message when open elFinder!

    Invalid backend response.
    Data is not JSON.

  4. Zlatko on said:

    In head I have: meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″

  5. It was actually in ElFinder my problem occured as well. Have you written your own .NET connector, or is it in PHP or some other language? While researching this problem I came across an article with the same “Invalid backend response. Data is not JSON” error as the one you have:

    https://github.com/Studio-42/elFinder/issues/263

    I originally posted my problem there as well, but was told this had to be a connector issue in my case. Maybe that article might help you? The bugfix for that particular problem is shown here: https://github.com/Studio-42/elFinder/commit/60ce68418b

  6. Regarding your last comment:

    Is that from the response header? Can you also send the content-type and accepted parameters from the request header?

  7. Zlatko on said:

    REQUEST
    User-Agent Mozilla/5.0 (Windows NT 6.1; rv:15.0) Gecko/20100101 Firefox/15.0.1
    Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language sl,en-gb;q=0.7,en;q=0.3
    Accept-Encoding gzip, deflate

    RESPONSE
    RESPONSE HTTP/1.1 200 OK
    Server nginx/1.0.6
    Content -Type text/html
    X-Powered-By PHP/5.3.8
    Content-Encoding gzip

  8. OK..

    Which platform are you running ElFinder on? PHP, Python, .NET… ? And which operation triggers this problem (in my case it was the UPDATE command)? Have you written the connector yourself or is it one of the ones listed here: https://github.com/Studio-42/elFinder/wiki/3rd-party-connectors%2C-plugins%2C-modules

  9. Zlatko on said:

    Sorry! Wrong data!!!

  10. Does that mean you found and solved the problem?

  11. Zlatko on said:

    Not yet:(

  12. Aydar Akhmetov on said:

    Hi!
    I broke my brains while resolving this problem.
    My solution:

    header(‘Content-Type: text/plain; charset=utf-8′);
    header(‘X-Content-Type-Options: nosniff’);

  13. Zlatko on said:

    Thanks! I will try tomorrow!:)

  14. Aydar Akhmetov on said:

    Helped? :)

  15. Zlatko: did Aydars solution work?

  16. jkella on said:

    HI Andreas,

    Do we any option to run jquery drag and drop in Internet Explorer ..

  17. jQuery drag and drop should work in all browsers, but not sure I understand the question :) Is it related to this post, or just a general jQuery question?

  18. Shamir Salih on said:

    Thanks Aydar , I set the content type and it worked for me…

    header(‘Content-Type: text/plain; charset=utf-8′);

  19. Aydar Akhmetov on said:

    You are welcome :)

  20. Aydar Akhmetov on said:

    Do you use it: header(‘X-Content-Type-Options: nosniff’)?

  21. Shamir Salih on said:

    No – I havent it.

  22. Here’s a static method (no input/output) that detects IE and sets ContentType directly!

    public static void SetProperJsonContentType()
    {
    var ua = HttpContext.Current.Request.UserAgent;
    HttpContext.Current.Response.ContentType = (!String.IsNullOrEmpty(ua) && ua.ToLower().Contains(“msie”)) ? “text/html” : “application/json”;
    }

  23. Rodrigo on said:

    Hi, Great Post!

    I’m facing the same issue, but I’m not calling the url from a .jsp or .aspx page, I’m calling direclty from Browser URL. Do you know how can I change this on the browser configuration? I really need to call a JSON URL to use via IE, via Chrome is working properly. Thanks

  24. Kerem on said:

    You saved my day,
    thanks.

  25. Pingback: Kerem YILMAZ » IE doesn’t like “application/json” content type.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

52,477 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>