I test my website using https://observatory.mozilla.org/analyze and I got F score.
The reasons are:
Content Security Policy (CSP) header not implemented X-XSS-Protection header not implemented X-Frame-Options (XFO) header not implemented ...
I serve my website using CloudFront.
Where I put those missing headers to CloudFront?
Update 23 June 2021
Just found out that while the solution below seems great, it may not be good enough especially for adding security headers because if Cloudfront gets an error from the origin, the function will not be invoked
HTTP status codes CloudFront does not invoke edge functions for viewer response events when the origin returns HTTP status code 400 or higher.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/edge-functions-restrictions.html
As of May 2021, it seems the better option would be the newly introduced Cloudfront functions which comes at a 1/6th the price of Lambda@Edge as per this blog entry https://aws.amazon.com/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/
An example from the documentation at https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-security-headers.html
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; }
2.1m questions
2.1m answers
60 comments
57.0k users