Our Website is an imaginary fintech startup that provides banking services to its clients. The main channel for acquiring new customers and facilitating interaction with the bank is the company’s website. Presently, the website is hosted on a server located on-premises, necessitating an IT team exclusively dedicated to its management and upkeep. This arrangement incurs supplementary expenses for the company and introduces an extra layer of intricacy to the infrastructure.
To address these challenges, Our Bank Website has decided to move its website to AWS S3. The change would provide the following benefits :
Our Website is experiencing a growing customer base accessing their website from various locations worldwide. Consequently, the website’s performance is deteriorating due to latency problems. Furthermore, the bank is concerned about safeguarding the website against cyber attacks. Additionally, Level Up Bank aims to reduce hosting expenses while simultaneously enhancing website performance and security.
To overcome these challenges, I recommend that Level Up Bank integrate AWS CloudFront into their S3 Hosted Static website. AWS CloudFront is a content delivery network (CDN) service that efficiently distributes static and dynamic web content, including HTML, CSS, JavaScript, images, and videos, to global users, ensuring minimal latency and rapid data transfer speeds. The benefits of this strategy are as follows:
I will be challenging myself to complete all 3 tiers and will be breaking down each tier’s goals and steps.
— Create an S3 bucket using the AWS console and upload the index.html file.
— Modify the S3 bucket so that it can host a static website and can be reachable through the internet
— Verify internet access using the bucket website endpoint and not the object URL
Step 2: Upload index.html and all its necessary files in the bucket with all folder content in the bucket
Step 4: now goto the proper (below down) static website hosting enable it (click) edit > (check) enable > index document : index.html > save changes.
Step 5: Again goto properties > static website hosting you'll see the link (url) > copy and paste in the browser
— Use CloudFront along with our S3 Static hosted website to take advantage of Edge Caching for better performance
— Ensure the CloudFront URL can only be accessed through HTTPS and that any HTTP traffic is redirected to HTTPS
— Verify you can reach the website using the CloudFront URL and make sure the URL redirects HTTP to HTTPS
— Verify that caching is working by making a small change to the HTML code
Step 8: Go below and in the origin access: (choose) Origin access control settings (recommended) > (click) create control settings > leave bydefault settings as it is > (click) create
(Ignore the Origin access control is required message for now. This gets taken care of once you apply the bucket policy in S3)
Step 10: Scroll down to WAF and select Do not enable security protection. (Only because this is a sandbox. In the real world we would need to add this protection. Especially for a banking website)
Step 12: After creation you will see message prompting about (the s3 bucket policy needs to be updated) > (click) copy policy
Step 13: Open s3 resource in another tab > go to permissions for your website bucket > In the Bucket policy section > (click) on Edit. Then paste the policy > (click) on Save changes.
Step 14: Now go back to our CloudFront distribution > (click) distribution > you will see the status is displaying Enabled before you continue.
(click) your distribution Id > settings > (click) edit > Scroll down to Default root object and type in index.html then save the changes.
goto to the distribution and copy the distribution domain name and paste in the incognito tab > There you will see your website.
(Now, to see if we are able to meet the redirection requirement. Click in the address bar and change the HTTPS to HTTP then hit enter. Success!!!! HTTP is being redirected to HTTPS.)
To test this, we will open the index.html file in VS Code > make some changes then upload the updated file into S3 > If cache is working, the object URL will show the changes but the CloudFront URL will not right away.
*Note: Overwriting the index.html file with the updated version does not keep the public permission on the file. You must manually make the file public again. This is only if you would like to view the website using the object URL. *
Step: 17 Now viewing the website using the object URL(click on index.html > click object URL > paste in the browser) gave me this result:
The goal for this tier is to improve security by ensuring that no end users can go around CloudFront and access the S3 bucket directly while verifying that the website is still accessible after whatever changes are made.
We took care of some of this in tier 2 when we enabled Origin access control and applied the bucket policy in S3 which gives the bucket access to only CloudFront.
However, we still have the bucket and index.html set to Publicly Accessible. Let’s go change that right now.
Step 18: Go into the website S3 bucket > (click) on index.html then go to permissions > Then click on the Edit button in the Access control list section
Step 19: Remove the Read access in the Everyone (public access) group then save the changes. This will keep users from accessing the index.html file directly from the S3 bucket.
Step 20: Go to your bucket > (click) on permissions > Then click Edit in the Block public access (bucket settings) section > Go ahead and (click) on checkbox next to Block all public access then save the changes. You will have to enter confirm in the field > then click on Confirm to be able to continue.
You should now see that the Publicly Accessible message in your bucket is no longer there. Indicating that we are more secure right now. But let’s test it out. We should get access denied messages when using both bucket website endpoint and object URL’s. Open an incognito browser tab and test each link.
Step 21: Now that we made the changes to secure our S3 bucket, we need to find out if any of these changes affected the website from functioning using the CloudFront URL.
