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

Question

我已经配置了基于认知的身份验证，并且所有内容都在我的本地机器上运行，但是当我将编译后的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权限

我有一个单一页面应用程序的演示托管方式相同，您可以从此页运行它来与之进行比较。标准设置仅允许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边缘函数来服务默认文档，而不管您的单个Page中用户的路径是什么：

• 设置默认文档的代码

以下是我的演示SPA的几条路径。请注意，其中的第一个可能是应用程序中的路径，因此默认的文档处理会处理这个问题。其中的第二个结果出现在一个不存在的Javascript文件中，而我没有试图修复它，因此它导致了与您所得到的错误相同的结果：

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

关注点2:安全头

当您在那里时，您还应该编写一个lambda边缘函数来使用推荐的安全头，类似于以下内容：

• 设置安全标头的代码

如果您然后浏览到Mozilla天文台并输入您的站点名，您将获得更好的安全等级，就像我的演示应用程序：

• 演示应用程序安全等级

LAMBDA边缘测试和部署

lambda边缘函数可以在一个小的子项目中进行管理，就像在我的例子中一样。我使用Serverless框架，这意味着逻辑是用Serverless.yml文件表示的，然后在开发期间运行这些命令来测试逻辑：

npm install
npm run defaultDocument
npm run securityHeaders

然后，我使用以下命令部署代码：

npm run package
npm run deploy

摘要

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