IE iframe无法正确处理application / json响应 [英] IE iframe doesn't handle application/json response properly

问题描述

我目前正在使用ASP.NET Web API将ASP.NET MVC网站的某些部分升级为更加RESTful。我们正在转向更RESTful设计的功能之一是文件上传。对于客户端，我们使用jquery插件 ajaxForm 来包装iframe的创建，iframe将提交包含文件输入元素。这对ASP.NET MVC很有用。

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

当更改它以使用我们的Web API端点时，它会返回Content-Type为application / json的响应，我们注意到Internet Explorer 9的问题。似乎从未调用过ajaxForm成功函数。据我所知，似乎IE中的iframe将Content-Type为application / json的响应正文解释为要下载的文件附件。这意味着它永远不会触发iframe的加载事件，这意味着永远不会触发ajaxForm onload事件处理程序，并且永远不会调用我们的ajaxForm成功函数。

When changing it to use our Web API endpoint, which returns a response with a Content-Type of "application/json", we noticed problems with Internet Explorer 9. It appears the ajaxForm success function was never called. From what I can tell, it appears that the iframe in IE interprets the body of a response with a Content-Type of "application/json" as a file attachment to be downloaded. This means it never fires the iframe's "loaded" event, which means the ajaxForm onload event handler will never be triggered, and our ajaxForm success function will never be called.

我们在IE 7中也注意到了这个问题，但我们无法在最新版本的Firefox或Chrome中重新创建这个问题，即使强迫他们使用iframe而不是使用FormData的File API。

We noticed the issue in IE 7 as well, but we could not recreate the issue in the latest release versions of Firefox or Chrome, even when forcing them to use an iframe rather than File API with FormData.

现在要解决这个问题，我现在强迫响应Content-Type回到text / plain，这是我们之前从处理文件上传的ASP.NET MVC控制器操作返回的。这使得一切都恢复了。

To resolve this issue for now, I am now forcing the response Content-Type back to "text/plain", which is what we were returning previously from the ASP.NET MVC controller actions which handled file upload. This makes everything work again.

我的问题：

• 有没有办法我可以将Web API响应Content-Type保持为application / json并让IE正确解释它吗？


• 使用IE和Web API时是否有更好的方法进行文件上传？也许是一个不同的插件或更好的技术？

其他限制：我不能在本网站上使用ActiveX或Flash。我可以使用不同的插件，但前提是它具有一般的跨浏览器支持。 （IE，Chrome，Firefox，Safari等）

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

我的HTML：

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

我的javascript：

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响应头（在IE中不起作用）：

"application/json" response headers (doesn't work 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 / plain响应头（适用于IE）：

"text/plain" 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

推荐答案

当ajaxForm使用iframe提交模式时，来自调用的响应必然会在iframe中。这意味着它必须是浏览器可以呈现的内容类型 - 通常是HTML，但 text / plain 也可能正常工作。但是，浏览器无法将 application / json 呈现为页面。

When ajaxForm uses the iframe submission mode, the response from the call is necessarily rendered in the body of the iframe. This means it must be a content type that the browser can render—generally HTML, but text/plain would also happen to work. However the browser can't render application/json as a page.

使用<时存在特定问题code> text / plain ，因为浏览器可以内容嗅探它，并且如果数据中看起来像HTML标记，则将资源视为HTML。如果您的JSON返回其中包含用户提供的数据，则可能允许某人将可执行JavaScript注入您的站点（XSS攻击）。

There is a specific problem with using text/plain too, in that browsers may content-sniff it, and treat the resource as HTML if there's something that looks like an HTML tag in the data. If your JSON comes back with user-supplied data in it, that could allow someone to inject executable JavaScript into your site (XSS attack).

如 ajaxForm doc 你应该检测到来自iframe帖子而不是AJAX的调用，并返回 text / html 在这种情况下使用textarea包装器的响应：

As suggested by the ajaxForm doc you're expected to detect when the call comes from an iframe post instead of AJAX, and return a text/html response with a textarea wrapper in that case:

为应对挑战使用iframe模式时脚本和JSON响应，Form Plugin允许将这些响应嵌入到textarea元素中，建议您在与文件上传和旧浏览器结合使用时对这些响应类型执行此操作。

To account for the challenges of script and JSON responses when using the iframe mode, the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads and older browsers.

这篇关于IE iframe无法正确处理application / json响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！