I want to store videos in an Amazon S3 bucket.
I want to load them onto my website.
I want to use Amazon CloudFront for the CDN/caching etc.

Ideally by the end I would like to restrict the videos to only play on the domains I set.

But initially I am having a 403 error even loading the video.

It says in console:

Failed to load resource: the server responded with a status of 403 ()

And clicking it shows this XML

<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>9PW32M02SZR567DF</RequestId>
    <HostId>ukPRxDlFq9TYiJcHLnnAhryAewPoAd/ijm/GxHvdB774cMwK4PdQ0yr1CQqa1msCV+CkYj+nkL0=</HostId>
</Error>

I have tried many things after much reading.

Initially, I had set up the distribution with a key and I believe using OAI.

I have now disabled the WAF part of it to try and rule out that as a variable.

I am loading the video directly in the browser. At one point a video player loaded but the video itself did not.

I created public keys

I created key groups

I selected my S3 bucket in CloudFront so I could not have made a typo.

I created an "origin access" and I have tried with both signing and not signing the request.

I set up Identities (legacy)

I have disabled encryption and bucket key.

All public access is blocked.

I copied the permissions from CloudFront and added it to the S3 bucket’s permissions.

This is my bucket policy.

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::tpwc-co-uk--media/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::240479180938:distribution/E17GLPD7918NNC"
                }
            }
        }
    ]
}

Server side encryption is set as:

Server-side encryption with Amazon S3 managed keys (SSE-S3)

Here is my URL if that helps: https://d2tzr0xka0eqcu.cloudfront.net

By making my S3 bucket publicly available I can see the URL via S3, but the CloudFront URL still doesn’t work.

I updated my policy to include getObject. My S3 bucket policy now stands as:

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::tpwc-co-uk--media/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::240479180938:distribution/E17GLPD7918NNC"
                }
            }
        },
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::tpwc-co-uk--media/*"
        }
    ]
}

Screenshots

Here are screenshots of the things I have configured. Any missing screenshots means no configuration has taken place.

Distribution Screenshots

General

Settings

Origin Settings

Bucket Screenshots

Permissions

Management

Encryption

Can anyone help me to understand where I have gone wrong?