如何在浏览器中使用CloudFront签名的Cookie？

Question

因此，我有一个使用CloudFront的私有CDN（无法通过S3访问数据，只能通过已签名的URL和Cookie来访问数据），其中包含Web应用程序的一些文件。

我网站上的页面之一显示图像，其来源位于CDN上。

<img src="cdn.example.com/images/file.jpg">

现在，当我在服务器上生成签名的URL时，我可以将其传递给客户端并将其设置为源...容易

但是，当我尝试使用签名的Cookie执行相同的操作时，遇到了两个问题：

1. 在服务器端生成签名的cookie之后，我使用res.cookie对其进行了设置，但是我不确定如何在客户端响应时找到它们。
2. 如果实际在客户端获取cookie（使用angular / javascript），如何“设置”它，以便在浏览器尝试获取上述html中的图像时允许访问？

我正在使用node，express和cookie-parser。我对这个东西还很陌生，所以可以帮助您

Answer 1

对于那些尝试从不同域访问 CloudFront 中受保护资源的人，您无法跨域设置 cookie，因此您只能使用签名 URL。不过，您可以在 CloudFront 站点上使用 javascript，使用签名 URL 中的参数直接在 CloudFront 中创建签名 Cookie。我编写了一个简单的 JS 脚本来完成此任务。

aws-signed-cookie-from-signed-url.js

• 在 www.mysite.com 中构建指向 CloudFront url www.cloudfronturl.com/sample/index.html 的签名 URL
• 将 JS 包含在 CloudFront 资源“sample/index.html”中
• 当用户使用签名 URL 时，index.html 将创建 SignedCookie，这将允许 www.cloudfronturl.com/sample 中的所有其他导航基于 cookie 进行工作

Answer 2

您是否检查过Cookie的域与cloudfront cdn的域相同或子域？

仅当cookie来自相关域时，该cookie才会包含在向Cloudfront发行的请求中。例如，如果您在本地使用“ localhost”进行测试，则由于cookie域是“ localhost”，而已签名的cookie域是“ cdn.example.com”，则无法使用。

为确保域正确：

1. 为CloudFront发行版设置CNAME，例如 http://cnd.example.com

2. 确保签名的cookie具有正确的域，例如domain：'*。example.com'将与该域匹配。

这里有一篇很好的文章：https : //www.spacevatican.org/2015/5/1/using-cloudfront-signed-cookies/

还有一个用于创建签名Cookie的好节点模块：https : //github.com/jasonsims/aws-cloudfront-sign

使用此模块，您将执行以下操作：

const options = {
    keypairId: YOUR_ACCESS_ID,
    privateKeyPath: PATH_TO_PEM_FILE
};

const signedCookies = cf.getSignedCookies("http://cdn.example.com/*", options);

for (const cookieId in signedCookies) {
    res.cookie(cookieId, signedCookies[cookieId], {domain: ".example.com"});
}

请注意我设置域的方式。如果未明确设置，它将默认为发出请求的那个，这可能不是您想要的。

最后，要在本地进行测试，我在家庭网络上设置了端口转发，并在GoDaddy中创建了一个CNAME以指向我的家庭IP，例如“ test.example.com”。然后，我使用“ http://test.example.com ”而不是“ http：// localhost ”。这创建了一个带有子域“ test.example.com”的cookie。最后，我在GoDaddy中创建了另一个名为“ cdn.example.com”的CNAME，将其指向CloudFront网址。我在已签名的Cookie“ .example.com”中使用了通配符域，因为现在我在同一域“ example.com”上具有已签名的cookie，所以将其传递给CloudFront并获得繁荣！