We have a static javascript SPA deployed to S3 behind Cloudfront. We need to serve our index.html for all the resources that don’t exist which we configured via CloudFront custom error response and it works great.

We now have an additional requirement to configure extra security headers (X-Frame-Options, Strict-Transport-Security, etc). We configured that via a response header policy.

It only works for resources that physically exist, but not our custom error response index.html which means all our SPA routes don’t have these security headers.

Is there any way to solve it?

What we’ve tried so far:

1. Response Header Policy
2. Adding headers via Lambda@Edge

So how do we go about adding a security header to custom error page?