托管Angular应用程序时保护s3存储桶

Question

我知道有两种创建Cloudfront Origin的方法：

1. 从s3存储桶本身粘贴网站终结点；
2. 从列表中选择s3。

现在，当我执行＃1时-我的网站似乎确实有效，但是我必须公开存储桶。而且，如果我使用CF发行版进行测试，我不希望每个人都可以访问存储桶中的文件。好的，我可以使用WAF / IP列表限制对CF本身的访问。太好了。

下一步，我只允许从CF访问s3存储桶。我发现使用＃2是可以实现的，而且已经做到了，但是现在我只有Angular应用的第一页工作，例如登录。登录后，应用程序重定向到某处，例如/ page / authenticated，并且出现错误“指定的密钥不存在”。我发现一个漂亮的answer解释了这种情况。

但是，我仍然不理解，我可以在使用s3-website端点时限制对s3存储桶的访问吗？或者，如果我要路由正常工作，我必须将s3存储桶设为公共状态，而无需其他变体？

Answer 1

您可以将存储桶设为私有，仅允许使用CloudFront进行访问。

您不需要使用存储桶的网站端点。

要使SPA（包括Angular）起作用，必须做的就是添加自定义Error Pages。

转到Error Pages，然后单击Create Custom Error Response。

为404和403创建一个条目。它应该看起来像这样

Answer 2

我参加聚会可能有点晚了，但我最近发表了一篇文章，其中详细描述了安全最佳实践，有助于解决以下几点：

• 如何保护存储敏感用户数据和应用程序代码的 S3 存储桶。
• 如何安全地配置 CloudFront 分配。
• 如何使用 CloudFront Functions 保护前端应用免受常见 OWASP 威胁。

要了解更多信息have a look at the article。

最好的， 斯蒂芬