Restricting S3 bucket files to an specific domain using Referer header and Cloudfront not working

Question

I want to securely play my video files on my website without anyone being able to download them. My videos are hosted on an S3 bucket and can be accessed through cloudfront. But whenever I play the video in my website, it shows a 403 error.

Here is the S3 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:::<my-bucket>/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::<cloudfront>:distribution/<cloudfront-distribution>"
                },
                "StringLike": {
                    "aws: Referer": "https://my-domain.com/*"
                }
            }
        }
    ]
}

I am not sure what's wrong. I have tried so many different stuff. I customized all the cloudfront behavior policies to include the Referer header. But nothing works.

Now, as mentioned earlier, I only want to play the videos on my website without anyone being able to download them. If there are any other ways I can do this please tell me. I don't want top-level security. I just want to make it a little bit harder for people to download the videos.

Thank you!

Answer 1

The main problem was the space between "aws: Referer". It should've been "aws:Referer".