Cloudfront CSP headers limited to 1784 characters

Hi, Try using CloudFront function rather, it is another alternative to lambda@edge for such use cases. I recently used it with fairly large CSP headers.

See these articles for more implementation details,

https://aws.amazon.com/blogs/networking-and-content-delivery/adding-http-security-headers-using-lambdaedge-and-amazon-cloudfront/ https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-security-headers.html Hope this helps.

Hi, Above suggestion is for implementing 'CloudFront Function' , not lambda@edge. CloudFront function is as simple as modifying your distribution. There are two types of edge functions available with CloudFront -

1. Lambda@edge
2. CloudFront Function

thanks

I had the same issue and opened a support ticket and had my limit raised you should be able to as well if you have support

Hey there!

Thanks for your answer!

Yeah, that is an option on the table, and thanks for confirming it can handle large headers.

But I wish I only got to customize an existing Cloudfront distribution, rather than provisioning a lambda at edge in addition to it.

When you think about it, wasn't the November 2nd announcement specifically to allow users NOT TO rely on lambda at edge anymore for headers?

Hello @AWS-User-0834290! So I set up CloudFront Functions, using Terraform, for reference, that looked like this:

  default_cache_behavior {
    [...]
    function_association {
      event_type   = "viewer-response"
      function_arn = aws_cloudfront_function.test.arn
    }

  }
  resource "aws_cloudfront_function" "test" {
    name    = "test"
    runtime = "cloudfront-js-1.0"
    comment = "my function"
    publish = true
    code    = file("${path.module}/headers.js")
 }

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'; frame-ancestors 'none'"};
    headers['x-content-type-options'] = { value: 'nosniff'};
    headers['x-frame-options'] = {value: 'DENY'};
    headers['x-xss-protection'] = {value: '1; mode=block'};
    headers['referrer-policy'] = {value: 'same-origin'};

    // Return the response to viewers
    return response;
}

and it worked... EXCEPT for error pages !

Error pages would not send response headers from my function; unfortunately, I'm relying on them a lot since I'm serving a Single Page Application where I redirect 404s to index.html with 200.

So I'm back to square one, this time I just intend on reverting back to Response Headers Policy and review my CSP header, since I actually believe I can slim them down to 1784 characters or less without affecting security.