React(CRA)中如何隐藏public文件夹下的图片防止被URL直接访问

首先明确核心逻辑：CRA构建时会将public文件夹下的所有资源原封不动复制到打包产物根目录，静态服务器默认会直接响应这类路径的文件请求，所以默认配置下资源必然可以通过URL直接访问，不存在纯前端层面的彻底拦截方案，所有可行手段都需要配合资源位置调整或服务端配置实现，具体可选方案如下：

• 调整资源存放位置，移出public目录
  将需要限制访问的图标从public/images目录移动到src/assets这类源码目录下。这类资源会经过webpack打包处理，只有被业务代码显式import引用时才会被加入构建产物，不会生成可直接枚举访问的公开固定路径，普通用户无法通过猜测URL直接打开资源。
  注意：该方案仅能避免资源被路径猜中直接访问，打包后的资源依然会存在于构建产物的chunk文件中，有抓包能力的用户依然可以提取到资源，适合防护要求不高、仅需避免随意公开访问的场景。
• 静态服务层配置访问规则拦截
  如果资源必须存放在public目录，直接修改部署使用的静态服务器（Nginx、Node服务、Caddy等）配置，对/images/*路径的请求增加校验逻辑：
  • 校验请求Referer头，仅允许来自本站点页面发起的请求返回资源，用户直接在地址栏输入URL发起的请求会因为无合法Referer被拦截，返回403状态码
  • 给资源路径增加时效签名，前端加载资源时动态生成带签名的临时URL，服务端校验签名合法才返回资源，无签名、签名过期的请求直接拦截
    附Nginx校验Referer的简单配置示例：

  location /images/ {
      valid_referers server_names 你的站点域名;
      if ($invalid_referer) {
          return 403;
      }
  }
  

  注意：Referer头可以被技术手段伪造，该方案仅能拦截普通用户的直接访问行为，无法抵挡刻意伪造请求的恶意访问。
• 改为接口鉴权后动态返回资源
  将图标资源从public静态托管目录移到服务端非公开存储位置，前端加载资源时携带用户身份凭证调用专用资源接口，服务端校验当前用户有对应访问权限后，再将图片以流的形式返回给前端。该方案防护强度最高，可以实现严格的权限控制，无权限用户哪怕拿到完整URL也无法访问到资源。

内容的提问来源于stack exchange，提问作者I don't know