javascript - 如何在浏览器中使用 CloudFront 签名的 cookie？

Question

所以我有一个私有(private) CDN(无法通过 S3 访问数据，只能通过签名的 URL 和 cookie)使用 CloudFront，其中包含一些用于 Web 应用程序的文件。

我网站上的一个页面显示了一张图像，其源位于 cdn 上。

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

现在，当我在服务器上生成一个签名 URL 时，我可以将它传递给客户端并将其设置为源...简单

但是当我尝试使用签名 cookie 做同样的事情时，我遇到了 2 个问题:

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

我正在使用 node、express 和 cookie-parser。 我对这些东西很陌生，所以感谢任何帮助

Answer 1

您是否检查过 cookie 的域是否与 CloudFront CDN 的域相同或为子域？

仅当来自相关域时，cookie 才会包含在对 CloudFront 分配的请求中。例如，如果您使用“localhost”在本地进行测试，这将不起作用，因为 cookie 域是“localhost”，但签名的 cookie 域是“cdn.example.com”。

确保域名正确:

1. 为 CloudFront 分配设置 CNAME，例如 http://cdn.example.com

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

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

还有一个很好的 Node 模块用于创建签名的 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 URL。我在签名的 cookie“.example.com”中使用了通配符域，因为我现在在同一个域“example.com”上拥有签名的 cookie，它被传递到 CloudFront 并且繁荣我们已经起飞了!