如何实现Instagram同款浏览器存网页时无法保存图片/视频的效果

无法保存Instagram网页图片的核心原因 #

Instagram没有将图片、视频作为独立静态资源直接暴露给DOM，而是做了多层渲染屏蔽，网页另存为工具只会导出DOM里直接关联的静态资源，自然拿不到真实的媒体文件：

• 真实媒体内容通过canvas动态绘制，而非挂载在、
• 标签的src设置为透明占位图，真实内容通过CSS背景图渲染，另存为操作默认只会抓取标签关联的占位图
• 媒体上层叠加了高z-index的透明遮罩层，右键、另存为操作默认选中的是空白遮罩层，无法触达底层媒体
• 视频、大体积图片采用分片加载，浏览器缓存中不会留存完整的资源文件

可落地的防另存为技术实现方案 #

可以根据自身业务场景组合使用以下方案：

• canvas动态渲染媒体：把图片解码后通过drawImage()接口绘制到canvas节点，页面只保留canvas节点不暴露原始资源链接；如果是视频，可以通过requestAnimationFrame逐帧将隐藏的video元素内容绘制到canvas，全程不暴露原始视频地址
• 替换原生标签默认资源：使用标签承载内容时，将src属性设置为1px透明占位图，真实内容通过background-image加载，同时给标签加pointer-events: none属性屏蔽右键默认行为
• 叠加透明遮罩层：在所有需要防存的媒体节点上层，叠加尺寸一致的空透明
  层，设置z-index高于媒体节点，所有交互操作默认会命中空遮罩层，无法触达底层媒体
• 拦截默认保存相关操作：全局监听contextmenu事件阻止右键菜单弹出，监听keydown事件阻止F12、Ctrl+S、Ctrl+Shift+I等快捷键的默认行为
• 分片加载资源：对大体积图片、视频做切片处理，前端通过JS拉取分片后拼接渲染，浏览器缓存中不会留存完整的资源文件，即使用户查找本地缓存也拿不到完整内容

注：所有前端侧的防存方案都只能提升普通用户的保存门槛，无法完全阻止有技术能力的用户通过抓包、截图、录屏等方式获取内容，建议根据自己的防泄露需求合理选择方案。

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