【juice-shop】★ Missing Encoding：消失的图片

0x01 任务简报

💡 核心线索 (Hints)

1. 在照片墙中找一张无法正常加载的图片。
   
2. 你只需（字面意义上）检查问题就能看出症结所在。
   
3. 试着点击该条目的推文按钮，观察一下效果。

🎓 实战动作 (Action)

• 目标：照片墙里那张加载失败的图片。
• 工具：浏览器开发者工具（F12）。
• 操作：找到图片的真实 URL，手动修复特殊字符后直接访问。

0x02 实战：复现漏洞

1. 发现异常

打开照片墙，发现一个图片位置空白，没有加载出来：

2. 检查病灶

打开开发者工具，查看该图片的 src 地址，问题一目了然——URL 没有做任何转义：

3. 分析原因

原始图片链接是：

1

http://127.0.0.1:3000/assets/public/images/uploads/ᓚᘏᗢ-#zatschi-#whoneedsfourlegs-1572600969477.jpg

关键知识点：# 在 URL 中是锚点符号（fragment identifier），浏览器遇到第一个 # 就会截断，后面的内容根本不会发送给服务器。

所以服务器实际收到的请求只有：

1

http://127.0.0.1:3000/assets/public/images/uploads/ᓚᘏᗢ-

文件名后半段全部丢失，自然找不到图片。

4. 修复并验证

将 # 替换为其 URL 编码形式 %23，手动访问修复后的地址：

1

http://127.0.0.1:3000/assets/public/images/uploads/ᓚᘏᗢ-%23zatschi-%23whoneedsfourlegs-1572600969477.jpg

图片成功加载，挑战完成 ✓

0x03 知识延伸

为什么叫"Missing Encoding"？

这类漏洞的根源是：程序在把用户数据（文件名、输入内容等）拼接进 URL 时，忘记对特殊字符进行编码。常见的危险字符包括：

在代码里怎么正确处理？

1
2
3
4

// 只编码文件名部分，不要对整个 URL 编码
const filename = 'ᓚᘏᗢ-#zatschi-#whoneedsfourlegs-1572600969477.jpg'
const safeUrl = '/assets/public/images/uploads/' + encodeURIComponent(filename)
// 结果：/assets/public/images/uploads/%E1%93%9A%E1%98%8F%E1%97%A2-%23zatschi-%23whoneedsfourlegs-1572600969477.jpg

0x04 参考资料

• 📖 MDN：encodeURIComponent()
• 📖 OWASP：URL 编码防御手册