Iframe IE doesn't handle app / json response properly

Question

I am currently updating parts of the ASP.NET MVC website to be more RESTful using the ASP.NET Web API. One of the features that we are moving to RESTful design is the file upload. For the client, we use the jquery ajaxForm plugin to wrap the creation of an iframe that will submit a form containing a file input element. This works great with ASP.NET MVC.

When changing it to use our web API endpoint, which returns a response with the Content-Type "application / json", we noticed problems with Internet Explorer 9. It seems that the ajaxForm success function has never been called. From what I can say, it seems that the iframe in IE interprets the response body with the Content-Type "application / json" as the file attachment for download. This means that it never fires the “loaded” iframe event, which means that the onload ajaxForm event handler will never fire and our ajaxForm success function will never be called.

We also noticed a problem in IE 7, but we were not able to recreate the problem in the latest versions of Firefox or Chrome, even if they forced them to use an iframe, rather than an API file with FormData.

To fix this problem at the moment, I now force the Content-Type response back to "text / plain", and this is what we returned earlier from the actions of the ASP.NET MVC controller that handled file uploads. It makes everything work again.

My questions:

• Is there a way to save the response of the Content-Type web content API as "application / json" and IE interprets it correctly?
• Is there a better way to do file uploads when using IE and the web API? Maybe another plugin or a better technique?

Additional restrictions: I cannot use ActiveX or Flash for this website. I can use another plugin, but only if it has general cross-browser support. (IE, Chrome, Firefox, Safari, etc.)

My HTML:

<form id="uploadFormId" action="" method="post" enctype="multipart/form-data" encoding="multipart/form-data"> <input type="file" name="files[]"/> </form> 

My javascript:

 function onFileChange( e ) { if ( e.type === e.originalEvent.type ) { var filePath = $( e.currentTarget ).val(); if ( filePath !== '' ) { $( this ).closest( 'form' ).submit(); } } }; $( function() { $( '#uploadFormId' ).ajaxForm( { url: "api/Files/1234", dataType: 'json', success: function ( response ) { alert( response ); }, error: function ( xhr, status, error ) { alert( status ); } } ); $( '#uploadFormId input[type="file"]' ).bind( 'change', onFileChange ); }); 

"application / json" response headers (not working in IE):

 Cache-Control:no-cache Content-Length:337 Content-Type:application/json; charset=utf-8 Date:Wed, 17 Jul 2013 13:10:47 GMT Expires:-1 Pragma:no-cache Server:Microsoft-IIS/8.0 X-AspNet-Version:4.0.30319 X-Powered-By:ASP.NET 

"text / simple" response headers (works in IE):

 Cache-Control:no-cache Content-Length:322 Content-Type:text/plain Date:Wed, 17 Jul 2013 13:17:24 GMT Expires:-1 Pragma:no-cache Server:Microsoft-IIS/8.0 X-AspNet-Version:4.0.30319 X-Powered-By:ASP.NET 

Answer 1

When ajaxForm uses the iframe send mode, the response from the call is necessarily displayed in the body of the iframe. This means that it should be the type of content that the browser can display - usually HTML, but text/plain will also work. However, the browser cannot display application/json as a page.

There is a definite problem with using text/plain too, as browsers can embrace content and treat the resource as HTML if the data has something like an HTML tag. If your JSON returns with user-provided data, this may allow someone to embed executable JavaScript in your site (XSS attack).

As suggested by the ajaxForm doc , you should detect when the call comes from an iframe message instead of AJAX and returns a text/html response using textarea wrapper in this case:

To take into account the script and JSON response problems when using iframe mode, the form plugin allows you to include these answers in a textarea element, and it is recommended that you do this for these types of answers when used in conjunction with file uploads and older browsers.