不幸的是,Auth0在回调URL中为单页样式应用程序添加了一个#标签。请参阅下面的示例。
https://stage.domain.com/callback#access_token=...&otherQueryParam=...
这会在我的S3和Cloudfront环境中返回403错误。
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>...</RequestId>
<HostId>
...
</HostId>
</Error>
我在互联网上看到的解决方案涉及在CloudFront中创建额外的自定义错误句柄配置,以将任何403错误重定向到200并呈现index.html。
但是,我不能这样做,因为暂存环境只能在VPN后面访问,并且有一个WAF规则可以阻止除VPN之外的所有IP地址。如果我允许403,它将使WAF规则无效并公开暴露我的暂存环境。
希望我的React SPA能够在S3中托管以获得简单的可扩展性,但是,看起来我可能需要启动某种运行Nginx的EC2。
存储策略
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ..."
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::stage.domain.com/*"
}
]
}
针对此问题提出了哪些解决方案?
我有类似的设置,
- WAF only allows access from a set of whitelisted IPs
- CloudFront Serves React Site from S3
- CloudFront Custom error response redirects 403 -> 200 and renders index.html
请求网页的白名单之外的任何IP都会收到200响应,但应用程序不会呈现,只会显示白页。
我同意任何非白名单的IP都不是理想的,但是现在它一直有效,直到我能找到更好的解决方案。