时间戳

首页 > 解决方案 > 由于主题标签，S3 CloudFront React SPA 返回 403，但无法设置 403 错误页面

reactjs - 由于主题标签，S3 CloudFront React SPA 返回 403，但无法设置 403 错误页面

问题描述

不幸的是，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/*"
        }
    ]
}

这个问题有哪些建议的解决方案？

标签： reactjsamazon-s3amazon-cloudfrontauth0amazon-waf

解决方案

我有类似的设置，

- 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 都无法获得任何访问权限并不理想，但现在它可以工作，直到我找到更好的解决方案。

推荐阅读