title: Add X-Frame-Options header to all URLs using CloudFront functions
body: <p>I have a single page application and I'm trying to prevent clickjacking by adding X-Frame-Options header to the HTML responses. My website is hosted on S3 through CloudFront.</p>
  <p>The CloudFront distribution is configured to send <code>index.html</code> by default:</p>
  <pre><code>Default root object
  index.html
  </code></pre>
  <p>In the Error Pages section I configured 404 page to also point to the <code>index.html</code>. This way all URLs that are not in S3 return the default HTML, i.e. <code>/login</code>, <code>/admin</code> etc.</p>
  <p><a href="https://i.stack.imgur.com/AArVi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AArVi.png" alt="404 error page config" /></a></p>
  <p><strong>Update</strong> The 403 status code is also configured:
  <a href="https://i.stack.imgur.com/3AjUK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3AjUK.png" alt="403 error page config" /></a></p>
  <p>Then I have created a CloudFront function as described <a href="https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-security-headers.html" rel="nofollow noreferrer">here</a> and assigned it to the Viewer response:</p>
  <pre><code>function handler(event) {
      var response = event.response;
      var headers = response.headers;
  
      headers['x-frame-options'] = {value: 'DENY'}; 
  
      return response;
  }
  </code></pre>
  <p>This works, but only for <code>/</code>:</p>
  <pre><code>curl -v https://&lt;MYSITE.com&gt;
  ....
  &lt; x-frame-options: DENY
  </code></pre>
  <p>For other URLs it doesn't work - the x-frame-options header is missing:</p>
  <pre><code>curl -v https://&lt;MYSITE.com&gt;/login
  ....
  &lt; x-cache: Error from cloudfront
  </code></pre>
  <p>My question is - why my cloudfront function does not append a header in the error response, and what can I do to add it?</p>