evaporate.js s3 direct uploads 403

Question

I am attempting to upload files directly to the browser to S3 using evaporate js. I followed the tutorial at jqueryajaxphp.com but I am having a problem with the signature

Signature.php

<?php

$to_sign = $_GET['to_sign'];
$secret = 'AWS_SECRET';
$hmac_sha1 = hash_hmac('sha1', $to_sign, $secret, true);
$signature = base64_encode($hmac_sha1);
echo $signature;

Upload function

function largeFileUPload(file) {

    var ins = new Evaporate({
        signerUrl: './includes/s3-signature.php',
        aws_key: "AWS_KEY_XXXXXXX",
        bucket: 'bucket-name',
        awsRegion: 'eu-west-1',
        cloudfront: true,
        aws_url: 'http://bucket-name.s3-accelerate.amazonaws.com',
        // partSize: 10 * 1024 * 1024,
        s3Acceleration: true,
        computeContentMd5: true,
        cryptoMd5Method: function (data) { return AWS.util.crypto.md5(data, 'base64'); },
        cryptoHexEncodedHash256: function (data) { return AWS.util.crypto.sha256(data, 'hex'); }
    });
    // http://<?=$my_bucket?>.s3-<?=$region?>.amazonaws.com

    ins.add({
        name: 'evaporateTest' + Math.floor(1000000000*Math.random()) + '.' + file.name.replace(/^.*\./, ''),
        file: file,
        xAmzHeadersAtInitiate : {
            'x-amz-acl': 'public-read'
        },
        signParams: {
            foo: 'bar'
        },
        complete: function(r){
            console.log('Upload complete');
        },
        progress: function(progress){
            var progress = Math.floor(progress*100);
            console.log(progress);
        },
        error: function(msg){
            console.log(msg);
        }
    });
}

I am getting to following response from from the s3 end point

<Code>SignatureDoesNotMatch</Code>
<Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message>

I have also tried the blueimp plugin but this fails with files over 200MB

score 0 · Answer 1 · answered Apr 05 '18 at 14:10

The Signature.php file form the tutorial from jqueryajaxphp.com was causing the problem. I altered the php signature file form the evaporate.js docs and it solved the problem

Signature.php

$to_sign = $_GET['to_sign'];
$secret = 'AWS_SECRET';

$formattedDate = substr($dateTime, 0, 8);

//make the Signature, notice that we use env for saving AWS keys and regions
$kSecret = "AWS4" . $secret;
$kDate = hash_hmac("sha256", $formattedDate, $kSecret, true);
$kRegion = hash_hmac("sha256", "eu-west-1", $kDate, true);
$kService = hash_hmac("sha256", 's3', $kRegion, true);
$kSigning = hash_hmac("sha256", "aws4_request", $kService, true);
$signature = hash_hmac("sha256", $to_sign, $kSigning);

echo $signature;

evaporate.js s3 direct uploads 403

1 Answers1