网页怎样尽可能禁止用户复制图片地址？

[kisshere]

我想过用 js 禁止右键，禁止拖拽到地址栏或者图片覆盖一层 div ，还有没有比较巧妙的方式禁止用户复制图片地址？

[ladypxy]

没有任何办法, F12 现原形

[wolfie]

canvas

[shuxhan]

禁止右键，禁止拖拽，禁止 f12 （可以在 js 还没加载出来提前 f12 ），混淆 Elements 代码
我觉得防盗链是最好的方法了。

[pytth]

只能骗骗小白，说不定小白学一下，也能会用 F12 去获得图片地址。

[ColinLi]

防盗链

[AllenCai]

blob 试试

[SingeeKing]

canvas 画正解（不过不能防止从开发者工具中看到）

[kop1989smurf]

禁止用户复制图片地址 x

图片防盗链 /更换图形的展示方式（比如楼上说的用画布） √

[wangtian2020]

只能防`君子`防不了`小人`

[RomeoHong]

不要将网页对外开放就好了

[dcncy]

域名白名单

[tulongtou]

@shuxhan 不一定非要按 F12 啊，知道网页地址了看图片链接那还不容易么

[Jooooooooo]

什么伪需求.

你想要的是防盗链吧.

[muhuan]

1. 图片不大的话，直接 base64 放进去，可能影响页面加载速度；
2. 自定义协议，js 端去处理，这样即便拿到链接，无法直接用；

[hgc81538]

用 background-image, 加 pointer-events: none

[gam2046]

防止小白，这两个任选其一：

- blob url
- canvas.drawImage

[killva4624]

以前见过有人把图片放 Flash 里...

[Light3]

你的需求 加禁止鼠标点击应该可以 参考某 dn 论坛
如果目标是防止图片被盗用 那就是防盗链咯

[tool2d]

blob 和 canvas 可以一定程度加密原始图片 url ，但是没办法防止用户截屏，还是治标不治本。

[jamosLi]

svg canvas

[rbq123456]

oncontextmenu="return false"
draggable="false"

img 标签有这两个原生属性，可以禁止右键和拖拽。

至于 f12 再 js 处理下，基本就 OK 了。

[yeejun]

微信截图, 甚至 win 的系统截图都可以取下来. 唯一就是防盗链

[fkdtz]

看你想防谁了，防我还行，防 v 站的各位恐怕不太可能

[mingl0280]

防谁？
没技术的随便禁个 F12 就完了，有技术的我上 Fiddler 搞 mitm 你怎么防得住？

[IvanLi127]

base64 丢 background-image 里？ 用户能访问的东西基本上就等于用户的东西了，你具体想防什么？防用户用你的图片发布到其他地方？

[aaronlam]

你能在浏览器显示出来，就别想着不让人知道图片地址是什么，最多就是限制他即使知道了地址他也不能随便拿来外链使用

[krapnik]

对图片加密，参考： https://sketchfab.com/models/b9a984f3680b467e9b4a2624fec4c02c/embed?autostart=1&internal=1&tracking=0&ui_ar=0&ui_infos=0&ui_snapshots=1&ui_stop=0&ui_theatre=1&ui_watermark=0
当然，还是可以逆向，最近刚好写了一篇相关的文章： https://zhuanlan.zhihu.com/p/571651565

[cht]

可以参考 Getty Images 的方案

[joffey]

防不了截图啊

[runze]

canvas 或 blob ，然后每帧对图片随机遮罩一部分，这样用户看起来是正常的，但是截图时会发现总是有一部分截不全。

[qzwmjv]

终极解决方案，不放图片资源，返璞归真

[zsj950618]

开个脑洞，图片换成一帧的视频，然后用 DRM （

[liuidetmks]

感觉都是无用功，采用自定义格式，自己画可能有点用

[h1104350235]

服务端渲染 canvs ？

[novolunt]

使用新的图片格式，并且使用自己定制的图片解析器，解析器使用 wasm 载到网站，并存在过期时间和 url 等限制。
这样即使图片给别人下载下来也是无法解析的格式。

[66beta]

所以，你这么做的原因是什么？

[yougg]

给你一条未曾设想的道路
在所有图片中都打上水印(明纹 /暗纹都行)
水印内容为: 各种 ru(华 /共 /包)词汇
保证药到病除,谁转谁死.

[dzdh]

blob
图片通过 wasm 解密

[yankebupt]

虽然想说 F12 显原型包括 blob ，但是考虑到 OP 的问法，很可能是防盗链……
这个，各大站包括图床都有，就那种同一个图片地址别人贴链接上来就是灰的那种……
这种是在图片服务器端实现的，可以自己找一找...

[XiLingHost]

用 websocket 传二进制，肯定能防盗链

[Ashore]

@yougg 我怎么觉得 op 会先进去？

[superrichman]

@runze 这个想法妙啊

[zsen]

Firefox 浏览器的 工具→页面信息→媒体，挺好用的

[yolee599]

给用户定制硬件，比如定制平板，防拆认证要达到银行 POS 机级，检测到被拆就销毁固件，使用 4G 网络并加密通讯，用户要看的时候直接提供定制的平板。

[ZE3kr]

用 DRM ，这样截图也截不到，也不需要每帧随机遮罩一部分

[ZE3kr]

然后用户拿出了另一个设备拍了一张照片，所有授权全白搭。哪怕每帧随机遮罩一部分，只要曝光时间选对，拍照也可以破解

[surbomfla]

@yougg 杀敌一千 自损一万

[paradoxs]

这个需求，网页做不到， 但是 windows 客户端是可以做到的。

[lovepplforever]

用 three.js

[yougg]

@surbomfla #47 不会呀, 如果站点在境外自损则忽略不计.

[guowq]

简单，加和图片一样大的水印

[sujin190]

inert

[sujin190]

html 有个 inert 属性，用来禁止鼠标键盘触摸屏操作的，这个也可以让图片不再出现复制链接和保存到本地的菜单

[zhuweiyou]

一楼说得对

[xiang0818]

防止小白很简单。但是会 F12 的就算了。

[iovekkk]

笑死，任你百般花样
我直接 alt+A 微信截图

[wu00]

高亮狂闪，把用户眼睛闪瞎

[milkmlik]

给图片上个专利吧。发现盗用，律师函警告。

[kasusa]

是为了防止用户把你当成图床吗？
保护图片的话 没用啊 用户可以截图的。

[liangyun]

图片访问时验证 cookie

[li02]

webp 就可以了吧

[YUCOAT]

不考虑截屏这种情况，

我觉得可以在网页上创建多个 canvas ，让这些 canvas 拼在在一起，让后将图片各给部位分别绘制到这些 canvas 上，从而看起来像一张图。
最好让这些 canvas 有一些区域重叠，重叠的地方，下面的那一层弄一些混淆。

至于图片的源数据就用 websocket 之类的东西传。

[mokiki]

@yougg 大家好，我是❌🐔

[xytest]

弄个大点的水印吧，没啥好的解决方案

[Rsplwe]

@krapnik #27 我觉得这不是加密吧，就是正常的模型纹理。

[vsean]

图片全部用 base64 ？

[a90120411]

@runze #30 没明白这个实现逻辑，请教补充说明一下关键点？

[timedivision]

防盗链啥的也没用，只要你的图片能显示出来，写个脚本根据图片坐标及大小进行截图，一样能搞下来

[Ne]

你 copy 回来，让别人看，又不让别人 copy 。

如果图片是你原创，可上传图片站证明，别人用了发律师函过去收钱。

如果不是原创，浪费时间。

[runze]

@a90120411 #67
你的图片通过加密 /切分传输，在前端合成，然后画到 canvas 上，这样可以防止简单的 f12 或者右键另存为。

同时每帧随机用水印或者遮罩盖住一部分，由于视觉暂留现象，浏览者看到的还是完整的图片，但是截图得到的就是不完整的。

[systemcall]

图片加密、加鉴权
用 js 解密之后，用 blob
时不时喂给用户一些带盲水印的图，来通过泄露出来的图片追踪用户
很多漫画网站是这么做的

[systemcall]

@tool2d #19
要防止用户截屏，可以考虑上 DRM ，用 Widevine 之类的技术，不过对用户的浏览器有要求，国外比较容易覆盖大部分用户但是国内还是不怎么行
移动端的 App ，软件倒是可以感知截屏。截屏得多了，服务器那边传别的图片就可以了，比如某个盗版漫画网站在检测到非官方客户端或者非法操作的时候，会把剩下的图片全变成鬼图，并且是不一样的

[q409195961]

淘宝天猫，详情没禁止，可直接复制

京东，详情用 div ，然后图片放在 background-image 里

[qwertyzzz]

@iovekkk 我用手机拍(狗头

[Eytoyes]

采集卡可破，甚至可以无视 hdcp

[d7101120120]

如果你的图片价值很大，最好的办法就是加上用户水印并且只开放给特定用户。

如果你的图片集价值并不大，随便一个 canvas 基本上就阻挡大多数普通用户了。

这本身就是数据价值与获取成本的博弈，只有你允许对方看到，就没有绝对的办法阻止对方获取。

[cjpjxjx]

把图片打印出来，寄给用户

[abc0123xyz]

把用户鼠标键盘没收了

[webshe11]

网站改 APP ，互联网信息孤岛+1

[bthulu]

@systemcall 有办法防止用户在虚拟机里打开页面, 在虚拟机外截屏, 或者直接用手机拍照吗?

[webcape233]

直接打印 pdf 截图

[Cat7373]

canvas ，传输层自定义协议，不要直接用公共图片格式

[tool2d]

@systemcall "移动端的 App ，软件倒是可以感知截屏。截屏得多了，服务器那边传别的图片就可以了"

感知不到的，现在手机都是投屏协作，把屏幕投到电脑上自动化截图，APP 怎么感知？

[xupefei]

DRM 能解决所有问题😀

[systemcall]

@tool2d #83
安卓这边，displaymanager 可以获取显示设备，可以设置 flag_secure 来禁止常规的截图。海外市场可以直接上 widevine ，截屏和投屏的内容是黑的
iOS 这边似乎不能限制截图，但是可以捕获截图的事件，投屏的行为也可以感知。安卓不知道怎么感知投屏，但是可以检测是否开启了 adb

[systemcall]

@bthulu #80
手机拍照不能防
但是 widevine 你用过就知道，除了直接拍照以外，都可以防
再加上阅读速度的限制，基本上可以防住那种大量搬运的

[gstqc]

@yougg 这个想法非常可刑

[think2011]

canvas 、视频上面都说了，说一个可以用 box-shadows 直接画

[lanlanye]

在你的静态文件服务器 /CDN 设置验证 Referer 即可防止别人在其他地方引用你的图片地址，防复制属实没有意义

[cheese]

canvas

[goodboysisme]

去看一下脉脉的 web 端

[pennai]

😉在图片上打马赛克，就没人想复制了

[SekiBetu]

https://greasyfork.org/zh-CN/scripts/28497-%E7%BD%91%E9%A1%B5%E9%99%90%E5%88%B6%E8%A7%A3%E9%99%A4-%E6%94%B9

你们俩打一架

[sorsens]

我直接截图

[WebKit]

用户截图怎么报？

[signalas1]

加水印 降画质

[zyronon]

@wolfie #2 思路惊奇...

[a90120411]

@runze #70 感谢回复，我主要是不理解您说的 “ 每帧图片遮罩盖住一部分，截图得到的就是不完整的 ”。 用 canvas 怎么实现的呢？

[Jirajine]

如果是防用户保存，直接截图就行，没意义。
如果是防盗链当图床，那在服务端处理鉴权，或者以非常规格式和协议提供服务。
禁右键禁拖拽的，可以直接 f12 ；禁 f12 更掩耳盗铃，直接浏览器菜单里打开 dev tools 。至于 blob 和 canvas 之类的，f12 直接看网络请求不就完了。

[dangyuluo]

直接系统截图呢