Configure X-Frame-Options response header on AWS CloudFront and S3

Question

I would like to add an HTTP response header X-Frame-Optionsfor static content hosted on Amazon S3 with a Cloudfront cache. How can I add these headers?

Answer 1

You can add a header with x-frame parameters in response from CloudFront / S3 using the Lambda @Edge function . Lambda code works in local places of edges, but it needs to be created and maintained in the area us-east-1.

The sample code here uses nodeJS 6.10 to add a response header

'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 Version CloudFront origin-response .

CloudWatch . , IAM , CloudWatch edgelambda.amazonaws.com lambda.amazonaws.com.

Lambda, CloudWatch:

{
    "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 x-frame-options , .

Answer 2

Lambda @Edge

,

Answer 3

CloudFront. : * https://console.aws.amazon.com/cloudfront/home?region=us-east-1#distributions: * * " " * / origin → edit *

Answer 4

, $http angular, :

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