CloudFrontにHTTPセキュリティヘッダーを追加する方法(2021)

はじめに

CloudFront で単純にHTTPヘッダーを追加するようなカスタム方法は、2021/6現在 Lambda@Edge よりも CloudFront Functions が良さそう。下記のケースで私はFunctionsを使いました。

セキュリティヘッダー

• Strict-Transport-Security
• Content-Security-Policy
• X-Content-Type-Options
• X-Frame-Options
• X-XSS-Protection
• Referrer-Policy

そもそものセキュリティ対策ということもあるけど、Mozilla Observatoryなどのセキュリティスキャナーを通してくれって場合に対応が必要。

Lambda@Edge

これらのヘッダー群を CloudFront で設定しようと調べると2021/6月現在は Lambda@Edge での実装例が検索上位に掲載される。

たとえば

元記事となるAWSの公式ブログだと

いや、これでやろうと思ってた。TerraformでやろうとしたらLambda作ってIAM付与してCloudFrontに紐付けしてと…。

CloudFront Functions

しかし、よくよく調べると、2021/5に CloudFront Functionsがリリースされていた。こっちでやるほうが簡単で楽だし、今回の用途的に向いてると思う。いや、そもそもCloudFront自身にヘッダー変更する機能があればよいのだが。

やりたいことはAWSのドキュメントにあった、

GitHubにサンプルもある。

日本語でわかりやすいのは

Terraform

CloudFront Functionsを用意してaws-samplesのJavaScriptをベースに置いて(とりあえずサンプル通りでOK)

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

ディストリビューションに紐付けすれば良し

resource "aws_cloudfront_distribution" "example" {
  # 省略
  default_cache_behavior {
    function_association {
      event_type   = "viewer-response"
      function_arn = aws_cloudfront_function.test.arn
    }
  }
  # 省略
}