AI 抓取军备竞赛：保护动态网页上的视觉资产
Source: Dev.to
介绍
随着 AI 训练模型对视觉数据的需求日益增长，网络爬虫已经从简单的 HTML 解析器演变为能够执行 JavaScript 并与动态内容交互的完整无头浏览器。这一转变迫使开发者超越 robots.txt，采用更复杂的混淆技术来保护专有的图像和媒体。
Short answer
并非完全，但你可以让爬取成本高得令人望而却步。
Source:
现代机器人
现代机器人（使用 Puppeteer、Playwright 或 Selenium 等工具）并不仅仅是“下载 HTML”；它们运行完整的浏览器引擎。如果用户的浏览器能够执行 JavaScript 来渲染图像，机器人也可以做完全相同的事情——客户端执行环境是相同的。
开发者可以增加机器人的计算成本：
- 一个简单的
curl请求只需毫秒级时间，几乎不占用 CPU。 - 强迫机器人运行完整的 Chrome 实例、执行复杂的 JavaScript 解码器并渲染 Canvas 元素，会显著放慢抓取过程，使大规模数据收集变得困难。
拦截动态网络流量
问题： 机器人能拦截动态网络流量吗，例如由 image.src = "url" 触发的请求？
回答： 可以。现代无头浏览器使用 Chrome DevTools Protocol（CDP），允许机器人：
- 挂钩网络层 – 监听浏览器发出的每个请求，无论是由 HTML 还是 JavaScript 事件触发。
- 按类型过滤 – 可以立即按
资源类型：Image或特定扩展名（.jpg、.png）进行过滤。 - 负载检查 – 如果图片 URL 包含在 JSON 对象中，机器人可以拦截 XHR/Fetch 响应并在图片渲染前解析 JSON。
示例负载检查
{
"profile_pic": "https://example.com/images/user123.jpg"
}机器人可以捕获 XHR 响应，提取 URL，并在不触及 DOM 的情况下下载图片。
对策
Canvas 渲染
与直接使用 <img> 标签（会在 DOM 中暴露 src URL）不同，开发者可以将图像绘制到 HTML5 <canvas> 上。
技术手段
- 将图像数据以二进制 Blob 或原始像素数据的形式获取。
- 使用 JavaScript 将图像绘制到 canvas 上。
结果 – DOM 中仅显示一个 <canvas> 元素，未出现指向图像文件路径的引用。
机器人障碍 – 为了“看到”图像，机器人必须对渲染后的页面进行截图并使用计算机视觉/OCR 进行识别，这比直接下载文件要慢得多且更容易出错。
Emoji‑Codec URL 混淆
自定义编码方案可以隐藏 URL，防止爬虫抓取。一个示例是 Emoji‑Codec 协议。
技术手段
- 服务器发送一串经过编码的表情符号，而不是普通文本 URL。
- 编码采用单表替换密码，将标准 Base64 字符映射到随机排列的 64 个 Unicode 表情符号上。
- 映射表（即“密钥”）可以在每个会话或连接中更换。
示例负载
{
"url": "🚀🍕🌈🍦🦄📚🔑..."
}工作原理
- 浏览器使用保存在内存中的会话专属密钥将表情符号字符串解码回真实 URL。
- 仅看到表情符号流的爬虫在没有密钥和解码逻辑的情况下无法还原有效的图像 URL。
优势
- 绕过过滤 ASCII 关键字（如
SELECT、“）的 Web 应用防火墙（WAF）。 - 使寻找标准 URL 模式的爬虫失效。
短期签名 URL
动态站点可以使用带有时间限制的令牌提供图像（例如 AWS S3 预签名 URL）。
技术手段
https://bucket.s3.amazonaws.com/image.jpg?token=abc123&expires=60结果 – URL 在短时间后（如 60 秒）失效。即使机器人捕获了该 URL，也会在其尝试单独下载请求时失效，无法使用。
深度防御策略
没有单一方法能够对决心坚定的逆向工程师提供完美的免疫。然而，结合：
- Canvas 渲染（强制视觉提取），
- 如 Emoji‑Codec 的负载混淆，和
- 短期有效的签名 URL
即可构建分层防御。这迫使爬虫从高效的网络嗅探转向低效的视觉处理，从而保持动态视觉内容的完整性。
进一步阅读： emoji-codec on GitHub