Static Web Pages Outside of the Optional Path in my S3 CloudFront Origin Denied Access

Question

New to this forum...

I have a newly deployed CloudFront distribution with an S3 website endpoint backend to host static webpages. Any page located at the root of the "Optional Path" parameter loads fine, but anything outside of it fails with a 403 error.

I am have looked at the policy for my S3 bucket and it appears correct, though give that I am only two days into this as a first time user I could be wrong.
            
```
"Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::amazon-cloudfront-secure-static-site--s3bucketroot-tksud5l8sxte/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::xxxxxxxxxxxx:distribution/E39BBGZ000U4CO"
                }
            }
```
Likewise, the OAC for the distribution appears to be correct too (again, with the same caveat as before):

```
{
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::amazon-cloudfront-secure-static-site--s3bucketroot-tksud5l8sxte/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::xxxxxxxxxxxx:distribution/E39BBGZ000U4CO"
                    }
                }
            }
```

What am I doing wrong?

Leo K · Accepted Answer

Yes. S3 is a flat, bucketed object store, not a file system with folder-like containers for nodes/files. Both kinds of systems still have valid needs to list files/objects and perform other multi-object operations targeting a subset of objects, so it's no coincidence that a hierarchical naming structure for object keys in S3 resembles a folder structure in a file system. S3 also supports object listing operations, for example, with a specified character as a delimiter, and mostly everyone uses the slash `/` as the separator.

Correcting my earlier statement a bit, I see someone improvised a custom way to adjust the requests CloudFront makes to S3 to pull object/file lists. So, contrary to what I said earlier, it apparently isn't quite impossible to list objects/files via CloudFront, although it isn't a built-in feature: https://stackoverflow.com/questions/75838104/cloudfront-backed-s3-bucket-listing-bucket-contents-over-https-with-prefix

Leo K · Answer

Do you mean that you've set the "origin path" on your S3 origin in CloudFront? That would simply insert the static string you specified to the beginning of the object keys requested from S3. You wouldn't be able to access any objects not having that prefix.

If that's what you meant, then unless it's expected behaviour, could you give an example of a path (after the name of your website) that works and one that fails with a 403 response?

Also, to be sure, you don't have the static website hosting option enabled on your S3 bucket, do you? It shouldn't be enabled when CloudFront and OAC are used instead to serve the content from an S3 origin.

Jeff Y · Answer

Hi Leo,

Correct, that path. Currently, to load the index page, I don't need to specify the optional path as it is the new document root. Its only when I try to traverse subdirectories that I hit the 403 error.

Here are examples of what works:

```
https://www.my.domain.com --> loads index page
```

Here is an example of what does not workL

```
https://www.my.domain.com/subdir1 --> attempt directory listing
```

But I believe I may have answered my own question just now. Its clear that I am getting the 403 error because I am attempting to do a directory listing (on empty directories) which is not allowed. Not that I would want to in a production environment, but assuming I did, how could I enable directory listings (mostly for testing purposes).

Maybe add a new statement like this in my OAC?

```
 {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity EYOURID"
            },
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::bucket-name"
        }
```

Would I need to make any changes in my bucket policy as well?

Thanks in advance.

Leo K · Answer

You're quite right: there's no object with the key subdir, so there's nothing to return. S3 has no real folder structure at all. A bucket is simply a flat container for objects, and any apparent hierarchical, folder-like structure is only implied by the keys (object "names"), which can also be used to list objects sharing a given prefix to their keys/names. Objects don't actually reside "inside" any container other than the bucket.

CloudFront will only return individual objects by name from the bucket. I don't believe there's any way to tell it to return a list of objects in the bucket, with or without a specified folder-style prefix.

Jeff Y · Answer

Yes that makes sense about objects, and its easy to get tripped up by the old filesystem paradigm. I forgot to mention what also works:

```
https://www.my.domain.com/subdir1/myfile.json
```

So S3 seems to mimic the familiar behavior of filesystems, while being completely different design-wise.

Static Web Pages Outside of the Optional Path in my S3 CloudFront Origin Denied Access

Add your answer

Relevant content