Amazon S3 Client Side Encryption Javascript

Question

Trying to get Amazon S3 Client Side Encryption working with Javascript.

Establishing SSE for a particular S3 object within a bucket is optional and can easily be established at the individual object level. A "blanket" policy can also be set that requires all data sent to S3 buckets to be encrypted. A sample of such a policy is as follows:

{
  "Version":"2013-05-17",
  "Id":"PutObjPolicy",
  "Statement":[{
     "Sid":"DenyUnEncryptedObjectUploads",
     "Effect":"Deny",
     "Principal":{
      "AWS":"*"
     },
     "Action":"s3:PutObject",
     "Resource":"arn:aws:s3:::SensitiveBucket/*",
     "Condition":{
      "StringNotEquals":{
        "s3:x-amz-server-side-encryption":"AES256"
      }
     }
   }
  ]
}

To successfully place any data into this S3 bucket, the request would need to include the "x-amz-server-side-encryption" header.

Since it is client side I got this jSON Policy setup:

{
  "expiration": "2020-01-01T00:00:00Z",
  "conditions": [
    {"bucket": "angular-file-upload"},
    ["starts-with", "$key", ""],
    {"acl": "private"},
 { "x-amz-server-side-encryption": "AES256"},
 {"x-amz-server-side​-encryption​-customer-key": "ABC1234835784375349754857893"},
 {"x-amz-server-side​-encryption​-customer-key-MD5": "d0259989a64a9234457dbc51d5202c24"},
   ["starts-with", "$Content-Type", ""],
    ["starts-with", "$filename", ""],
    ["content-length-range", 0, 524288000]
  ]
}

to send files CORs-ways to S3 (POST) and am additionally sending the x-amz-server-side-encryption header during the Upload.

Tried with both of the json policies however all of them throwing the same results.

Response is the following:

    <Error><Code>AccessDenied</Code>
<Message>Invalid according to Policy: Extra input fields: x-amz-server-side​-encryption​-customer-key</Message><RequestId>...</RequestId><HostId>...</HostId></Error>

Someone knows what's going on here? Lately i'm even getting curious whether it is even possible at all to encrypt client side with JS & Cors.

Cheers.

Answer 1

I was able to rid myself of this warning by including x-amz-server-side-encryption in both the policy that was created and base64 encoded, as well as the form data that was sent in the AJAX request.

Policy:

            var s3Policy = {
                "expiration": formatted,
                "conditions": [
                    { "bucket": "MYBUCKET" },
                    { "acl": config.acl },
                    { "x-amz-server-side-encryption": "AES256" },
                    [ "eq", "$key", path],
                    [ "eq", "$Content-Type", mimetype ],
                    [ "content-length-range", 0, maxSize ],
                ]
            };

Form Post Data:

            data.params = {
                key: path,
                AWSAccessKeyId: key,
                acl: acl,
                Policy: base64Policy,
                Signature: signature,
                "Content-Type": mimetype,
                "x-amz-server-side-encryption": "AES256",
            },

For completeness, I also have the following CORS Config:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
        <AllowedHeader>Content-Type</AllowedHeader>
        <AllowedHeader>x-amz-acl</AllowedHeader>
        <AllowedHeader>origin</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

And Bucket Policy (to force encryption required):

{
    "Version": "2012-10-17",
    "Id": "Policy1447114958606",
    "Statement": [
        {
            "Sid": "Stmt1447114951553",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::MYBUCKET/*",
            "Condition": {
                "StringNotEquals": {
                    "s3:x-amz-server-side-encryption": "AES256"
                }
            }
        }
    ]
}

My code to actually post the file to s3, looks like this, but it will depend on libs and wrappers you choose to use:

    // Build the form data (this is what we will eventually post)
    var fd = new FormData();
    if (data.params)
    {
        for (var prop in data.params) {
            if (data.params.hasOwnProperty(prop)) {
                fd.append(prop,data.params[prop]);
            }
        }
    }
    fd.append('file', file);

    // Post data
    var deferred = $q.defer();
    var req = $.ajax({
        type: 'POST',
        url: data.url,
        data: fd,
        cache: false,
        contentType: false,
        processData: false,
        success: function(response, textStatus, jqXHR) { deferred.resolve(response); },
        error: function(jqXHR, textStatus, errorThrown) { deferred.reject(errorThrown || "Upload failed, try again"); },
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) myXhr.upload.addEventListener('progress', function (progress) { deferred.notify(progress); }, false);
            return myXhr;
        }
    });
    var promise = deferred.promise;
    promise.cancel = function()
    {
        req.abort();
        deferred.reject("Cancelled");
    };
    return promise;