Easy Way to Add HTTP Security Headers to CloudFront

Photo by Scott Webb on Unsplash

Motivation

CloudFront Functions seems to be better than Lambda Edge as a custom method such as simply adding HTTP headers in CloudFront .

List of important security headers

Strict-Transport-Security - HTTP | MDN

Content Security Policy (CSP) - HTTP | MDN

X-Content-Type-Options - HTTP | MDN

X-Frame-Options - HTTP | MDN

X-XSS-Protection - HTTP | MDN

Referrer-Policy - HTTP | MDN

It may be a security measure in the first place, but it is necessary to deal with it if it is passed through a security scanner such as Mozilla Observatory.

Lambda Edge

If you try to set these headers in CloudFront, as of June 2021, the implementation example in Lambda Edge will be posted at the top of the search.

Official AWS blog that is the original article

Adding HTTP Security Headers Using Lambda@Edge and Amazon CloudFront | Amazon Web Services

CloudFront Functions

However, upon closer inspection, CloudFront Functions was released on 2021/5. It’s easier and easier to do here, and I think it’s suitable for this purpose. No, it would be nice if CloudFront itself had the ability to change the header.

Information from documentation

Add security headers to the response

Terraform

We can also use terraform for this, just prepare CloudFront Functions and put JavaScript of aws-samples as a base , for the time being, it is OK as the sample.

Terraform Registry

resource "aws_cloudfront_function" "main" {
  name    = "test"
  runtime = "cloudfront-js-1.0"
  comment = "my function"
  publish = true
  code    = file("${path.module}/function.js")
}

Now we just need to link it to your distribution

resource "aws_cloudfront_distribution" "main" {
  default_cache_behavior {
    function_association {
      event_type   = "viewer-response"
      function_arn = aws_cloudfront_function.main.arn
    }
  } 
}