如果我使用基于令牌的身份验证，我应该如何加载图像

Question

我在域 client-domain.com 上有一个客户端应用程序，在域 server-domain.com 上有一个服务器端应用程序。服务器端有一个 API。客户端应用程序向服务器端应用程序发送 AJAX 请求。我使用基于令牌的身份验证，因此客户端应用程序在每个 AJAX 请求的标头中发送令牌，例如：“Authorization: Bearer {some token}”。当我需要获取或发布一些数据时，它适用于 AJAX 请求。

但服务器端 API 也保存文件。例如图像。这些文件是私有的，只有经过身份验证的用户才能获取它们。我需要在客户端的<img> 标签中显示这些图像。我无法使用<img src="http://server-domain.com/path/to/image"> 获取它们，因为在这种情况下，浏览器不会将授权标头发送到服务器端。

采用的解决方案是什么？客户端应用程序如何从服务器端 API 加载图像？

Answer 1

有三种方法可以解决，最好的解决方法是使用签名的网址

---

1. 第一种方法只是创建一个无需身份验证（匿名访问）的路由，并使用签名哈希参数指示资源是否可以加载。

<img src="http://server-domain.com/path/to/image?guid=f6fc84c9f21c24907d6bee6eec38cabab5fa9a7be8c4a7827fe9e56f2">

当服务器收到请求时，如果未达到过期时间，则必须验证 guid，当然，还要检查 guid 是否为有效签名。

这种方法被多个文件/文档服务器使用，例如 Dropbox、S3、CDN 提供商等。

看看一些公司的技术。

• https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-signed-urls.html#private-content-overview-choosing-duration

• https://client.cdn77.com/support/knowledgebase/cdn-resource/how-do-i-set-up-signed-urls

---

1. 第二种方法是通过带有图像 URL 的查询字符串传递令牌。

   • 这种方法不推荐，因为暴露的url很清楚，很多服务器有时会写入和暴露访问的url的公共日志。不好的一点是 JWT 正常暴露，用户可以控制很多功能，进一步加载图像。

<img src="http://server-domain.com/path/to/image?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c">

当服务器收到请求时，您必须通过查询字符串验证令牌并响应内容。

---

1. 第三种方法创建一个经过身份验证的 cookie 来验证对图像的访问。

   • 不推荐使用此方法，因为它不符合 API 模式（通常基于 webapi/token 的身份验证）。

当服务器收到请求时，你需要验证 validate cookie 是否有效。

Answer 2

根据 Jefferson Tenorio 在下面的回答（选项 1），我对这个完全相同的问题的解决方案是使用图像加密和用户的 JWT 令牌对我的 API 调用的 URL 进行签名，例如path/to/image?token=xxxx。在 laravel 中，这很容易通过 encrypt($your_object) 和 decrypt($token) (https://laravel.com/docs/5.7/encryption) 完成，然后我使用提取的令牌来验证用户是否可以访问相关文件。但可能还有许多其他库能够处理这个问题。

如果存在任何安全问题，我会很好奇，但从我的角度来看，JWT 永远不会通过纯文本公开，并且加密依赖于恶意行为者不应访问的密钥，因此它似乎应该相当安全。我唯一真正的抱怨是令牌很长，使用这种方法不适合呈现 URL。