众所周知,如果我们将图像(或视频)文件作为二进制对象读取,然后为这些对象创建URL,则可以在HTML中显示带有这些blob URL的文件,而这些HTML文件在其他HTML文件中无法访问窗口或标签,因为它仅存在于当前会话中。结果,用户不能简单地保存文件(例如,我们不能简单地下载youtube视频,因为其视频标签以blob URL作为其来源)。
所以我们可以说这是一种防止用户使用开发者控制台窃取敏感文件的方法吗?如果是这样,为什么有那么多网站不这样做呢?我知道许多网站都拥有版权图片或出售壁纸,但是您只需从控制台下载它们的文件即可。还是这种方法有问题?
完全没有。该文件已经在他们的计算机上,他们可以很好地保存它(无论是图像还是视频),并为HTML元素添加blob:// URL不会阻止任何“另存为”操作:
fetch( "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" )
.then( resp => resp.blob() )
.then( blob => {
console.log( 'img loaded' );
const elem = document.querySelector( 'img' );
elem.src = URL.createObjectURL( blob );
} );
fetch( "https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" )
.then( resp => resp.blob() )
.then( blob => {
console.log( 'video loaded' );
const elem = document.querySelector( 'video' );
elem.src = URL.createObjectURL( blob );
} );
Try to right click "save As..." these two media:
<img>
<video controls></video>
撤消blob://加载后的URL可能会使它变得更难一些,但是即使如此,如果您查看开发工具的网络面板,也会看到生成Blob的原始请求以及您的用户将能够在其中抓取您的数据。
[如果他们确实确实想增加下载视频的难度,他们会使用DRM保护它,并且会使用EME API,但不是。您在YouTube视频中看到的blob://网址不是指向Blob,而是指向MediaSource对象。他们确实使用此API来提供自适应内容,即,当连接质量变差时,可以即时发送较低质量的相同媒体。它绝对与任何保护都没有关系,并且在网络上进行快速搜索将告诉您,很容易找到YT正在流式传输的原始文件。