问题

在使用 JWT 的网站里，如果要根据身份限制图片的加载，img 里的 src 如果不修改只能用 cookies 的方式验证身份。

网上有一些解决方案，但是都不是很完美，比如：

直接添加 token 到 src 里，这样会暴露 token，不安全；

使用 fetch 获取 base64 编码的图片，这样会增加服务器的压力，并且和一些编辑器不兼容。

解决方案

如果直接在 img 的 src 里加上 token，这会导致安全问题。

浏览器可能会记录或缓存图像。

为了解决这个问题，需要在后端生成一次性 token，并添加到 img 的 src 里。

这个一次性可以是通过数据库或内存记录，或者通过极短的过期时间来生成 token。

解决方案如下：

  1. 在后端生成一次性的令牌（Token）：当用户经过身份验证并获得访问权限时，在后端生成一个一次性的令牌。这个令牌可以是随机生成的字符串，或者使用加密算法生成。确保令牌的生成足够安全，以防止被猜测或恶意使用。
  2. 将令牌添加到图像链接中：将生成的令牌添加到要加载的图像链接中。可以通过在链接的查询参数中添加令牌，或者将令牌添加到链接的路径中。例如，如果图像的原始链接是 https://example.com/images/image.jpg，则可以修改为 https://example.com/images/image.jpg?token=xxxxxxxx 或 https://example.com/images/token-xxxxxxxx/image.jpg，其中 xxxxxxxx 是生成的令牌。
  3. 验证令牌：在后端接收到对图像的请求时，从请求中提取令牌，并验证其有效性。验证过程可能涉及检查令牌的签名、过期时间以及与用户身份的关联等。确保在验证令牌时进行适当的安全性检查，以防止令牌伪造或篡改。
  4. 加载图像：如果令牌验证成功，则允许加载图像。可以通过提供带有正确的授权标头的图像数据来响应请求。否则，如果令牌验证失败，则可以返回适当的错误响应或者加载替代的图像。