S3 Upload image with pre-signed url from browser

Question

I am trying to upload data to an s3 bucket from the browser. I have generated a pre-signed url but I get a 403 forbidden response.

My server code is

const s3 = new AWS.S3({
  accessKeyId: settings.resourceBucketKey,
  secretAccessKey: settings.resourceBucketSecret,
  region: 'eu-west-1'
})

const params = {
  Bucket: 'my-bucket',
  Key: 'photo.png',
  ContentType: 'image/png',
  ACL: 'authenticated-read',
}

const url = s3.getSignedUrl('putObject', params)

console.log(url)

My client code is (using the generated url)

const input = $('#myinput')

      input.on('change', (res) => {
        var theFormFile = $('#myinput').get()[0].files[0];

        $.ajax({
          url: url,
          type: 'PUT',
          contentType: 'image/png',
          processData: false,
          data: theFormFile,
        }).success(function(){
          alert('success')
        })
      }, false)

I have set cors on on the bucket to:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

But I still get 403 forbidden on the response. The image I am trying to upload is call 'photo.png'. Am I missing something here?

jzonthemtn · Accepted Answer · 2016-09-18 20:55:30Z

5

The creator (you) of the pre-signed URL must have permissions to be able to access the S3 bucket to upload a file. This is more eloquently described in the S3 documentation:

A pre-signed URL gives you access to the object identified in the URL, provided that the creator of the pre-signed URL has permissions to access that object. That is, if you receive a pre-signed URL to upload an object, you can upload the object only if the creator of the pre-signed URL has the necessary permissions to upload that object.

Make sure the IAM user that is creating the pre-signed URL has the necessary permissions.

answered Sep 18, 2016 at 20:55

jzonthemtn

3,4241 gold badge25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wazzaday Over a year ago

Thanks this was exactly the issue!

Koushik Shom Choudhury Over a year ago

If it helps other wanderes. When this same is done via invoking Lambda functions, the function either should be invoked usng a IAM Role that that write & read access to S3, or it must contain access keys of a IAM user that has read & write access to S3. It may happen that the auto generated role which you chose during creation of Lambda function, not have required access to S3.

Liad Livnat · Accepted Answer · 2018-01-10 15:23:09Z

-5

Full implementation of getting signed url from browser - enjoy!

<body>
  <img height="200" width="200">
  <script>

    var mimes = {
        'jpeg': 'data:image/jpeg;base64,'
    };

      AWS.config.update({
          signatureVersion: 'v4',
          region: 'us-east-1',
          accessKeyId: '',
          secretAccessKey: ''
      });

      var bucket = new AWS.S3({params: {Bucket: 'xxxx'}});

      function encode(data)
      {
          var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },'');
          return btoa(str).replace(/.{76}(?=.)/g,'$&\n');
      }

      function getUrlByFileName(fileName,mimeType) {
          return new Promise(
              function (resolve, reject) {
                  bucket.getObject({Key: fileName}, function (err, file) {
                      var result =  mimeType + encode(file.Body);
                      resolve(result)
                  });
              }
          );
      }

      function openInNewTab(url) {
          var redirectWindow = window.open(url, '_blank');
          redirectWindow.location;
      }

      getUrlByFileName('sprites.png', mimes.jpeg).then(function(data) {
          //openInNewTab(data);
          document.querySelector('img').src = data;
      });

  </script>
</body>

answered Jan 10, 2018 at 15:23

Liad Livnat

7,49517 gold badges62 silver badges98 bronze badges

2 Comments

Liad Livnat Over a year ago

don't forget to add - <script src="sdk.amazonaws.com/js/aws-sdk-2.179.0.min.js"></…>

Matteo Over a year ago

I don't think is a good idea to put your secretAccessKey into client code

Collectives™ on Stack Overflow

S3 Upload image with pre-signed url from browser

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related