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

Question

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

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

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

Answer 1

解决它的方法有 3 种，最好的解决方法是使用 签名 URL

第一种方法简单地创建一个没有身份验证(匿名访问)的路由，带有一个签名哈希参数，指示是否可以加载资源。

<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

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

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

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

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

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

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

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