S3 托管静态站点的授权问题

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/login

AWS

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

https://copyswapper.com/login

AWS 权限

我有一个以相同方式托管的演示单页应用程序，您可以从 this page 运行进行比较。标准设置是只允许 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 边缘函数来提供默认文档：

Code to set the default document

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

问题 2：安全 HEADERS

当你在那里时，你还应该编写一个 lambda 边缘函数来使用推荐的安全性 headers，类似于：

Code to set security headers

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

Demo App Security Rating

LAMBDA 边缘测试和部署

lambda 边缘函数可以在一个小的子项目中管理，如 my example. I use the Serverless framework, meaning the logic is expressed in a Serverless.yml file 然后我在开发过程中运行这些命令，以测试逻辑：

npm install
npm run defaultDocument
npm run securityHeaders

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

npm run package
npm run deploy

摘要

单页应用不是 100% 静态的，需要一些代码来处理上述两个问题。

S3 托管静态站点的授权问题

Authorization Issues on S3 Hosted Static Site

amazon-s3

vue.js

amazon-cognito

nuxt.js