问题

Question

问题

我正在尝试从浏览器直接将图像上传到S3，并且通过boto的S3Connection.generate_url方法应用了content-length-range权限。

有大量有关signing POST forms，setting policies in general甚至heroku method for doing a similar submission的信息。我无法弄清楚我的生活是如何将“内容长度范围”添加到签名网址。

使用boto的generate_url方法（下面的示例），我可以指定策略标头，并使其适用于正常上传。我似乎无法添加的是对最大文件大小的策略限制。

服务器签名代码

## django request handler 
from boto.s3.connection import S3Connection
from django.conf import settings
from django.http import HttpResponse
import mimetypes
import json

conn = S3Connection(settings.S3_ACCESS_KEY, settings.S3_SECRET_KEY)
object_name = request.GET['objectName']
content_type = mimetypes.guess_type(object_name)[0]

signed_url = conn.generate_url(
    expires_in = 300, 
    method = "PUT", 
    bucket = settings.BUCKET_NAME, 
    key = object_name,
    headers = {'Content-Type': content_type, 'x-amz-acl':'public-read'})

return HttpResponse(json.dumps({'signedUrl': signed_url}))

在客户端上，我使用基于ReactS3Uploader的tadruj's s3upload.js script。它不应该影响任何东西，因为它似乎只是传递了signedUrls所涵盖的内容，但为了简单起见，将其复制到下面。

ReactS3Uploader JS Code（简化）

uploadFile: function() {
    new S3Upload({
        fileElement: this.getDOMNode(),
        signingUrl: /api/get_signing_url/,
        onProgress: this.props.onProgress,
        onFinishS3Put: this.props.onFinish,
        onError: this.props.onError
    });
},

render: function() {
    return this.transferPropsTo(
        React.DOM.input({type: 'file', onChange: this.uploadFile})
    );
}

S3upload.js

S3Upload.prototype.signingUrl = '/sign-s3';
S3Upload.prototype.fileElement = null;

S3Upload.prototype.onFinishS3Put = function(signResult) {
    return console.log('base.onFinishS3Put()', signResult.publicUrl);
};

S3Upload.prototype.onProgress = function(percent, status) {
    return console.log('base.onProgress()', percent, status);
};

S3Upload.prototype.onError = function(status) {
    return console.log('base.onError()', status);
};

function S3Upload(options) {
    if (options == null) {
        options = {};
    }
    for (option in options) {
        if (options.hasOwnProperty(option)) {
            this[option] = options[option];
        }
    }
    this.handleFileSelect(this.fileElement);
}

S3Upload.prototype.handleFileSelect = function(fileElement) {
    this.onProgress(0, 'Upload started.');
    var files = fileElement.files;
    var result = [];
    for (var i=0; i < files.length; i++) {
        var f = files[i];
        result.push(this.uploadFile(f));
    }
    return result;
};

S3Upload.prototype.createCORSRequest = function(method, url) {
    var xhr = new XMLHttpRequest();

    if (xhr.withCredentials != null) {
        xhr.open(method, url, true);
    }
    else if (typeof XDomainRequest !== "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
    }
    else {
        xhr = null;
    }
    return xhr;
};

S3Upload.prototype.executeOnSignedUrl = function(file, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', this.signingUrl + '&objectName=' + file.name, true);
    xhr.overrideMimeType && xhr.overrideMimeType('text/plain; charset=x-user-defined');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var result;
            try {
                result = JSON.parse(xhr.responseText);
            } catch (error) {
                this.onError('Invalid signing server response JSON: ' + xhr.responseText);
                return false;
            }
            return callback(result);
        } else if (xhr.readyState === 4 && xhr.status !== 200) {
            return this.onError('Could not contact request signing server. Status = ' + xhr.status);
        }
    }.bind(this);
    return xhr.send();
};

S3Upload.prototype.uploadToS3 = function(file, signResult) {
    var xhr = this.createCORSRequest('PUT', signResult.signedUrl);
    if (!xhr) {
        this.onError('CORS not supported');
    } else {
        xhr.onload = function() {
            if (xhr.status === 200) {
                this.onProgress(100, 'Upload completed.');
                return this.onFinishS3Put(signResult);
            } else {
                return this.onError('Upload error: ' + xhr.status);
            }
        }.bind(this);
        xhr.onerror = function() {
            return this.onError('XHR error.');
        }.bind(this);
        xhr.upload.onprogress = function(e) {
            var percentLoaded;
            if (e.lengthComputable) {
                percentLoaded = Math.round((e.loaded / e.total) * 100);
                return this.onProgress(percentLoaded, percentLoaded === 100 ? 'Finalizing.' : 'Uploading.');
            }
        }.bind(this);
    }
    xhr.setRequestHeader('Content-Type', file.type);
    xhr.setRequestHeader('x-amz-acl', 'public-read');
    return xhr.send(file);
};

S3Upload.prototype.uploadFile = function(file) {
    return this.executeOnSignedUrl(file, function(signResult) {
        return this.uploadToS3(file, signResult);
    }.bind(this));
};


module.exports = S3Upload;

任何帮助都会在这里受到高度赞赏，因为我现在已经把头撞到了墙上好几个小时了。

Answer 1

您无法将其添加到已签名的PUT网址。这仅适用于带有POST的签名策略，因为这两种机制非常不同。

签署URL是有损的（缺少更好的术语）过程。您生成要签名的字符串，然后对其进行签名。您发送带有请求的签名，但是您丢弃并且不发送字符串以进行签名。 S3然后重新构造要签名的字符串应该接收的请求，并生成应该与该请求一起发送的签名。只有一个正确的答案，S3不知道你实际签署了什么字符串。签名匹配，或者不匹配，因为您构建了不正确签名的字符串，或者您的凭据不匹配，并且它不知道这些可能性中的哪一种。它只根据您发送的请求知道您应签名的字符串以及应该是的签名。

考虑到这一点，对于content-length-range使用签名的URL，客户端需要实际发送带有请求的这样的标头......这没有多大意义。

相反，通过POST上传，有更多信息传达给S3。这不仅取决于您的签名是否有效，还有您的政策文件......因此可以在请求中包含指令 - 政策。它们受签名保护不被更改，但它们不加密或散列 - 整个策略可由S3读取（因此，相反，我们称之为相反，“无损”。）

这种差异就是为什么在使用PUT的情况下，您无法使用POST执行的操作。

如何通过boto设置s3浏览器上传的内容长度范围

问题

服务器签名代码

ReactS3Uploader JS Code（简化）

S3upload.js

1 个答案: