Static website private content Amazon S3 and Cloudfront - css, js and images not showing

1
votes

I have set the acl for the origin access identity on all objects as read. I have set up the bucket policy for the OAI. The only way I can get the css, or anything else apart from the html, to work is if I reference it with the the full signed URL ie domain name/css/main.css?parameters of signed url, in the index.html. I have ensured that all files have the correct content type. Is this standard practice? Do I have to reference every image, css, js file this way with the signed url? I have been searching for days on this, so any help would be greatly appreciated. Thanks in advance.

bucket policy: { "Version": "2012-10-17", "Id": "PolicyForCloudFrontPrivateContent", "Statement": [ { "Sid": " Grant a CloudFront Origin Identity access to support private content", "Effect": "Allow", "Principal": { "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity identity canoncal" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::bucket/*" } ] }

1
javascripthtmlcssamazon-web-servicesamazon-s3
when you are not using the full s3 url, how are you referencing them? - E.J. Brennan
Hi EJ,Thanks for the response. For example css: I tried referencing them relatively as you would normally. This is ok if it is public but when it's a private distribution it doesn't work. I then tried using just the domain name(base url) to reference them ie mysite.cloudfront.net/css/mystyle.css. This didn't work. I can access it by using the fully signed url ie mysite.cloudfront.net/css/mystyle.css?gggjggj.... It seems strange that every image, css, js file needs this. - web design sheffield
My work around is this: I figure that I dont need to protect my css, image and js files. I created a new bucket and placed them all in there and made them public then referenced those from my private site. This works. This will probably suit me as I will be creating more buckets that can reference the same files. - web design sheffield

1 Answers

1
votes

My work around is this: I figure that I dont need to protect my css, image and js files. I created a new bucket and placed them all in there and made them public then referenced those from my private site. This works. This will probably suit me as I will be creating more buckets that can reference the same files.