在 AWS CloudFront 和 S3 上配置 X-Frame-Options 响应标头

Question

我想为 Amazon S3 上托管的静态内容添加 X-Frame-Options HTTP 响应标头，并带有 Cloudfront 缓存。如何添加这些标题？

Answer 1

您可以使用 Lambda@Edge 函数将 x-frame-options 标头添加到来自 CloudFront / S3 的响应中。 lambda 代码在本地边缘位置运行，但需要在 us-east-1 区域中创建和维护。

这里的示例代码使用nodeJS 6.10添加响应头

'use strict'; 
 exports.handler = (event, context, callback) => {
   const response = event.Records[0].cf.response; 
   const headers = response.headers; 
   response.headers['x-frame-options'] = [{"key":"X-Frame-Options","value":"SAMEORIGIN"}]; 
   console.log(response.headers); 
   callback(null, response);
 }; 

创建 Lambda 的最终版本，然后将 Lambda 版本的触发器配置设置为您的路径模式行为的 CloudFront origin-response 事件类型。

示例代码将事件记录到 CloudWatch 日志服务以进行调试。如果您还没有，则需要设置一个 lambda 执行 IAM 角色，该角色允许一个策略允许 edgelambda.amazonaws.com 和 lambda.amazonaws.com 承担 CloudWatch 日志操作。

允许将日志写入 CloudWatch 的基本 Lambda 执行策略：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ],
            "Resource": "arn:aws:logs:*:*:*",
            "Effect": "Allow"
        }
    ]
}

允许 Lambda 和 Lambda@Edge 担任角色的信任关系：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": [
          "edgelambda.amazonaws.com",
          "lambda.amazonaws.com"
        ]
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

如果 AWS 简单地允许在 GUI 中设置 x-frame-options 标头会更好，但在此之前，此解决方案可以正常工作，让您的安全审计员满意。

Answer 2

是的，您可以像这样在 $http angular 服务中设置标头：

$http(method: '<TYPE>', headers: headers, url: <URL>, data: {}).success(...);
var headers = {'X-Frame-Options': ...};