如何向 CloudFront 响应添加标头？

Question

我使用https://observatory.mozilla.org/analyze测试我的网站，我得到了 F 分数。

原因是：

Content Security Policy (CSP) header not implemented
X-XSS-Protection header not implemented 
X-Frame-Options (XFO) header not implemented    
...

我使用 CloudFront 为我的网站提供服务。

我将那些丢失的标头放在 CloudFront 的何处？

Answer 1

如果你现在就实施这个，那么你很幸运。从 2021 年 11 月开始，情况变得简单得多。亚马逊已通过响应标头策略本地添加了安全标头，即我们不必创建 lambda 来仅将响应标头添加到应用程序。详细信息 https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-cloudfront-introduces-response-headers-policies/。

aws_cloudfront_response_headers_policyTerraform AWS 提供商已从3.64.0 https://github.com/hashicorp/terraform-provider-aws/blob/main/CHANGELOG.md#3640-november-04-2021开始提供支持。

以下是通过 terraform aws 提供程序将安全标头添加到 aws cloudfront 响应的示例。

resource "aws_cloudfront_response_headers_policy" "security_headers_policy" {
  name = "my-security-headers-policy"
  security_headers_config {
    content_type_options {
      override = true
    }
    frame_options {
      frame_option = "DENY"
      override = true
    }
    referrer_policy {
      referrer_policy = "same-origin"
      override = true
    }
    xss_protection {
      mode_block = true
      protection = true
      override = true
    }
    strict_transport_security {
      access_control_max_age_sec = "31536000"
      include_subdomains = true
      preload = true
      override = true
    }
    content_security_policy {
      content_security_policy = "frame-ancestors 'none'; default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'"
      override = true
    }
  }
}

Answer 2

2021 年 6 月 23 日更新

刚刚发现虽然下面的解决方案看起来不错，但它可能还不够好，尤其是添加安全标头时，因为如果 Cloudfront 从源中获取错误，则不会调用该函数

HTTP 状态代码 当源返回 HTTP 状态代码 400 或更高时，CloudFront 不会为查看器响应事件调用边缘函数。

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/edge-functions-restrictions.html

截至 2021 年 5 月，似乎更好的选择是新引入的 Cloudfront 功能，根据此博客条目https://aws.amazon.com/blogs/aws/introducing，其价格是 Lambda@Edge 的 1/6 -cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-security-headers.html文档中的示例

function handler(event) {
    var response = event.response;
    var headers = response.headers;

    // Set HTTP security headers
    // Since JavaScript doesn't allow for hyphens in variable names, we use the dict["key"] notation 
    headers['strict-transport-security'] = { value: 'max-age=63072000; includeSubdomains; preload'}; 
    headers['content-security-policy'] = { value: "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'"}; 
    headers['x-content-type-options'] = { value: 'nosniff'}; 
    headers['x-frame-options'] = {value: 'DENY'}; 
    headers['x-xss-protection'] = {value: '1; mode=block'}; 

    // Return the response to viewers 
    return response;
}

Answer 3

我建议使用Lambda@Edge将您要查找的任何标头附加到源响应中，然后再将其返回给查看者。

当添加为源响应事件时，可以像下面的示例一样简单地完成。

 import json
 
 def lambda_handler(event, context):
     response = event["Records"][0]["cf"]["response"]
     headers = response["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'}]; 
     
     response['headers'] = headers
 
     return response

有关更多信息，请参阅使用 Lambda@Edge 和 Amazon CloudFront 添加 HTTP 安全标头博客文章。