[AWS]Learning Cloudfront

Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment.

• Global Scaled Network for Fast Content Delivery
• Security at the Edge
• Highly Programmable and Secure Edge Computing

How CloudFront delivers content to your users

After you configure CloudFront to deliver your content, here’s what happens when users request your files:

1. A user accesses your website or application and requests one or more files, such as an image file and an HTML file.
2. DNS routes the request to the CloudFront POP (edge location) that can best serve the request — typically the nearest CloudFront POP in terms of latency — and routes the request to that edge location.
3. In the POP, CloudFront checks its cache for the requested files. If the files are in the cache, CloudFront returns them to the user. If the files are not in the cache, it does the following:

a. CloudFront compares the request with the specifications in your distribution and forwards the request for the files to your origin server for the corresponding file type — for example, to your Amazon S3 bucket for image files and to your HTTP server for HTML files.

b. The origin servers send the files back to the edge location.

c. As soon as the first byte arrives from the origin, CloudFront begins to forward the files to the user. CloudFront also adds the files to the cache in the edge location for the next time someone requests those files.

Build simple CloudFront distribution

Getting started with a simple CloudFront distribution

Getting started with the AWS for WordPress plugin

When you use CloudFront with the AWS for WordPress plugin for site acceleration, the plugin uses a subdomain, also known as an alternate domain name or CNAME, to send your website’s traffic through CloudFront. This can reduce latency and improve the viewing experience by loading resources faster.

Without the plugin’s site acceleration, all the traffic of your website’s viewers goes to the server that hosts your WordPress website. After completing the steps in the following procedure, you can enable the plugin’s site acceleration, which gives viewers two options for visiting your website:

• When viewers use your website’s domain name, such as example.com, all the traffic goes through CloudFront, except for the website’s index page and a few small image files.
• When viewers use your website’s alternate domain name, such as www.example.com, all the traffic goes through CloudFront.

Without the plugin’s site acceleration

With the plugin’s site acceleration

Ref: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/WordPressPlugIn.html#WordPressPlugin-configure-use

Lambda@Edge Overview

Here is how the process works:

1. Viewer navigates to website.
2. Before CloudFront serves content from the cache it will trigger any Lambda function associated with the Viewer Request trigger for that behavior.
3. CloudFront serves content from the cache if available, otherwise it goes to step 4.
4. Only after CloudFront cache ‘Miss’, Origin Request trigger is fired for that behavior.
5. S3 Origin returns content.
6. After content is returned from S3 but before being cached in CloudFront, Origin Response trigger is fired.
7. After content is cached in CloudFront, Viewer Response trigger is fired and is the final step before viewer receives content.
8. Viewer receives content.

How to use Lambda@Edge to improve the security of your website by adding security headers to the origin response trigger of a CloudFront distribution behavior

Here is how the process works:

1. Viewer requests website www.example.com.
2. If the object is cached already, CloudFront returns the object from the cache to the viewer, otherwise it moves on to step 3.
3. CloudFront requests the object from the origin, in this case an S3 bucket.
4. S3 returns the object, which in turn causes CloudFront to trigger the origin response event.
5. Our Add Security Headers Lambda function triggers, and the resulting output is cached and served by CloudFront.

'use strict';
exports.handler = (event, context, callback) => {
    
    //Get contents of response
    const response = event.Records[0].cf.response;
    const headers = response.headers;
//Set new headers 
 headers['strict-transport-security'] = [{key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubdomains; preload'}]; 
 headers['content-security-policy'] = [{key: 'Content-Security-Policy', value: "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'"}]; 
 headers['x-content-type-options'] = [{key: 'X-Content-Type-Options', value: 'nosniff'}]; 
 headers['x-frame-options'] = [{key: 'X-Frame-Options', value: 'DENY'}]; 
 headers['x-xss-protection'] = [{key: 'X-XSS-Protection', value: '1; mode=block'}]; 
 headers['referrer-policy'] = [{key: 'Referrer-Policy', value: 'same-origin'}]; 
    
    //Return modified response
    callback(null, response);
};

Ref: https://aws.amazon.com/blogs/networking-and-content-delivery/adding-http-security-headers-using-lambdaedge-and-amazon-cloudfront/