S3 托管 Static 站点上的授权问题

Question

我已经配置了基于 cognito 的身份验证，一切都在我的本地机器上运行，但是当我将编译的 nuxt 应用程序推送到 S3 时，登录后出现以下错误：

<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>YJ5VBAF69BFHNTRA</RequestId>
<HostId>+ROpBRvEbtrVxTgwqSfhDvK5jwhCfbD9eoE3X6RslkFghQXDL+NwkupIqXoYW2Em9ZoBEhP31Oo=</HostId>
</Error>

这似乎是一个 s3 错误，我不确定是什么原因导致的，因为该网站在其他方面表现正常。

可以通过注册并尝试登录网站 (copyswapper.com) 来重复。

Answer 1

这是提供默认文档 (index.html) 的问题 - 下面的修复说明。

地方发展

在您的本地计算机上，开发 web 服务器，例如 webpack 服务index.html ，无论用户在 vue.js 应用程序中浏览的路径如何：

• http://localhost:3000/登录

AWS

我看到您正在将 static 个文件部署到 S3，然后通过 Cloudfront 为它们提供服务。 但默认文档处理方式不同，这意味着此路径不提供index.html文件，而是导致错误：

• https://copyswapper.com/login

权限

我有一个以相同方式托管的演示单页应用程序，您可以从该页面运行以进行比较。 标准设置是只允许 Cloudfront 通过这样的权限访问文件。 如果文件丢失，则会导致上述错误：

{
    "Version": "2008-10-17",
    "Id": "PolicyForPublicWebsiteContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity H1D9C6K7CY211F"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::web.authsamples.com/*"
        }
    ]
}

问题 1：违约文件处理

您需要提供 lambda 边缘 function 来提供默认文档，无论用户在单页应用程序中的路径如何：

• 设置默认文档的代码

这是我的演示 SPA 的几个路径。 请注意，其中第一个可能是应用程序中的路径，因此默认文档处理会处理它。 第二个结果是一个不存在的 Javascript 文件，我没有尝试修复它，所以它会导致你得到同样的错误：

• https://web.authsamples.com/nonexistentpath
• https://web.authsamples.com/nonexistentpath.js

问题 2：安全标头

当你在那里时，你还应该写一个 lambda edge function 来使用推荐的安全标头，类似于：

• 设置安全标头的代码

如果您随后浏览到Mozilla Observatory并输入您的站点名称，您将获得更好的安全评级，就像我的演示应用程序一样：

• 演示应用程序安全评级

LAMBDA 边缘测试和部署

lambda 边缘功能可以在一个小的子项目中进行管理，如我的示例所示。 我使用 Serverless 框架，这意味着逻辑在Serverless.yml 文件中表达，然后我在开发过程中运行这些命令来测试逻辑：

npm install
npm run defaultDocument
npm run securityHeaders

然后我使用这些命令部署代码：

npm run package
npm run deploy

概括

单页应用程序不是 100% static，需要一些代码来处理上面提到的两个问题。