Adding a CORS policy to an S3 bucket#

Amazon S3 buckets that are configured to work as public websites can support CORS, allowing assets such as JavaScript modules to be loaded by JavaScript running on other domains.

This configuration happens at the bucket level - it’s not something that can be applied to individual items.

Here’s their documentation. As with so many AWS things it involves hand-crafting a JSON document: the documentation for that format, with useful examples, is here.

Using s3-credentials#

My s3-credentials tool now has a command for setting a CORS policy:

1
s3-credentials set-cors-policy my-cors-bucket \
2
  --allowed-method GET \
3
  --allowed-origin https://simonwillison.net/

Here’s the full documentation for that command.

Using the S3 web console#

I originally opted to use the S3 web console option - find the bucket in the console interface, click the “Security” tab and you can paste in a JSON configuration.

The configuration I tried first was this one:

1
[
2
    {
3
        "AllowedHeaders": [
4
            "*"
5
        ],
6
        "AllowedMethods": [
7
            "GET"
8
        ],
9
        "AllowedOrigins": [
10
            "https://simonwillison.net/"
11
        ],
12
        "ExposeHeaders": []
13
    }
14
]

This should enable CORS access for GET requests from code running on my https://simonwillison.net/ site.

The AllowedOrigins key is interesting: it works by inspecting the Origin header on the incoming request, and returning CORS headers based on if that origin matches one of the values in the list.

I used curl -i ... -H "Origin: value" to confirm that this worked:

1
~ % curl -i 'http://static.simonwillison.net.s3-website-us-west-1.amazonaws.com/static/2022/photoswipe/photoswipe-lightbox.esm.js' \
2
  -H "Origin: https://simonwillison.net" | head -n 20
3
-x-amz-request-id: 4YY7ZBCVJ167XCR9
4
 Date: Tue, 04 Jan 2022 21:02:44 GMT
5
-Access-Control-Allow-Origin: *
6
-Access-Control-Allow-Methods: GET
7
:Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
8
-Last-Modified: Tue, 04 Jan 2022 20:10:26 GMT
9
-ETag: "8e26fa2b966ca8bac30678cdd6af765c"
10
:Content-Type: text/javascript
11
-Server: AmazonS3
12

13
~ % curl -i 'http://static.simonwillison.net.s3-website-us-west-1.amazonaws.com/static/2022/photoswipe/photoswipe-lightbox.esm.js' | head -n 20
14
x-amz-request-id: MPD20P9P3X45BR1Q
15
Date: Tue, 04 Jan 2022 21:02:48 GMT
16
Last-Modified: Tue, 04 Jan 2022 20:10:26 GMT
17
ETag: "8e26fa2b966ca8bac30678cdd6af765c"
18
Content-Type: text/javascript
19
Server: AmazonS3

With the Origin header on the request it returns the Access-Control-Allow-Origin headers. Without it does not.

I’m running my S3 bucket behind a Cloudflare cache. As you can see above, S3 returns a Vary: Origin header so caches know that they should respect that header when returning cached content.

But… while Cloudflare added support for Vary in September 2021 they only support it for images, not for other file formats! So sadly I don’t think you can use CORS for JavaScript modules in this way if you are using Cloudflare.

I also tried using "AllowedOrigins": ["*"] in my S3 configuration, but I found that if you make a request without an Origin header S3 still doesn’t return Access-Control-Allow-Origin - so under a cache that does not support Vary you run the risk of caching an asset without those headers.

CORS policy to allow PUT using signed credentials#

A useful feature of S3 is that you can generate signed credentials that allow JavaScript running in a browser to upload files to a pre-determined key in a bucket.

After much frustration, here’s the CORS policy that’s needed to enable this:

1
[
2
    {
3
        "AllowedHeaders": [
4
            "content-type"
5
        ],
6
        "AllowedMethods": [
7
            "PUT"
8
        ],
9
        "AllowedOrigins": [
10
            "*"
11
        ],
12
        "ExposeHeaders": [
13
            "content-type",
14
            "etag"
15
        ]
16
    }
17
]

I used this command to set that policy:

1
s3-credentials set-cors-policy -m PUT -o '*' name-of-bucket -e content-type -e etag -h content-type