使用 Lambda@Edge 和 Amazon CloudFront 为所有路由（错误路由）添加 HTTP 安全标头答案

【问题标题】：Adding HTTP Security Headers Using Lambda@Edge and Amazon CloudFront for All routes (error routes)使用 Lambda@Edge 和 Amazon CloudFront 为所有路由（错误路由）添加 HTTP 安全标头
【发布时间】：2021-11-09 23:05:56
【问题描述】：

我正在使用这个文档https://aws.amazon.com/blogs/networking-and-content-delivery/adding-http-security-headers-using-lambdaedge-and-amazon-cloudfront/

我在 S3 存储桶中使用了一个带有云端 CDN 的反应应用程序。我添加了一个 lambdaedge 来添加安全标头

 headers['x-frame-options'] = [{key: 'X-Frame-Options', value: 'DENY'}]; 
 headers['x-xss-protection'] = [{key: 'X-XSS-Protection', value: '1; mode=block'}];

主页 (mySite.com) 运行良好：

但它不适用于其他路线，例如 mySite.com/login

当我在 cloudFront 中检查错误行为时，没有添加标头的选项

为什么这个页面/login 出错了？因为react router doesn't work in aws s3 bucket

【问题讨论】：

标签： amazon-s3 amazon-cloudfront aws-lambda-edge

【解决方案1】：

我解决此问题的方法是实现一个源请求 Lambda@Edge 函数，该函数根据 S3 源中已知文件和路径的白名单验证 event.Records[0].cf.request.uri 值。如果路径与白名单不匹配，它会将 uri 值更新为 /index.html，这允许 React 应用处理请求。

通过此更改，将不再有任何 404 请求，这意味着响应将成功通过添加响应标头的原始响应 Lambda@Edge 函数。

【讨论】：