<h2 id="content"><a href="#content" aria-hidden="true" tabindex="-1"></a>Content</h2>
<ul>
<li><a href="#content">Content</a></li>
<li><a href="#introduction">Introduction</a>
<ul>
<li><a href="#the-architecture">The Architecture</a></li>
<li><a href="#the-steps">The steps</a></li>
</ul>
</li>
<li><a href="#before-you-start">Before you start</a></li>
<li><a href="#cloudfront-response-header-policy">Cloudfront response header policy</a>
<ol>
<li><a href="#1-create-a-response-header-policy-resource">Create a response header policy resource</a></li>
<li><a href="#2-attach-it-to-the-default-cache-behavior">Attach it to the default cache behavior</a></li>
<li><a href="#3-apply-the-infrastructure">Apply the infrastructure</a></li>
</ol>
</li>
<li><a href="#testing-it-out">Testing it out</a>
<ol>
<li><a href="#1-make-a-request">Make a request</a></li>
</ol>
</li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<h2 id="introduction"><a href="#introduction" aria-hidden="true" tabindex="-1"></a>Introduction</h2>
Within Amazon Cloudfront, there is a policy for customizing response properties sent to the client.
This policy is called the response header policy.
In this tutorial, we will create a simple response header policy to adjust the <code class="language-">Cache-Control
</code> sent to the client.
Let’s dive right in!
<h3 id="the-architecture"><a href="#the-architecture" aria-hidden="true" tabindex="-1"></a>The Architecture</h3>
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/cloudfront-tutorial-architecture.png" alt="Illustration of the sandbox architecture with Cloudfront and Lambda" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Illustration of the sandbox architecture with Cloudfront and Lambda</blockquote>
 </div>
</div>
<h3 id="the-steps"><a href="#the-steps" aria-hidden="true" tabindex="-1"></a>The steps</h3>
<ol>
<li>
The Viewer (client) request comes in
</li>
<li>
Cloudfront forwards the request to the origin server (Lambda URL + Lambda)
</li>
<li>
The logs from the request are added into Cloudwatch Logs
</li>
<li>
The Lambda function returns a response
</li>
<li>
The Viewer (client) receives the response
</li>
</ol>
<h2 id="before-you-start"><a href="#before-you-start" aria-hidden="true" tabindex="-1"></a>Before you start</h2>
Before you start going through the tutorial, make sure you are using the starter - <a href="https://github.com/Jareechang/amazon-cloudfront-create-distribution" target="_blank" rel="nofollow noopener noreferrer">amazon-cloudfront-create-distribution</a>.
This streamlines some of the things like building the lambda functions and writing out all the boilerplate files.
It will be the base from which we will build from!
<h2 id="cloudfront-response-header-policy"><a href="#cloudfront-response-header-policy" aria-hidden="true" tabindex="-1"></a>Cloudfront response header policy</h2>
Now onto setting up the infrastructure.
<h3 id="1-create-a-response-header-policy-resource"><a href="#1-create-a-response-header-policy-resource" aria-hidden="true" tabindex="-1"></a>1. Create a response header policy resource</h3>
In our case, we will be using a custom header, and we will set the <code class="language-">override
</code> to true.
Also, we will just set a arbitrary value for the <code class="language-">max-age
</code> so we can see it on the client response headers.
Add the following changes:
<div class="remark-highlight"><pre class="language-hcl line-numbers"><code>// infra/main.tf

resource "aws_cloudfront_response_headers_policy" "custom" {
 name = "custom-response-header-policy"
 custom_headers_config {
 items {
 header = "Cache-Control"
 override = true
 value = "max-age=5"
 }
 }
}
</code></pre></div>
<h4 id="helpful-reference"><a href="#helpful-reference" aria-hidden="true" tabindex="-1"></a>Helpful Reference</h4>
<ul>
<li><a href="https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/cloudfront_response_headers_policy" target="_blank" rel="nofollow noopener noreferrer">Terraform - cloudfront_response_headers_policy</a></li>
</ul>
<h3 id="2-attach-it-to-the-default-cache-behavior"><a href="#2-attach-it-to-the-default-cache-behavior" aria-hidden="true" tabindex="-1"></a>2. Attach it to the default cache behavior</h3>
Now Lambda function supports an option to expose an URL, so we can use our function as our “origin server” for testing the request origin policy.
Add the following changes:
<div class="remark-highlight"><pre class="language-hcl line-numbers"><code>// infra/main.tf

resource "aws_cloudfront_distribution" "cf_distribution" {
 origin {
 # This is required because "domain_name" needs to be in a specific format
 domain_name = replace(replace(aws_lambda_function_url.origin.function_url, "https://", ""), "/", "")
 origin_id = module.lambda_origin.lambda[0].function_name

 custom_origin_config {
 https_port = 443
 http_port = 80
 origin_protocol_policy = "https-only"
 origin_ssl_protocols = ["TLSv1.2"]
 }
 }

 default_cache_behavior {
 allowed_methods = ["GET", "HEAD"]
 cached_methods = ["GET", "HEAD"]
 target_origin_id = module.lambda_origin.lambda[0].function_name
 forwarded_values {
 query_string = false
 cookies {
 forward = "none"
 }
 }
 viewer_protocol_policy = "redirect-to-https"
 min_ttl = local.min_ttl
 default_ttl = local.default_ttl
 max_ttl = local.max_ttl
 response_headers_policy_id = aws_cloudfront_response_headers_policy.custom.id
 }

 price_class = var.cf_price_class
 enabled = true
 is_ipv6_enabled = true
 comment = "origin request policy test"
 default_root_object = "index.html"

 restrictions {
 geo_restriction {
 restriction_type = "none"
 }
 }

 tags = {
 Environment = "production"
 }

 viewer_certificate {
 cloudfront_default_certificate = true
 }
}
</code></pre></div>
<h4 id="helpful-reference-1"><a href="#helpful-reference-1" aria-hidden="true" tabindex="-1"></a>Helpful Reference</h4>
<ul>
<li><a href="https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/cloudfront_distribution" target="_blank" rel="nofollow noopener noreferrer">Terraform - cloudfront_distribution</a></li>
<li><a href="https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/cloudfront_response_headers_policy" target="_blank" rel="nofollow noopener noreferrer">Terraform - cloudfront_response_headers_policy</a></li>
</ul>
<h3 id="3-apply-the-infrastructure"><a href="#3-apply-the-infrastructure" aria-hidden="true" tabindex="-1"></a>3. Apply the infrastructure</h3>
Now we have all our definition in Terraform, all that is left is to generate it.
Run the following:
<div class="remark-highlight"><pre class="language-sh"><code>// This will re-generate the assets
pnpm run generate-assets --filter &quot;@function/*&quot;

export AWS_ACCESS_KEY_ID=&lt;your-key&gt;
export AWS_SECRET_ACCESS_KEY=&lt;your-secret&gt;
export AWS_DEFAULT_REGION=us-east-1

terraform init
terraform plan
terraform apply -auto-approve
</code></pre></div>
If the infrastructure applied successfully then you should see something like this:
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/cloudfront-tutorial-distribution-terraform-apply-results.png" alt="Illustration of the Terraform outputs" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Illustration of the Terraform outputs</blockquote>
 </div>
</div>
<h2 id="testing-it-out"><a href="#testing-it-out" aria-hidden="true" tabindex="-1"></a>Testing it out</h2>
<h3 id="1-make-a-request"><a href="#1-make-a-request" aria-hidden="true" tabindex="-1"></a>1. Make a request</h3>
Curl:
<div class="remark-highlight"><pre class="language-sh"><code>curl -vvv &quot;&lt;cf_distribution_domain_url&gt;&quot;
</code></pre></div>
Postman:
<div style="margin: 2em auto;">
 <div style="display:flex;justify-content:center;">
 <img src="/images/cloudfront-response-header-policy.png" alt="Illustration of the client response using postman" style="width:80%" />
 </div>
 <div style="display:flex;justify-content:center;">
 <blockquote>Illustration of the client response using postman</blockquote>
 </div>
</div>
<h2 id="conclusion"><a href="#conclusion" aria-hidden="true" tabindex="-1"></a>Conclusion</h2>
That’s really it for the response header.
Our tutorial covers a simple example of customizing the <code class="language-">Cache-Control
</code> using response header policies, you can do a lot more like adjusting security headers.
Be sure to to check out AWS’s documentation on adding response header - <a href="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/adding-response-headers.html" target="_blank" rel="nofollow noopener noreferrer">AWS adding-response-headers</a>.
And... that’s all for now, stay tuned for more!
If you found this helpful or learned something new, please do share this article with a friend or co-worker 🙏❤️ (Thanks!)

A tutorial on how to use response header policy using terraform

Jerry Chang

Go Back

Amazon Cloudfront: Response header policy (tutorial)

Enjoy the content ?