如何将标头添加到 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 年 6 月 23 日更新

刚刚发现虽然下面的解决方案看起来不错，但它可能还不够好，尤其是对于添加安全标头，因为如果 Cloudfront 从源端收到错误，则不会调用 function

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 2

如果您现在正在实施此操作，那么您很幸运。 从 2021 年 11 月开始，情况要简单得多。亚马逊通过响应 header 策略本地添加了安全性 header，即我们不必创建 Z945F3FC449518A73B9F5F5F32868DB466C 标头即可。 详细信息https://aws.amazon.com/blogs/networking-and-content-delivery/amazon-cloudfront-introduces-response-headers-policies/ 。

Terraform AWS 提供商从3.64.0开始支持aws_cloudfront_response_headers_policy

这是通过 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 3

我建议使用Lambda@Edge到 append 任何您正在寻找的原始响应的标头，然后再将其返回给查看器。

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

 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 安全标头。

Answer 4

您现在可以使用CloudFront 响应标头策略而不是 CloudFront 函数来配置 CORS、安全性和自定义 HTTP 响应标头

编辑您的 CloudFront 行为并添加响应 header 策略。

如果您想要不同的安全 header 配置，您可以使用现有的 SecurityheadersPolicy 或创建自己的策略。