Amazon S3 GET object Access Denied

Question

Im developing an AngularJS (frontend) + Rails API (backend) website. Im using Amazon S3 to store images.

Im able to upload an image from Rails to S3 using the aws sdk. I see the image in my S3 bucked. However when I try to get it later from an AngularJS view, my GET request gets a Forbidden: Access denied error. I guess the problem is related to the bucket or image object permissions, but I cant figure out what.

This is a summary of how I upload the image:

AWS.config(
        :access_key_id => 'access-key', 
        :secret_access_key => 'secret-key',
        :s3_endpoint => 's3-eu-west-1.amazonaws.com'
      )
key = 'key_path_in_bucket'

# Image is stored in S3
      s3 = AWS::S3.new
      puts "S3=" + s3.inspect
      bucket = s3.buckets[bucketName]            
      obj = bucket.objects[key]
      puts "obj=" + obj.inspect                  
      obj.write(photo)

NOTE: I dont use any permissions in the upload request (when I check the image in S3, I see in properties there isnt any permissions set).

And this is my bucket policy:

{
    "Version": "2008-10-17",
    "Id": "Policy1399551968880",
    "Statement": [
        {
            "Sid": "Stmt1399551891404",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::yanpy.dev/*"
        },
        {
            "Sid": "Stmt1399551962551",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:PutObject",
            "Resource": "arn:aws:s3:::yanpy.dev/*"
        }
    ]
}

This is my GET request:

 Remote Address:178.236.7.33:80
    Request URL:http://yanpy.dev.s3.amazonaws.com/img/boats/6/52.jpg
    Request Method:GET
    Status Code:403 Forbidden
    Request Headersview source
    Accept:image/webp,*/*;q=0.8
    Accept-Encoding:gzip,deflate,sdch
    Accept-Language:en-US,en;q=0.8,es;q=0.6
    Connection:keep-alive
    Host:yanpy.dev.s3.amazonaws.com
    Referer:http://localhost:1234/app/index.html
    User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.132 Safari/537.36
    Response Headersview source
    Content-Type:application/xml
    Date:Thu, 08 May 2014 15:04:42 GMT
    Server:AmazonS3
    Transfer-Encoding:chunked
    x-amz-id-2:8QWnbecCc4nXd8+0zDxkqcECs+Sqkh8eBqq/FAWcy62mBRvK3VoCUbcBMywwCcyr
    x-amz-request-id:A7D2E1F80F3F0612

Just in case it helps, when I create an object in a bucket manually, I can also set it as public (with make public menu). However, when I upload the image from the aws sdk API, I cant do it (I get the following objects were not make public due to error).

Answer 1

I finally fixed it.

The problem was that I have two different AWS accounts. As defined in my bucket policy (above), so far, I grant read and write access to everyone. So, when I upload the images I was using the key credentials for the first user. I was able to upload. However, I couldnt open the files because I was using the S3 AWS account of second user.

I just changed the key credentials and everything is working perfectly.

Answer 2

Make sure you set this policy and try to access your image from a browser:

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::yanpy.dev/*"
        }
    ]
}

When this works set this CORS config and try from Angular:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>