I have an S3 website configured to be used as a static website, and a Cloudfront distribution with the S3 bucket as the origin.
My index files are called index and I have specified this as the index files in both the bucket configuration and the Cloudfront distribution configuration.
However if I go to https://example.com/directory/ I get an error document as follows, where the RequestID and HostID change on each request:
<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>AccessDenied</Code><Message>Access Denied</Message><RequestId>7F09A18821FE70FD</RequestId><HostId>H5OR+AZpNSGlhrUX1ECegTbWkio728A1MIdGkO4bkCZIJa/XQ6Uv7Hu0GgNgyxL+snerPPDnzr8=</HostId></Error>
If I go to https://example.com/directory/index then the page shows correctly.
If I access the website from either the cloudfront URL or the S3 website endpoint, rather than my custom domain, then the problem does not happen.
How can I get the directory index pages to be served correctly when accessing the S3 bucket?
Changing the origin for the distribution from <bucket-name>.s3.amazonaws.com to <bucket-name>.s3-website.eu-west-2.amazonaws.com fixed the issue.
Unfortunately when I started typing in the dropdown in the Origin settings, Amazon started to suggest S3 buckets, and it suggested the bucket using the first format.
Related
It may look a little strange that I want to upload file to S3 bucket through cloudfront, and access it with CloudFront.
And AWS declared that CloudFront support this putObject action according to
https://aws.amazon.com/blogs/aws/amazon-cloudfront-content-uploads-post-put-other-methods/
Now we have configured the CloudFront settings(Origin/Behavior) and S3 policy to complete this.
Only one block issue found that:
The uploaded file via CloudFront can't be accessed by any account or any roles. It's owner named "cf-host-credentials-global".
Just tried several ways to fix this issue, base on a quite simple solution:
CloudFront can access the S3 bucket(This s3 bucket is not public accesible.) with OAC which has putObject and getObject permission on it.
We can use a CloudFront URL mapping to S3 bucket origin for uploading a file.
Note: No signed CloudFront or signed S3 URL, but I also tested those cases actually.
We still always get such accessDenied issue, most of time it can be uploaded with the expected size and file name.
But it can't be downloaded or accesible.
I endeavor to fix this on this simple solution, but all of them are failed as below:
add x-amz-acl header, according to answer on stackoverflow
The file upload by CloudFront Origin Access Identity signed url can't be access by boto3 or IAM role?
I add the x-amz-acl header, but got this error with failed uploading:
<?xml version="1.0" encoding="UTF-8"?>
<Error>
<Code>AccessDenied</Code>
<Message>There were headers present in the request which were not signed</Message>
<HeadersNotSigned>x-amz-acl</HeadersNotSigned>
<RequestId>NDOLGKOGSF883</RequestId>
<HostId>CD9cDmGbSuk34Gy3mK2Znfdd9klmfew0s2dsflks3</HostId>
</Error>
Even use a pre-signed S3 url(put the x-amz-acl header in boto3 generate_presigned_url), it still the same error.
seems someone said x-amz-acl can be put into query parameter, then I have tried it in the URL(with signed URL and unsigned URL), it doesn't work anyway.
Pre-signed URLs and x-amz-acl
someone said we need to add x-amz-content-sha256 header in the client request, according to
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html#private-content-origin-access-identity-signature-version-4
add x-amz-content-sha256 header, it can be uploaded successfully, but still failed with AccessDenied on that S3 Object uploaded.
add Content-MD5 header, it got the issue that header is not signed as above, and uploading failed.
Anyone has an idea about this? How to fix this AccessDenied issue?
Thanks in advance.
It looks like x-amz-acl header via OAC is not getting signed when the request is being sent from CloudFront to S3 bucket.
So if you insist on using OAC, there's only one way: change the "Object Ownership" to ACLs disabled in S3 bucket permissions.
And that works for me.
I'm using custom domain and CloudFront for S3 static hosting site to serve https.
It's working fine when I open the pages through the app's internal buttons or link,
but if I input direct URL in the address bar, or click the browser refresh button, it shows
This XML file does not appear to have any style information associated with it. The document tree is shown below.... Access Denied error screen.
I searched related answers and tried to /index.html in the CloudFront general setting as Default Root Object but it didn't work. (Before this try, it was index.html)
When I updated it as /index.html, even the domain itself didn't work.
I have another S3 static hosting site without CloudFront and certificate just for testing.
This site is working fine even I input direct url or click the refresh button.
Above two S3 bucket have same settings (root object is index.html and error document is also index.html)
After this, I changed CloudFront Origin Domain Name from REST endpoint to website endpoint referred to this docs (https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/)
But now getting this error when I refresh the screen.
All the object in S3 is owned to bucket owner and has public access.
This app is made by React and using react-router-dom.
Could you give me any hint or advice?
Thanks.
Solved...
My S3 bucket region requires . instead of - when I use website endpoint for cloudfront.
And FYI..
In my case, there are some little difference with the document and some tutorial. My CloudFront distribution doesn't need to use default root object, and individual objects in S3 has no public access but the bucket has it.
There are some specific endpoints to be used for website hosting buckets, which are listed in the Amazon Simple Storage Service endpoints and quotas document. For example, when hosting in eu-west-1, cloudfront will prepopulate the dropdown with example.s3.eu-west-1.amazonaws.com, but if you look into the bucket settings, Static website hosting section, it will show you the correct url example.s3-website-eu-west-1.amazonaws.com
Carefully read the table! The url scheme is not fully consistent, eg. s3-website.us-east-2.amazonaws.com but s3-website-us-east-1.amazonaws.com - just to make your day a bit more joyful.
So I had the exact same issue and was able to resolve it after taking the s3 bucket endpoint located in the properties of the s3 bucket and then pasting it into the cloudfront origins section into the origin domain. I removed the beginning of the endpoint for example: "http://website.com.s3-website.us-east-2.amazonaws.com" you would just remove the "http://" and then post the rest into the cloudfront origin domain and click save. That should solve the problem!
I tried all kinds of different options such as making sure every object was public as well in the s3 bucket. Make sure your s3 bucket is also publicly available.
Certain regions do have different endpoints for your s3 buckets. Here is a link that shows more of that: https://aws.amazon.com/premiumsupport/knowledge-center/s3-rest-api-cloudfront-error-403/
I am trying to host my Angular website using CloudFront, S3, and Amazon EC2
instances. I am creating a bucket for e.g. bucket_name and creating 3 folders in it naming:-
1. example
2. login
3. logout
And my URL is:-
1. abc.com/example/
2. abc.com/example/login
3. abc.com/example/logout
But when I host my website I am able to access abc.com/example/ but the issue I am facing is that when I tried to access login and logout URL I am getting an error "404 not found". Because it is trying to locate index.html in the example folder of the S3 bucket like in this way example/login/index.html and EC2 instance is for API calls.
To host your site on S3 bucket and aws CloudFront you must include your parent file index.html in S3 bucket and after this you need to configure static website hosting under properties of S3 bucket. Set these fields as use this bucket to host website then enter index document index.html this file must be in S3 bucket, and save this.
Next step you can edit public access of this bucket, if you want this site accessible outside world then turn off block public access under Permissions tab of S3 bucket.
Later, to host this using CloudFront you need to create CloudFront distribution, and set Origin Domain name = Your S3 bucket name and Default Root Object to your parent index.html file (which is stored in s3 bucket) and save this CloudFront distribution, now check the Domain name URL on browser, it should work fine.
After completing this you can setup your EC2 instance for back-end API calls as per your needs.
Try to keep pages like login.html and logout.html. That should work.
With an S3 static site, I am able to hit /directory and it will serve up the index.html file inside the directory. Once I add the S3 bucket as a CloudFront origin, I instead get an Access Denied message.
How can I replicate this S3 functionality in CloudFront?
The fix was to setup S3 static site hosting and use CloudFront to point to it as a remote origin website instead of an S3 bucket.
I've got an S3 bucket configured to host a static website, and if I browse to the bucket URL it shows the index.html file. I also have a CloudFront distribution to show another S3 bucket under a custom domain. Is there any chance I could configure CloudFront to serve one bucket from the root and another from a custom path? So:
mydomain.com -> bucket1/index.html
mydomain.come/some-path -> bucket2/index.html
I already created an origin for the bucket and set up a path pattern for it and some-path, but I'm getting 403 Forbidden, even though if I browse to the origin directly I can see the webpage.
This configuration works fine, but it requires that the object in bucket2 be located at some-path/index.html inside bucket2.
The path pattern you configured in the cache behavior is still part of the request path, so it is forwarded to the origin.
CloudFront does not support removing part of the request path before forwarding the request to the origin.