如何防止页面被开发者工具审查时嵌入图片资源暴露网站文件夹结构？

路径暴露的安全影响 #

这类服务器实际目录路径暴露明确会提升网站的安全风险，属于典型的敏感信息泄露问题，具体风险包括：

• 直接暴露服务端的目录结构规则，相当于给攻击者提供了信息参考，攻击者可以基于你暴露的app/users/secretUsers/这类有语义的路径，猜测其他业务模块的存储规则，大幅降低目录遍历、文件包含、上传漏洞等常见web漏洞的利用成本
• 如果你没有为静态资源配置独立的权限校验逻辑，攻击者只要拿到完整路径就能直接访问到原本属于权限管控范围内的敏感资源，比如你示例中的保密用户头像不需要登录就能直接被获取
• 如果后续你业务出现未授权访问、路径穿越这类漏洞，暴露的路径规则会让攻击者的利用过程几乎没有门槛

可行的规避方案 #

方案1：静态资源代理转发（最推荐，适合敏感资源） #

不要让web服务直接暴露静态资源的访问地址，统一用PHP做资源访问的入口，前端只能拿到资源ID，完全看不到真实路径：

1. 所有图片的前端访问地址统一为类似/resource/image?file_id=随机字符串ID的格式
2. 后端收到请求后先校验当前用户是否有该资源的访问权限，再通过ID从数据库查询对应的真实存储路径
3. 由PHP读取文件内容后输出给前端，示例代码如下：

// 简化版资源代理入口代码
$fileId = trim($_GET['file_id'] ?? '');
if (empty($fileId) || !isLogin() || !checkResourcePermission($uid, $fileId)) {
    http_response_code(403);
    exit;
}
$realPath = $db->query("SELECT storage_path FROM user_resources WHERE file_id = ?", [$fileId])->fetchColumn();
if (!$realPath || !file_exists($realPath)) {
    http_response_code(404);
    exit;
}
header('Content-Type: ' . mime_content_type($realPath));
readfile($realPath);
exit;

方案2：将资源存储到web根目录之外 #

基础安全配置，把用户上传的敏感资源、内部业务文件都存储到web服务配置的根目录以外的路径。比如你的web服务对外根目录是/var/www/project/public，那就把图片存储到/var/www/project/storage/user_avatar路径下，该路径默认无法通过HTTP直接访问，只能通过PHP代理读取，就算路径泄露攻击者也无法直接访问。

方案3：web服务路径映射（适合非敏感公开资源） #

如果是公开的不需要权限校验的静态资源，可以通过Nginx/Apache的重写规则做路径映射，对外暴露无意义的虚拟路径，内部映射到真实存储路径。以Nginx为例：

location /static/avatar/ {
    alias /var/www/project/app/users/secretUsers/;
}

前端只能看到/static/avatar/xxx.jpg的路径，完全感知不到后端真实的目录结构。

补充优化 #

所有敏感资源的文件名不要用用户名、用户ID、手机号这类有语义的字符串，统一生成UUID或者随机32位字符串作为文件名，就算路径规则泄露，攻击者也无法批量猜测到其他资源的完整地址。

内容的提问来源于stack exchange，提问作者Billie Jean