Restrict Amazon S3 to CloudFront and http referrer - amazon-s3

Question

I have an Amazon S3 REST endpoint for images and file assets. I want the S3 bucket only accessible by CloudFront and the website accessing the images (using http referrer).
This is my bucket policy so far:
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXX"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<DOMAIN>/*",
"Condition":{
"StringLike":{"aws:Referer":["http://<DOMAIN>/*"]}
}
}
]
}
But once I apply the policy, the images are not accessible on the website.
Is this possible to do?

Answer 1

CloudFront strips Referer header by default so S3 will not see it.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html
You need to Whitelist the Referer header in CloudFront and invalidate the cache to see if it works.

Answer 2

I went about this a little bit differently instead of a whitelist. The method below only allows CloudFront to access the content and then you put firewall rules on CloudFront that only your website (refer) can access the cached content.
For the bucket policy, I blocked all access and cleared out the Bucket policy JSON:
In Cloudfront, create a Origins and Origin Group Policy:
Then choose your Bucket from the list in Origin Domain Name
Origin Path I left blank and Enable Origin Shield I left as no.
Restrict Bucket Access: Choose Yes
Choose Create a New Identity
Grant Read Permissions on Bucket: Yes or Create (This will update the block policy on the S3 bucket to allow only the CloudFront to get the content.
Everything else I left to default and saved.
Now to make sure I restricted the refer from my website, I went the AWS WAF Service.
From here I went to Regex pattern sets on the left menu:
Click on create regex pattern.
Name: I put DomainAccess_Only
Description: Use Waterever
Region: Important, choose Global (Cloudfront)
For the regular expressions, I put .+ and click create regex pattern set
Web ACL Details:
Name: Whatever you want, leave metric default
Resource type: CloudFront distributions
Add AWS Resources, click it and check your cloudfront domain and add it (click next)
Next Choose Rule builder
Choose whatever name for your rule and choose Regular rule
Then choose If a request Matches the statement (unless you have more than one domain)
Inspect: Header
Header field name: referrer
Match type: Starts with string
String to match: https://yourdomain.com (this needs to be exactly what your domain is)
Scroll down and choose Action: allow
Then Add rule
Once you have done that, make rule to go to Rules, and make sure the default rule is to Block.
If it's not set to block, click edit and change it.
Now your content can only be accessed by your website through cloudfront. Hotlink and Direct access to images will not work unless it's coming from your website.