如果我使用基于令牌的身份验证，我应该如何加载图像 [英] How should I load images if I use token-based authentication

问题描述

我在域 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"> 获取它们，因为在这种情况下浏览器不会将 Authorization 标头发送到服务器端.

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

解决方案

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

<小时>

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

<小时>

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

   • 这种方法是不推荐的，因为它会清楚地暴露 URL，而且许多服务器有时会编写和暴露访问 URL 的公共日志.不好的一点是，JWT 通常公开，用户可以进一步控制图像加载的许多功能.

 <代码>< IMG SRC = http://server-domain.com/path/to/image?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c" >

当服务器收到请求时，您必须通过查询字符串和带有内容的响应来验证令牌.

<小时>

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

   • 不推荐这种方法，因为它不符合 API 模式(一般是基于 webapi/token 的身份验证).

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

I have a client-side application on domain client-domain.com and a server-side application on domain server-domain.com. There is an API on the server-side. The client-side application sends AJAX requests to the server-side application. I use token-based authentication, so the client-side application sends token in headers with each AJAX request, for example: "Authorization: Bearer {some token}". It works fine with AJAX requests, when I need to get or post some data.

But the server-side API also keeps files. For example images. The files are private, only authenticated users can get them. And I need to show this images on the client-side in <img> tag. I can't get them using <img src="http://server-domain.com/path/to/image"> because in this case browser will not send Authorization header to the server-side.

What is the adopted solution? How client applications load images from server-side API?

解决方案

There are three methods to solve it, the best approach to solve it is using the signed URLs

---

1. The first method simply creates a route without authentication (anonymous access) with a signature hash parameter that indicates if the resource can be loaded or not.

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

When the server receives the request you must validate the guid if the expiration time not been reached and, of course, check if guid is a valid signature.

This approach is used by several files/documents servers like Dropbox, S3, CDN providers, etc.

See the technique in some companies.

• 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

---

2. The second method is passed the token by querystring with the image URL.

   • This method is not recommendable because expose clearly the url and many servers sometimes write and expose public logs of URL accessed. The bad notice is that the JWT exposed normally the user can get control a lot of features further the image load.

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

When the server receives the request you must validate the token by querystring and response with the content.

---

3. The third method creates an authenticated cookie to validate the access of the image.

   • This method is not recommendable because is out of API pattern (webapi/token based authentication in general).

When the server receives the request you need to validate if the validate cookie is valid.

这篇关于如果我使用基于令牌的身份验证，我应该如何加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！