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

Question

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

我打算将数据直接上传到云存储（很可能是 wasabi）并存储在那里。

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

很高兴读到你的想法。

谢谢！

Answer 1

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

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);
}

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

How to store images securely and allow access only for user [React]

storage

node.js

reactjs

wasabi-hot-cloud-storage