简体中文

视频和字幕 · YouTube 缩略图下载器和元数据查看器

浏览器如何保存跨域图像:获取、Blob URL 和下载

· 工作原理

youtube JavaScript 科尔斯

远程 JPEG 成为浏览器 Blob 和本地下载
原始 ToolAcre 矢量图

保存来自另一个域的图像比保存具有下载属性的链接更困难。这篇文章解释了为什么跨域 URL 会忽略该属性、fetch 和 Blob URL 如何解决它以及 CORS 与它有何关系。

下载属性打开了图像而不是保存它 - 跨域捕获

指向不同原点的锚点可能会导航到图像,而不是遵循所需的文件名。可靠的下载程序需要在浏览器跨域规则下具有可读字节,而不仅仅是远程 URL 上的下载属性。可见测试很简单:保存经过验证的 JPEG 应该创建 ToolAcre 文件名,而无需添加另一个 i.ytimg.com 请求。

ToolAcre 已获取每个 JPEG 候选者以确定其是否真实。保留成功的 Blob 意味着稍后的下载可以使用这些相同的字节,而不是发出第二个网络请求。这种重用使保存的文件与之前检查过尺寸和占位符状态的图像相同。

为什么浏览器会忽略其他来源的下载 - 安全决策及其后果

浏览器限制跨源下载,因为页面不应默默地重命名和保存任意远程资源。行为取决于远程响应和来源关系,因此简单的链接并不是通用的文件保存 API。仅 `download` 属性无法保证远程 YouTube 图像将以请求的本地名称保存。

更安全的设计是明确的:请求公开的公共图像,验证响应,并仅为允许页面读取的数据构建浏览器管理的对象 URL。如果 CORS 阻止访问,JavaScript 就没有 Blob 来验证或保存,即使直接导航到图像地址仍可能在选项卡中显示它。

fetch-and-Blob 路由 — 获取图像字节,将它们包装在 Blob 中并创建同源 blob:URL

对于 JPEG,probeThumbnail 执行匿名 CORS GET,将成功响应转换为 Blob 并解码维度。结果中保留了可用的 Blob,而占位符则被丢弃,因此它们无法伪装成下载。因此,下载按钮代表内存中经过验证的字节,而不是单独从文件名或 HTTP 200 推断出的置信度。

对象 URL 可以代表本地保存操作的内存中 Blob。这不会使原始的 fetch 成为本地的; Google 在 Fetch 后直接将字节提供给浏览器。 `blob:` 地址是该响应正文的临时浏览器句柄,而不是 ToolAcre 托管的镜像或新授予的源图像权限。

CORS 允许 JPEG fetch-and-Blob 下载; WebP 仍然仅链接

概要暗示 CORS 是一种通用门,但交付的行为是特定于格式的。 JPEG fetch-and-Blob 下载有效; /vi_webp/ 路径在没有所需的跨域标头的情况下提供,因此 ToolAcre 仅提供 WebP 作为链接。审阅者应分别测试两个路径系列,而不是将 JPEG 响应标头推广到每种缩略图格式。

该限制无法通过更改 JavaScript 或通过 ToolAcre 重试来修复,因为不存在 ToolAcre 代理。阻止程序、脱机连接或公司代理也可以停止任一远程资源。仅链接 WebP 访问准确地反映了远程服务器允许页面执行的操作:指向文件,但不读取其字节以进行重新打包。

命名保存的文件 - 为什么下载器应按视频 ID 和大小命名,以便文件保持可识别性

下载的 JPEG 名称使用 youtube-VIDEO_ID-VARIANT.jpg。标识符和变体都来自经过验证的字母表,防止路径分隔符或任意控制字​​符输入建议的文件名。因此,从一次查找中保存 `maxresdefault` 和 `hq2` 应该会生成不同的、可预测的名称,这些名称可以匹配回其结果行。

当多个尺寸位于一个文件夹中时,描述性文件名可以保留出处。它还避免假装元数据标题是安全的文件系统名称,因为标题可以包含标点符号并且可以独立更改。不可变 ID 标识视频参考,而变体后缀解释哪个已发布的图像候选者提供了字节。

工作示例:为一个视频保存两个缩略图大小 - 请求序列和生成的文件

获取一个公共视频并选择两个可用的 JPEG 变体。每个在探测过程中都被请求一次,解码以证明维度并保留为 Blob;单击“保存”应重用该结果并生成两个名称明确的文件。打开 DevTools 后,如果没有第二个图像请求,则确认保存来自保留的响应,而不是新的远程下载。

如果一个候选者返回 HTTP 200 作为 120×90 占位符,则该工具会将其标记为丢失,并且不会存储可下载的 Blob。 404、其他错误或无法解码的响应同样会被报告而不是保存。禁用这些行的保存操作可防止通用占位符或错误负载以令人信服的变体名称进入资产文件夹。

这不包括 - 跨多个视频的批量下载,以及阻止跨源读取的主机

许多视频没有批处理模式,也没有绕过禁止跨域读取的主机。该产品一次处理一个视频,并将其自身限制为两项公开的谷歌服务。每个保留的 Blob 都属于当前结果集,因此不应将其视为后续视频或同一缩略图的未来版本的持久缓存。

它也不会检索视频或音频,并且私人、已删除或有年龄限制的记录仍然不可用。公共文件保存机制无法扩展访问权限或制作缺失的缩略图。 Blob 创建仅在可读图像字节到达后开始,因此它不提供绕过拒绝响应或未发布变体的路由。

JPEG 获取、Blob 重用和下载 - 将 WebP 保留为链接

在 Fetch 之前,URL 解析是本地的。之后,每个 JPEG 探测和规范的 oEmbed 请求直接从浏览器发出,省略凭据、无引荐来源网址、无存储并遵循重定向; Google 会看到 Origin 标头。独立地确定重要下载的日期,因为对象 URL 和可预测的源路径都不会保留早期的缩略图修订版本。

结果是故意不对称的:经过验证的 JPEG 字节可以成为 Blob 下载,而五个 WebP 海报 URL 仍然是外部链接,因为它们的响应缺乏 CORS 权限。界面应该保留诚实的边界。用户可以打开或复制 WebP 地址,但 ToolAcre 不能承诺从浏览器禁止读取的字节中重命名本地 WebP 文件。