网页怎样尽可能禁止用户复制图片地址？
这是一个创建于 1098 天前的主题，其中的信息可能已经有所发展或是发生改变。
我想过用 js 禁止右键，禁止拖拽到地址栏或者图片覆盖一层 div ，还有没有比较巧妙的方式禁止用户复制图片地址？
 | 1 Dragonish3600 2022-10-13 10:12:40 +08:00 via iPhone  13 没有任何办法, F12 现原形 |
 | 2 wolfie 2022-10-13 10:14:43 +08:00 7 canvas |
 | 3 QUC062IzY3M1Y6dg 2022-10-13 10:14:50 +08:00 1 禁止右键，禁止拖拽，禁止 f12 （可以在 js 还没加载出来提前 f12 ），混淆 Elements 代码 我觉得防盗链是最好的方法了。 |
 | 4 liKeYunKeji 2022-10-13 10:15:17 +08:00 只能骗骗小白，说不定小白学一下，也能会用 F12 去获得图片地址。 |
 | 5 ColinLi 2022-10-13 10:16:15 +08:00 防盗链 |
 | 6 AllenCai 2022-10-13 10:16:18 +08:00 blob 试试 |
 | 7 SingeeKing PRO canvas 画正解（不过不能防止从开发者工具中看到） |
 | 8 kop1989smurf 2022-10-13 10:18:48 +08:00 禁止用户复制图片地址 x 图片防盗链 /更换图形的展示方式（比如楼上说的用画布） √ |
 | 9 wangtian2020 2022-10-13 10:19:13 +08:00 只能防`君子`防不了`小人` |
 | 10 RomeoHong 2022-10-13 10:19:59 +08:00 61 不要将网页对外开放就好了 |
 | 11 dcncy 2022-10-13 10:23:21 +08:00 via iPhone 域名白名单 |
 | 12 DonaidTrump 2022-10-13 10:23:59 +08:00 via iPhone @shuxhan 不一定非要按 F12 啊，知道网页地址了看图片链接那还不容易么 |
 | 13 Jooooooooo 2022-10-13 10:25:20 +08:00 什么伪需求. 你想要的是防盗链吧. |
 | 14 muhuan 2022-10-13 10:25:25 +08:00 2 1. 图片不大的话，直接 base64 放进去，可能影响页面加载速度； 2. 自定义协议，js 端去处理，这样即便拿到链接，无法直接用； |
 | 15 hgc81538 2022-10-13 10:25:39 +08:00 via iPhone 用 background-image, 加 pointer-events: none |
 | 16 gam2046 2022-10-13 10:26:10 +08:00 防止小白，这两个任选其一： - blob url - canvas.drawImage |
 | 17 killva4624 2022-10-13 10:26:38 +08:00 以前见过有人把图片放 Flash 里... |
 | 18 Light3 2022-10-13 10:27:37 +08:00 你的需求 加禁止鼠标点击应该可以 参考某 dn 论坛 如果目标是防止图片被盗用 那就是防盗链咯 |
 | 19 tool2d 2022-10-13 10:28:26 +08:00 1 blob 和 canvas 可以一定程度加密原始图片 url ，但是没办法防止用户截屏，还是治标不治本。 |
 | 20 jamosLi 2022-10-13 10:28:46 +08:00 svg canvas |
 | 21 rbq123456 2022-10-13 10:30:45 +08:00 2 Oncontextmenu="return false" draggable="false" img 标签有这两个原生属性，可以禁止右键和拖拽。 至于 f12 再 js 处理下，基本就 OK 了。 |
 | 22 yeejun 2022-10-13 10:34:50 +08:00 微信截图, 甚至 win 的系统截图都可以取下来. 唯一就是防盗链 |
 | 23 fkdtz 2022-10-13 10:35:41 +08:00 1 看你想防谁了，防我还行，防 v 站的各位恐怕不太可能 |
 | 24 mingl0280 2022-10-13 10:40:47 +08:00 via Android 2 防谁？ 没技术的随便禁个 F12 就完了，有技术的我上 Fiddler 搞 mitm 你怎么防得住？ |
 | 25 IvanLi127 2022-10-13 10:41:06 +08:00 base64 丢 background-image 里？ 用户能访问的东西基本上就等于用户的东西了，你具体想防什么？防用户用你的图片发布到其他地方？ |
 | 26 aaronlam 2022-10-13 10:44:41 +08:00 你能在浏览器显示出来，就别想着不让人知道图片地址是什么，最多就是限制他即使知道了地址他也不能随便拿来外链使用 |
 | 27 krapnik 2022-10-13 10:50:17 +08:00 |
 | 28 cht 2022-10-13 10:52:57 +08:00 可以参考 Getty Images 的方案 |
 | 29 joffey 2022-10-13 10:54:41 +08:00 防不了截图啊 |
 | 30 runze 2022-10-13 11:00:45 +08:00 21 canvas 或 blob ，然后每帧对图片随机遮罩一部分，这样用户看起来是正常的，但是截图时会发现总是有一部分截不全。 |
 | 31 qzwmjv 2022-10-13 11:09:35 +08:00 终极解决方案，不放图片资源，返璞归真 |
 | 32 zsj950618 2022-10-13 11:09:59 +08:00 via Android 1 开个脑洞，图片换成一帧的视频，然后用 DRM （ |
 | 33 liuidetmks 2022-10-13 11:10:11 +08:00 感觉都是无用功，采用自定义格式，自己画可能有点用 |
 | 34 h1104350235 2022-10-13 11:20:49 +08:00 服务端渲染 canvs ？ |
 | 35 novolunt 2022-10-13 11:41:18 +08:00 使用新的图片格式，并且使用自己定制的图片解析器，解析器使用 wasm 载到网站，并存在过期时间和 url 等限制。 这样即使图片给别人下载下来也是无法解析的格式。 |
 | 36 66beta 2022-10-13 11:42:56 +08:00 所以，你这么做的原因是什么？ |
 | 37 yougg 2022-10-13 11:44:13 +08:00 12 给你一条未曾设想的道路 在所有图片中都打上水印(明纹 /暗纹都行) 水印内容为: 各种 ru(华 /共 /包)词汇 保证药到病除,谁转谁死. |
 | 38 dzdh 2022-10-13 11:44:49 +08:00 blob 图片通过 wasm 解密 |
 | 39 yankebupt 2022-10-13 11:50:44 +08:00 虽然想说 F12 显原型包括 blob ，但是考虑到 OP 的问法，很可能是防盗链…… 这个，各大站包括图床都有，就那种同一个图片地址别人贴链接上来就是灰的那种…… 这种是在图片服务器端实现的，可以自己找一找... |
 | 40 KagurazakaNyaa 2022-10-13 12:22:07 +08:00 用 websocket 传二进制，肯定能防盗链 |
 | 42 superrichman 2022-10-13 12:23:56 +08:00 via Android @runze 这个想法妙啊 |
 | 43 zsen 2022-10-13 12:37:56 +08:00 Firefox 浏览器的 工具→页面信息→媒体，挺好用的 |
 | 44 yolee599 2022-10-13 12:38:47 +08:00 via Android 给用户定制硬件，比如定制平板，防拆认证要达到银行 POS 机级，检测到被拆就销毁固件，使用 4G 网络并加密通讯，用户要看的时候直接提供定制的平板。 |
 | 45 ZE3kr 2022-10-13 12:40:29 +08:00 用 DRM ，这样截图也截不到，也不需要每帧随机遮罩一部分 |
| 46 ZE3kr 2022-10-13 12:41:23 +08:00 然后用户拿出了另一个设备拍了一张照片，所有授权全白搭。哪怕每帧随机遮罩一部分，只要曝光时间选对，拍照也可以破解 |
 | 48 paradoxs 2022-10-13 12:43:44 +08:00 这个需求，网页做不到， 但是 windows 客户端是可以做到的。 |
 | 49 lovepplforever 2022-10-13 12:47:37 +08:00 用 three.js |
 | 51 guowq 2022-10-13 13:16:08 +08:00 via Android 简单，加和图片一样大的水印 |
 | 52 sujin190 2022-10-13 13:34:50 +08:00 via Android inert |
| 53 sujin190 2022-10-13 13:38:38 +08:00 via Android html 有个 inert 属性，用来禁止鼠标键盘触摸屏操作的，这个也可以让图片不再出现复制链接和保存到本地的菜单 |
 | 54 zhuweiyou 2022-10-13 13:52:22 +08:00 一楼说得对 |
 | 55 xiang0818 2022-10-13 13:58:06 +08:00 防止小白很简单。但是会 F12 的就算了。 |
 | 56 iovekkk 2022-10-13 14:16:59 +08:00 2 笑死，任你百般花样 我直接 alt+A 微信截图 |
 | 57 wu00 2022-10-13 14:36:00 +08:00 高亮狂闪，把用户眼睛闪瞎 |
 | 58 milkmlik 2022-10-13 14:48:08 +08:00 给图片上个专利吧。发现盗用，律师函警告。 |
 | 59 kasusa 2022-10-13 14:50:14 +08:00 是为了防止用户把你当成图床吗？ 保护图片的话 没用啊 用户可以截图的。 |
 | 60 liangyun 2022-10-13 14:55:17 +08:00 图片访问时验证 cookie |
 | 61 li02 2022-10-13 15:20:09 +08:00 via Android webp 就可以了吧 |
 | 62 YUCOAT 2022-10-13 15:28:33 +08:00 不考虑截屏这种情况， 我觉得可以在网页上创建多个 canvas ，让这些 canvas 拼在在一起，让后将图片各给部位分别绘制到这些 canvas 上，从而看起来像一张图。 最好让这些 canvas 有一些区域重叠，重叠的地方，下面的那一层弄一些混淆。 至于图片的源数据就用 websocket 之类的东西传。 |
 | 64 xytest 2022-10-13 15:42:36 +08:00 弄个大点的水印吧，没啥好的解决方案 |
| 65 h3n6Qx2UB9a4g477 2022-10-13 15:47:33 +08:00 @krapnik #27 我觉得这不是加密吧，就是正常的模型纹理。 |
 | 66 iFrey PRO 图片全部用 base64 ？ |
 | 68 8888888888 2022-10-13 16:02:47 +08:00 防盗链啥的也没用，只要你的图片能显示出来，写个脚本根据图片坐标及大小进行截图，一样能搞下来 |
 | 69 Ne 2022-10-13 16:04:41 +08:00 via Android 你 copy 回来，让别人看，又不让别人 copy 。 如果图片是你原创，可上传图片站证明，别人用了发律师函过去收钱。 如果不是原创，浪费时间。 |
| 70 runze 2022-10-13 16:32:43 +08:00 @a90120411 #67 你的图片通过加密 /切分传输，在前端合成，然后画到 canvas 上，这样可以防止简单的 f12 或者右键另存为。 同时每帧随机用水印或者遮罩盖住一部分，由于视觉暂留现象，浏览者看到的还是完整的图片，但是截图得到的就是不完整的。 |
 | 71 systemcall 2022-10-13 16:34:52 +08:00 图片加密、加鉴权 用 js 解密之后，用 blob 时不时喂给用户一些带盲水印的图，来通过泄露出来的图片追踪用户 很多漫画网站是这么做的 |
| 72 systemcall 2022-10-13 16:39:17 +08:00 1 @tool2d #19 要防止用户截屏，可以考虑上 DRM ，用 Widevine 之类的技术，不过对用户的浏览器有要求，国外比较容易覆盖大部分用户但是国内还是不怎么行 移动端的 App ，软件倒是可以感知截屏。截屏得多了，服务器那边传别的图片就可以了，比如某个盗版漫画网站在检测到非官方客户端或者非法操作的时候，会把剩下的图片全变成鬼图，并且是不一样的 |
 | 73 q409195961 2022-10-13 16:50:14 +08:00 淘宝天猫，详情没禁止，可直接复制 京东，详情用 div ，然后图片放在 background-image 里 |
| 74 asLw0P981N0M0TCC 2022-10-13 16:54:38 +08:00 @iovekkk 我用手机拍(狗头 |
 | 75 Eytoyes 2022-10-13 17:17:23 +08:00 采集卡可破，甚至可以无视 hdcp |
 | 76 d7101120120 2022-10-13 17:23:09 +08:00 如果你的图片价值很大，最好的办法就是加上用户水印并且只开放给特定用户。 如果你的图片集价值并不大，随便一个 canvas 基本上就阻挡大多数普通用户了。 这本身就是数据价值与获取成本的博弈，只有你允许对方看到，就没有绝对的办法阻止对方获取。 |
 | 77 cjpjxjx 2022-10-13 17:31:40 +08:00 把图片打印出来，寄给用户 |
 | 78 abc0123xyz 2022-10-13 17:50:55 +08:00 把用户鼠标键盘没收了 |
 | 79 webshe11 2022-10-13 17:54:42 +08:00 via Android 网站改 APP ，互联网信息孤岛+1 |
 | 80 bthulu 2022-10-13 18:00:50 +08:00 @systemcall 有办法防止用户在虚拟机里打开页面, 在虚拟机外截屏, 或者直接用手机拍照吗? |
 | 81 webcape233 2022-10-13 18:03:27 +08:00 via iPhone 直接打印 pdf 截图 |
 | 82 Cat7373 2022-10-13 18:09:13 +08:00 canvas ，传输层自定义协议，不要直接用公共图片格式 |
| 83 tool2d 2022-10-13 18:15:08 +08:00 |
 | 84 xupefei 2022-10-13 18:35:31 +08:00 via iPhone DRM 能解决所有问题 |
| 85 systemcall 2022-10-13 18:57:12 +08:00 via Android @tool2d #83 安卓这边，displaymanager 可以获取显示设备，可以设置 flag_secure 来禁止常规的截图。海外市场可以直接上 widevine ，截屏和投屏的内容是黑的 iOS 这边似乎不能限制截图，但是可以捕获截图的事件，投屏的行为也可以感知。安卓不知道怎么感知投屏，但是可以检测是否开启了 adb |
| 86 systemcall 2022-10-13 18:58:54 +08:00 via Android |
 | 87 0ZXYDDu796nVCFxq 2022-10-13 19:05:39 +08:00 @yougg 这个想法非常可刑 |
 | 88 think2011 2022-10-13 19:19:33 +08:00 canvas 、视频上面都说了，说一个可以用 box-shadows 直接画 |
 | 89 lanlanye 2022-10-13 19:24:25 +08:00 在你的静态文件服务器 /CDN 设置验证 Referer 即可防止别人在其他地方引用你的图片地址，防复制属实没有意义 |
 | 90 cheese 2022-10-13 20:39:30 +08:00 canvas |
 | 91 goodboysisme 2022-10-13 20:46:37 +08:00 去看一下脉脉的 web 端 |
 | 92 pennai 2022-10-13 20:48:51 +08:00 在图片上打马赛克，就没人想复制了 |
 | 93 SekiBetu 2022-10-13 21:05:58 +08:00 |
 | 94 sorsens 2022-10-13 21:25:56 +08:00 我直接截图 |
 | 95 WebKit 2022-10-13 21:30:10 +08:00 via Android 用户截图怎么报？ |
 | 96 signalas1 2022-10-13 21:56:40 +08:00 加水印 降画质 |
 | 98 a90120411 2022-10-13 23:39:32 +08:00 @runze #70 感谢回复，我主要是不理解您说的 “ 每帧图片遮罩盖住一部分，截图得到的就是不完整的 ”。 用 canvas 怎么实现的呢？ |
 | 99 Jirajine 2022-10-14 04:50:03 +08:00 如果是防用户保存，直接截图就行，没意义。 如果是防盗链当图床，那在服务端处理鉴权，或者以非常规格式和协议提供服务。 禁右键禁拖拽的，可以直接 f12 ；禁 f12 更掩耳盗铃，直接浏览器菜单里打开 dev tools 。至于 blob 和 canvas 之类的，f12 直接看网络请求不就完了。 |
 | 100 dangyuluo 2022-10-14 08:19:34 +08:00 直接系统截图呢 |
Select Language