EXTJS Fileupload - IE8安全栏问题答案

【问题标题】：EXTJS Fileupload - Problem with IE8 security barEXTJS Fileupload - IE8安全栏问题
【发布时间】：2011-05-27 04:40:00
【问题描述】：

我正在尝试制作一个 EXTJS 应用程序来发送带有附件的电子邮件。所以我有一个非常基本的表单，其中包括主题的文本字段，另一个带有 inputType: 'file' 的文本字段作为附件，以及一个 html 编辑器。

var panel = new Ext.form.FormPanel({
    fileUpload:true,
    labelAlign: 'right',        
    monitorValid: true,
    border: false,
    bodyBorder: false,       
    defaults:{
        anchor: '100%',
        labelStyle: 'font-weight:bold;'
    },
    items: [
        {
            xtype: 'textfield',
            fieldLabel: 'SUBJECT',
            name: 'subject',
            allowBlank: false
        },
        {
            xtype: 'textfield',
            fieldLabel: 'ATTACHMENT',
            name: 'file_to_upload',
            anchor: '80%',
            itemCls: 'attachment-field',
            allowBlank: true,
            inputType:'file'
        },
        {
            xtype: 'htmleditor',
            fieldLabel:'MESSAGE',
            name:'msg'
        }
    ]
});

这个表单被放置在一个窗口中，该窗口将提交给服务器：

var window = new Ext.Window({
    title: 'Compose a message',
    height: 600,
    width: 800,
    autoScroll: true,
    border: false,
    bodyBorder: false,        
    items: panel,
    buttons:[
        {
            text: 'Send',
            formBind: true,
            handler: function() {
                panel.getForm().submit({
                    url: *Call to the server*,
                    method  : 'POST',
                    timeout: 300000, // 5min
                    waitMsg: 'Please wait while we send your email',                        
                    success :function(form, action) {
                        window.close();
                    }                                                
                });
            }
        },
        {
            text: 'Close',
            handler: function() {
                window.close();
            }
        }
    ]
});

当我使用 FF 将表单提交到服务器时，一切都很好。但是IE8出现问题。 IE 显示安全栏说我正在尝试将文件下载到计算机，这与我正在做的完全相反（我正在上传文件）！

如何防止触发此安全栏？

--编辑 2010 年 12 月 18 日 16:48 EST-- 是否有可能是由这个引起的：（来自 EXTJS basicForm 文档）

文件上传不是使用普通的“Ajax”技术执行的，也就是说它们不是使用 XMLHttpRequests 执行的。取而代之的是，表单以标准方式提交，并临时修改了 DOM 元素，使其目标设置为引用动态生成的隐藏对象，该对象被插入到文档中，但在收集返回数据后被删除。浏览器解析服务器响应以创建 IFRAME 文档。如果服务器使用 JSON 发送返回对象，则 Content-Type 标头必须设置为“text/html”，以便告诉浏览器将未更改的文本插入到文档正文中。对 HTML 解析器很重要的字符必须作为 HTML 实体发送，因此将“

我不认为我理解那里的解释的所有内容......

-- 结束编辑--

谢谢阿兰

【问题讨论】：

标签： javascript ajax internet-explorer file-upload extjs

【解决方案1】：

在服务器端，您必须执行以下操作，即使看起来有点奇怪：

将响应类型设置为“text/html”
发送 {"success": true} 作为 JSON 对象

响应类型使浏览器在 ExtJS 使用的 iframe 中呈现响应 ExtJS 从 DOM 中读取，并将其解释为 JSON，寻找成功字段。

【讨论】：

谢谢，但这正是我正在做的。我重新验证并且我的服务器生成：@Produces(value = {"application/json", "text/html"}) 我返回一个带有“succes”的哈希图：true。奇怪的是它在 FF 中完美运行...
如果把“application/json”的东西拿出来怎么办？
我对您的回答投了票，因为它解决了部分问题。如果应用程序/json 不存在，它会产生真正的不同。 IE 不再弹出安全消息。
我不完全理解这个变通办法的本质，但它在 IE8 中对我有用。
感谢为我工作，我正在使用 Ext 5，我不明白为什么这个错误还没有修复。

【解决方案2】：

这是 Ext 写入文档的内容。

<iframe id="ext-gen170" name="ext-gen170" class="x-hidden" src="about:blank"><html><head></head><body></body></html></iframe>

这个问题可以通过设置一个有效的 https src 路径来解决，例如https://yousite.com/blank.html

我还没有找到如何修改 src。欢迎任何帮助

【讨论】：

设置 src 不起作用，但它通过将响应内容类型设置为 text\html 来工作

【解决方案3】：

我相信 ExtJs 正在这样做：

    if(Ext.isIE) {
        frame.src = Ext.SSL_SECURE_URL;
    }

该字符串定义为：

    /**
     * URL to a blank file used by Ext when in secure mode for iframe src and onReady src to prevent
     * the IE insecure content warning (<tt>'about:blank'</tt>, except for IE in secure mode, which is <tt>'javascript:""'</tt>).
     * @type String
     */
    SSL_SECURE_URL : isSecure && isIE ? 'javascript:""' : 'about:blank',

...isSecure 是：

    isSecure = /^https/i.test(window.location.protocol);

这就是你的 about:blank 的来源。如果这不起作用，听起来您需要将该 URL 设置为适合您的东西（或者 isSecure 的值可能正在起作用）。

【讨论】：

【解决方案4】：

根据您的建议和许多测试，这就是我所做的。我只是在将 extall 库包含到我的 https 应用程序上的空白图像后立即分配 SSL_SECURE_URL 常量。

Ext.SSL_SECURE_URL = 'https://mysite.com/blank.gif';

没有问题了。

非常感谢。

【讨论】：