Question

我正在尝试为网站提供安全的文件服务功能。我考虑了几个适合我当前模型的选项：

使用XMLHttpRequest检索文件内容，然后根据文件类型和用户首选项提供显示或另存为功能。

我理解如何使用二进制Ajax功能（blob，arraybuffer）来检索二进制文件，我已经看到this shim用于实现HTML5另存为功能，但我担心这种技术的性能：大文件。我还没有测试过，但我不希望使用这种技术下载1GB +文件的性能良好。

在链接上设置HTTP标头（见下文），这样我就可以在标题中传递一个身份验证令牌，但仍然像正常下载那样将文件直接提供给浏览器，而不是通过XMLHttpRequest检索内容的麻烦

我更喜欢这种方法，因为它非常适合当前的身份验证框架，并且只需要很少的额外代码，但据我所知，只有Firefox支持我想做的事情。

Firefox可以使用httpChannel：Firefox HTTP channels在JavaScript代码中明确启动的网络调用中设置http标头。有谁知道其他浏览器是否支持此功能？我希望能够设置一个链接，例如：

window.location.href = 'blah';

并让代码观察设置自定义HTTP标头的网络流量：

httpChannel.setRequestHeader("X-Hello", "World", false);

虽然Firefox可以做到这一点非常酷，但我需要一个跨浏览器的解决方案。我见过这个问题：

Setting request header, in a URL

这基本上就是我想要做的，但唯一推荐的解决方案是设置会话cookie，我没有使用。

Answer 1

好的，所以我在我的问题中使用选项1构建了一个函数。仍然担心文件大小和性能，但这是一个基本的解决方案：

viewFile : function( fileItem ) {

    var xhr = new XMLHttpRequest(), token, contentType, filename;

    xhr.onreadystatechange = function() {

        token = xhr.getResponseHeader( "X-Token" );

        if( token !== undefined && token !== null ){
            app.model.set( "token", token );
            sessionStorage.token = token;
        }

        if ( xhr.readyState === 4 ) {
            contentType = xhr.getResponseHeader( "Content-Type" );
            filename = xhr.getResponseHeader( "X-Filename" );
            response = xhr.response;
            var blob = new Blob([xhr.response], { type: contentType } );
            saveAs( blob, filename ); 
        }
    };

    xhr.open( 'GET', "/index.cfm/api/filelocker/" + fileItem.fileid, true );
    xhr.responseType = "arraybuffer";
    xhr.setRequestHeader ( "X-Token", app.model.get( "token" ) );

    xhr.send();     
}

此技术使用现有的auth机制。我会看到它对大文件的效果如何。

安全文件服务

1 个答案: