来自 URL referer 的 AWS S3 Bucket 策略/访问 - 访问被拒绝

Question

My problem is maybe trivial, but I can't find the good example or straight answer anywhere...

My setup:

• Web app client written using Apollo and ReactJS
• Server/API written using Apollo, ReactJS and GraphQL
• Database: Mongoose

What I want to achieve:

I want to upload files via browser using my application straight to Amazon S3 bucket and have the ability to later list those files with thumbnails (if those are images) in the app.

I have everything setup nicely when it comes to uploading to S3. I'm using AWS JS SDK, have setup API key and secret, all in all, good.

The problem:

Everything works properly as long as my bucket is completely public . But of course I don't want it to be public. This app will be for company internal use only, files or anything, can't be available to the public...

When I switch of public access to the bucket, I'm not longer able to even upload the files through my app, needless to say, I'm not able to see the files in my app...

I was trying to implement some bucket policy, that would allow files to be uploaded or seen if the referrer came from one of the IP addresses that I use to reach my app in the browser, but that did not work at all... (IP addresses shown in my policy below are not the one I'm using of course, I change them here for privacy)

{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow get requests originating from 1.1.1.1:3000",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "*",
            "Resource": "arn:aws:s3:::escape-dam/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "http://1.1.1.1:3000/*, http://1.1.1.1:4000/*, http://2.2.2.2:3000/*, http://2.2.2.2:4000/*"
                }
            }
        }
    ]
}

Dream solution:

Policy written in such a way, that my app will be able to send and receive files from S3 Bucket, without having to authorise each request. Basically, if you want to upload or request the file through the app you're allowed to, but not when trying to copy and paste the URL into the browser.

As an addition I have to state, that because this is an ReactJS app, it does not ask for the files from S3 Bucket itself. It passes the stored URI from the database to the client side of the app, which later gets rendered with the page itself, so not the server asks S3 for the file, but the user's browser does. I hope this clarify my problem in it's entirety;)

I hope I'm clear here and do not overstate something trivial, but I'm pretty new when it comes to dealing with S3

Thank you in advance for any help!

Answer 1

Since you want to upload from the frontend (client's browser) directly to your S3 bucket, the best solution is to use S3 SignedURL feature.

Uploading files: The way it works (roughly) is to have your backend services send an upload request to S3, which then generates an upload URL (with a POST or PUT method). The backend service returns this URL to the frontend client, who can then upload directly to S3. Cost reduction and better performance (especially with transfer acceleration) are just some of the benefits.

Downloading files: The backend service generates and returns this URL to the frontend client, who can than use this URL to directly access/download the file.

So the only way to upload or download the files from S3 is with the signed URL. You can also set the expiration time for each URL (the duration for how long the URL is valid)

Best, Stefan

Answer 2

So... Thank you all very much for your input. I've found the solution by combining your answers and further digging into the S3 docs.

What I'm doing in my policy is: Blocking any IP other than my server and Blocking any referer other than my app URL

Please, check my updated policy below. If you also could tell me if this is secure enough, that would be great, As an addition: my bucket public access settings looks like this:

Block all public access
 Off
Block public access to buckets and objects granted through new access control lists (ACLs)
 On
Block public access to buckets and objects granted through any access control lists (ACLs)
 Off
Block public access to buckets and objects granted through new public bucket or access point policies*
 On
Block public and cross-account access to buckets and objects through any public bucket or access point policies*
 On

{
    "Version": "2012-10-17",
    "Id": "S3PolicyId1",
    "Statement": [
        {
            "Sid": "IPAllow",
            "Effect": "Deny",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:GetObjectVersion"
            ],
            "Resource": [
                "arn:aws:s3:::my-s3-bucket-name",
                "arn:aws:s3:::my-s3-bucket-name/*"
            ],
            "Condition": {
                "StringNotLike": {
                    "aws:Referer": [
                        "http://1.1.1.1:3000/*",
                        "http://1.1.1.1:4000/*",
                        "http://2.2.2.2:3000/*",
                        "http://2.2.2.2:4000/*"
                    ]
                },
                "NotIpAddress": {
                    "aws:SourceIp": [
                        "1.1.1.1",
                        "2.2.2.2"
                    ]
                }
            }
        }
    ]
}

Answer 3

You can use CloudFront + OAI ( origin access identity) with bubket policy that only allows access to OAI, check out policy from docs . In this way request coming from cloudfront can only access your bucket. another benefit cloudfront offer is caching on edge locations, which improves latency and reduce your cost for number of request on s3 bucket.

{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity EH1HDMB1FH2TC"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::DOC-EXAMPLE-BUCKET/*"
        }
    ]
}