如何安全地存储图像并只允许用户访问 [React]

Question

我正在使用 ReactJS 构建一个工具，其中（登录的）用户可以将图像上传到某种类型的画廊，他们可以随时从那里的用户帐户访问。

我计划将数据直接上传到云存储（很可能是芥末）并存储在那里。

让用户以安全方式访问图像的最佳做法是什么？当然，上传图片的用户应该能够在他的图库中看到它们，但其他用户则看不到。我的意思是我当然只能在画廊中显示与用户相关的图像，但我担心数据保护以及直接访问图像。存储文件是否足够？在一个带有哈希名称的文件夹中，这样没有人可以猜到图像路径？还是需要其他一些限制？我只是不明白如何在不严重降低用户体验的情况下额外限制对要在帐户中显示的图像的访问。

很高兴阅读您的想法。

谢谢！

Answer 1

我有一个类似的问题，我不能简单地给出图像资源的 URL，因为这些图像资源是特定于某些用户的。 我让我的 API 返回图像的字节流，然后在我的反应应用程序中按如下方式使用它

images(id: string, cancelToken?: CancelToken): Promise<FileResponse> {
 let url_ = "pathtoendpoint/{id}";

 let options_ = <AxiosRequestConfig>{
   cancelToken,
   responseType: "blob",
   method: "GET",
   url: url_,
   headers: {
     Accept: "application/octet-stream",
     Authorization: "Bearer ezfsdfksf...."
   },
 };

    
 return Axios.create().request(options_).then((_response: AxiosResponse) => 
 { 
   return new Promise<FileResponse>(_response.data);
 });

} 

export interface FileResponse {
  data: Blob;
  status: number;
  fileName?: string;
  headers?: { [name: string]: any };
}

然后我创建一个包含 uri 的临时 DOM 字符串

let uri = URL.createObjectURL(data)

一旦我有了 uri，我就可以这样显示它

<img src={uri} id="someId" alt="" />

通过采用这种方法，我将图像字节视为任何其他类型的数据，无论是字符串、数字还是布尔值。并且，可以保护该资源。

这是我的服务器端控制器方法的样子，我使用的是 .NET 核心，但您将在任何其他平台上遵循类似的方法

[Produces("application/octet-stream")]
public async Task<ActionResult> GetImageById([FromRoute] Guid id)
{
    var resource = await DatalayerService.GetImageAsync(id);

    return File(resource.Filebytes, resource.ContentType);
}