S3 CloudFront React SPA由于标签而返回403,但无法设置403错误页面

时间:2018-08-21 21:29:46

标签: reactjs amazon-s3 amazon-cloudfront auth0 amazon-waf

不幸的是,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。

但是,我不能这样做,因为 staging 环境仅可在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/*"
        }
    ]
}

对此问题有哪些建议的解决方案?

1 个答案:

答案 0 :(得分:0)

我有类似的设置

- 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都不具有任何访问权限是不理想的,但目前为止,在我找到更好的解决方案之前,它一直有效。