AWS CloudFront 签名的 cookie + S3 可在 REST 客户端应用程序中运行，但不能在浏览器中运行

Question

我尽可能详细地提出这个问题，以便遇到相同问题的其他人都将拥有全面的资源来解决这个问题并使其发挥作用。

目标

目标是使用签名 cookie，以便我的应用程序中经过身份验证的用户可以自由访问他们的任何文件，而无需签署 URL。

S3 和 CloudFront 配置

我很确定其中大部分都是正确的，但为了提供完整的图片，我将包括我所拥有的设置。

S3配置

我有一个桶，我们可以打电话my-storage。它具有以下 CORS 配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

桶策略是：

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity xxx"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-storage/*"
        },
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-storage/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "http://localhost:8080/*"
                }
            }
        }
    ]
}

本地主机异常只是为了让我可以在本地构建/测试我的应用程序，因为 HTTP cookie 由于跨域问题而无法正常工作。

CloudFront分布

我有一个使用此存储桶作为源的 CloudFront 发行版。在本文中，我们将称 CNAME 为files.mysite.com。这是原始配置：

行为配置有点太多，无法截图和发布，但重要的细节是：

• 允许的 HTTP 方法：GET、HEAD、OPTIONS
• 缓存和源请求设置：使用缓存策略和源请求策略
• 缓存策略：托管缓存优化
• 源请求策略：托管-CORS-S3Origin
• 限制查看者访问：是
• 可信签名者：自己

失眠测试呈阳性（REST 客户端）

我正在使用Insomnia REST 客户端来测试这一点，将浏览器从等式中删除，看起来工作正常。

我向 API 发出请求以返回签名的 cookie，我可以在响应标头中看到该 cookie：

date: Tue, 25 Aug 2020 15:09:35 GMT
x-amzn-requestid: xxx
access-control-allow-origin: https://web.mysite.com
set-cookie: CloudFront-Policy=xxx; Domain=mysite.com; Path=/users/; HttpOnly; Secure
set-cookie: CloudFront-Key-Pair-Id=xxx; Domain=mysite.com; Path=/users/; HttpOnly; Secure
set-cookie: CloudFront-Signature=xxx; Domain=mysite.com; Path=/users/; HttpOnly; Secure
x-amz-apigw-id: xxx
vary: Origin
x-powered-by: Express
x-amzn-trace-id: Root=xxx;Sampled=1
access-control-allow-credentials: true
x-cache: Miss from cloudfront
via: 1.1 xxx.cloudfront.net (CloudFront)
x-amz-cf-pop: ORD52-C1
x-amz-cf-id: xxx

Insomnia 将 cookie 存储在客户端中。然后我请求GET一个文件https://files.mysite.com/users/xx/xx.mp3。我收到 200 响应和文件的二进制数据，没问题。标头显示 cookie 已正确发送：

> GET /users/9dbb70d7-3d17-4215-8966-49815e461dee/audio/d76bb13d-0e1d-45dc-b7e5-9cb8fb6dee1a/workfile.mp3 HTTP/1.1
> Host: files.mysite.com
> User-Agent: insomnia/2020.3.3
> Cookie: CloudFront-Key-Pair-Id=xxx; CloudFront-Signature=xxx; CloudFront-Policy=xxx
> Origin: https://web.mysite.com
> Accept: */*

伟大的！所以从理论上讲，这应该可行。

实际浏览器结果

不过，网络应用程序中会发生以下情况。我进行身份验证，并且看到 API 请求发出以获取签名的 cookie：

GET https://api.mysite.com/private/get-signed-cookie

{
  "Response Headers (1.373 KB)": {
    "headers": [
      {
        "name": "access-control-allow-credentials",
        "value": "true"
      },
      {
        "name": "access-control-allow-origin",
        "value": "https://web.mysite.com"
      },
      {
        "name": "date",
        "value": "Tue, 25 Aug 2020 15:16:28 GMT"
      },
      {
        "name": "set-cookie",
        "value": "CloudFront-Policy=xxx; Domain=mysite.com; Path=/users/; HttpOnly; Secure"
      },
      {
        "name": "set-cookie",
        "value": "CloudFront-Key-Pair-Id=xxx; Domain=mysite.com; Path=/users/; HttpOnly; Secure"
      },
      {
        "name": "set-cookie",
        "value": "CloudFront-Signature=xxx; Domain=mysite.com; Path=/users/; HttpOnly; Secure"
      },
      {
        "name": "vary",
        "value": "Origin"
      },
      {
        "name": "via",
        "value": "1.1 xxx.cloudfront.net (CloudFront)"
      },
      {
        "name": "x-amz-apigw-id",
        "value": "xxx"
      },
      {
        "name": "x-amz-cf-id",
        "value": "xxx"
      },
      {
        "name": "x-amz-cf-pop",
        "value": "ORD52-C1"
      },
      {
        "name": "x-amzn-requestid",
        "value": "xxx"
      },
      {
        "name": "x-amzn-trace-id",
        "value": "xxx"
      },
      {
        "name": "x-cache",
        "value": "Miss from cloudfront"
      },
      {
        "name": "X-Firefox-Spdy",
        "value": "h2"
      },
      {
        "name": "x-powered-by",
        "value": "Express"
      }
    ]
  }
}

此时，值得注意的是，我在 Firefox 开发工具中看不到 cookie！我只能假设它们没有被存储。

当浏览器尝试通过 CloudFront 发行版访问某些内容时：

GET https://files.mysite.com/users/9dbb70d7-3d17-4215-8966-49815e461dee/audio/d76bb13d-0e1d-45dc-b7e5-9cb8fb6dee1a/workfile.mp3

我得到403 Forbidden这个机构的回应：

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity xxx"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-storage/*"
        },
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-storage/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "http://localhost:8080/*"
                }
            }
        }
    ]
}

果然，请求标头没有显示Cookie已发送的迹象：

{
  "Request Headers (535 B)": {
    "headers": [
      {
        "name": "Accept",
        "value": "audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5"
      },
      {
        "name": "Accept-Encoding",
        "value": "gzip, deflate, br"
      },
      {
        "name": "Accept-Language",
        "value": "en-US,en;q=0.5"
      },
      {
        "name": "Connection",
        "value": "keep-alive"
      },
      {
        "name": "Host",
        "value": "files.mysite.com"
      },
      {
        "name": "Origin",
        "value": "https://web.mysite.com"
      },
      {
        "name": "Range",
        "value": "bytes=0-"
      },
      {
        "name": "Referer",
        "value": "https://web.mysite.com/dashboard"
      },
      {
        "name": "User-Agent",
        "value": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:79.0) Gecko/20100101 Firefox/79.0"
      }
    ]
  }
}

我在这里缺少什么？所有相互通信的 URL 都具有相同的域（发出 cookie 的 API、Web 客户端、CloudFront 发行版）。Express API 具有正确的 CORS 配置，我非常确定：

date: Tue, 25 Aug 2020 15:09:35 GMT
x-amzn-requestid: xxx
access-control-allow-origin: https://web.mysite.com
set-cookie: CloudFront-Policy=xxx; Domain=mysite.com; Path=/users/; HttpOnly; Secure
set-cookie: CloudFront-Key-Pair-Id=xxx; Domain=mysite.com; Path=/users/; HttpOnly; Secure
set-cookie: CloudFront-Signature=xxx; Domain=mysite.com; Path=/users/; HttpOnly; Secure
x-amz-apigw-id: xxx
vary: Origin
x-powered-by: Express
x-amzn-trace-id: Root=xxx;Sampled=1
access-control-allow-credentials: true
x-cache: Miss from cloudfront
via: 1.1 xxx.cloudfront.net (CloudFront)
x-amz-cf-pop: ORD52-C1
x-amz-cf-id: xxx

我完全被难住了。对此的任何帮助将不胜感激！

Answer 1

好的，有很多步骤来解决这个问题。我可能没有完全记录下来，但这是我更改/修复的内容：

客户端问题

客户端使用 axios 来获取二进制文件，并使用 anHTMLAudioElement来获取音频文件。两者都必须更新才能发送凭据（cookie）。对于 axios 调用，是 this axios.get(url, { withCredentials: true })，对于HTMLAudioElementit's是audioEl.crossOrigin = 'use-credentials'。现在，这两个请求都会将 HTTP cookie 发送到 CloudFront。

API网关变更

一些 CORS 的东西必须在这里设置。对于这篇文章来说太深了，但我使用无服务器框架来配置 API 网关，这使事情变得容易多了！在serverless.yml文件中我必须进行一些更改：

          cors:
            origins:
              - https://localhost:8080
              - https://*.mysite.com
            headers:
              - Content-Type
              - X-Amz-Date
              - Authorization
              - X-Api-Key
              - X-Amz-Security-Token
              - X-Amz-User-Agent
              - x-user-id # this is my own header I pass from the web client
            allowCredentials: true

这基本上设置了 API Gateway 飞行前端OPTION点，以便它返回正确的 CORS 标头。它在 API Gateway 中创建此智能脚本来处理多个来源：

#set($origin = $input.params("Origin"))
#if($origin == "") #set($origin = $input.params("origin")) #end
#if($origin.matches("https://localhost:8080") || $origin.matches("https://.+[.]mysite[.]com")) #set($context.responseOverride.header.Access-Control-Allow-Origin = $origin) #end

再说一遍，这个答案太深奥了。但任何使用无服务器的人都应该查看无服务器框架。这可以节省大量时间！

S3配置

S3 的 CORS 配置必须进行修改。对上述配置的唯一更改是：

#set($origin = $input.params("Origin"))
#if($origin == "") #set($origin = $input.params("origin")) #end
#if($origin.matches("https://localhost:8080") || $origin.matches("https://.+[.]mysite[.]com")) #set($context.responseOverride.header.Access-Control-Allow-Origin = $origin) #end

整个堆栈的首要规则是，如果您使用Access-Control-Allow-Credentials: true，则不能将允许的来源设置为*。