AWS cloudfront add custom header without using Lambda@Edge

Question

I would like to add x-frame-options as sameorigin to AWS CloudFront service that serving my application on S3 bucket.

I don't want add new Lambda function to edit requests header.

Actually I found a place under like Attached file:

CloudFront Distributions -> My Distribution settings -> Origins and Origin Groups -> S3 Content item that represent my app -> add Origin Custom Headers -> Header name: x-frame-options, Value :sameorigin

but when deployment going to finish still getting old headers in all related request on S3 bucket files and URL's.

How can I add to headers without any Lambda function just directly working with existing AWS CloudFront panel?

Lonesome

Answer 1

As of November 2021, Cloudfront now supports Response Headers Policies. This allows you to associate a policy with your distribution which defines additional response headers to be returned. If you don't want to use the full Security Headers canned policy, you could create a custom policy with just x-frame-options.

Misconstrue

can you say why this does not work for me? #73751584 – Veronicaveronika

Answer 2

This SO answer helped me out but I found this question first, so sharing the answer here as well.

You can now set headers via CloudFront Functions instead of having to create a Lambda@Edge function. The provided example code given in the documentation worked perfectly for setting headers that were required for outdated browser security:

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;
}

Cordon

Thanks for your answer, I was looking forward to find a way to set headers without any Lambda function but as you and @Dunedan mentioned there is no way without Lambda function then now I'm using Lambda Edge on my project. – Lonesome

Cloudfront functions only work for Viewer Request and Viewer Response events. – Parfait

@SaurishKar yes, you're correct. This is used for viewer response. – Cordon

Answer 3

The "Origin Custom Headers" you're configuring aren't headers which get added to the response from the origin, but rather to the request made to the origin. From the CloudFront documentation:

You can configure CloudFront to add custom headers to the requests that it sends to your origin. These custom headers enable you to send and gather information from your origin that you don’t get with typical viewer requests. These headers can even be customized for each origin. CloudFront supports custom headers for both for custom and Amazon S3 origins.

So that's no option for adding response headers. While there exists the possibility to use S3 metadata to influence the headers returned to the viewer, this only works for the Content-Type-header, so this is neither an option.

The best option is to use a Lambda@Edge function. While that sounds like a cumbersome and expensive solution, it actually isn't. For your use case the code of that Lambda@Edge function could be as simple as shown below:

def lambda_handler(event, context):
    response = event["Records"][0]["cf"]["response"]
    response["headers"]["x-frame-options"] = ":sameorigin"
    return response

When you configure this Lambda@Edge function to trigger on "Origin Response" events in CloudFront, it won't be executed for every viewer request, but instead only when the content returned to the viewer isn't cached by CloudFront and has to be fetched from S3 first. This helps minimizing the additionally latency and cost induced by the execution of the Lambda@Edge function.

Banded

Thanks for your help, I was sure about this but in some documentations and comments in the Stackoverflow developers who engaged with this problem telling that you can add by Original Custom Header as shown in the picture, but unfortunately it did not work. – Lonesome