Easily modify HTTP security headers in Cloudfront distributions

[kpeters-cbsi]

I'd like to see a way to easily modify the HTTP security headers inserted when the insertHttpSecurityHeaders parameter is set to true in (e.g.) CloudFrontToS3.

Use Case

This has been requested before. It would allow the user to specify custom headers for HTTP responses from CloudFront and would ease the deployment of single page apps (SPAs) using CloudFront and CDK.

Proposed Solution

Something like the below:

// This is quick and dirty and doesn't really match your style. But you get the idea. :D
const cfToS3 = new CloudFrontToS3(this, 'CloudFront', {
  cloudFrontDistributionProps: {
    responseHeaders: [
     { 'content-security-policy': "default: 'self'..." }
   ]
  }
});

Other

I can get to the CloudFront function associated with the distro via cfToS3.cloudFrontFunction, but it's a read-only property so I can't just stick my own function in its place.

• 👋 I may be able to implement this feature request
• ⚠️ This feature might incur a breaking change

---

This is a 🚀 Feature Request

[biffgaut]

Thanks, we'll take a look. To clarify, would you want to add additional headers to what the construct already applies for security headers or would you want to take complete control of the headers?

[kpeters-cbsi]

I would want complete control of the headers.

[biffgaut]

The headers sent the cloudFrontDistributionProps will be sent to the CloudFront Distribution CDK Constructor here. If props.insertHttpSecurityHeaders is true (which is the default), then a CloudFront Function is created to insert the security headers and the provided headers are lost.

If you want to fully specify the headers, then setting insertHttpSecurityHeaders to false should cause the construct to use your headers. If this is not the case, then I think this is a bug or a misunderstanding on my part of the CloudFront Header functionality.

If you would like your headers returned from the CloudFront function there are 2 options:

• When headers are provided, we replace these lines with code that creates a CloudFront function that returns the desired headers. This seems to follow our functional pattern to use the props passed in and pretty simple for the client.
• Expose the ability to provide the CloudFront function in its entirety. This makes the client's responsibility a little tougher, but allows the client full control of any functionality they wish to implement in the CloudFront function.

[biffgaut]

I believe PR 852 provides what you are looking for - ability to specify ResponseHeadersPolicyProps. Is this correct?

[georgebearden]

Hi - After reviewing this issue, it looks like it was resolved in #852 as mentioned above. Please re-open if this is not the case.