这是一个创建于 791 天前的主题，其中的信息可能已经有所发展或是发生改变。
我想过用 js 禁止右键，禁止拖拽到地址栏或者图片覆盖一层 div ，还有没有比较巧妙的方式禁止用户复制图片地址？
 |
1
ladypxy 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
shuxhan 2022-10-13 10:14:50 +08:00 1
禁止右键，禁止拖拽，禁止 f12 （可以在 js 还没加载出来提前 f12 ），混淆 Elements 代码
我觉得防盗链是最好的方法了。 |
 |
4
pytth 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 2022-10-13 10:18:09 +08:00
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
域名白名单
|
 |
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
XiLingHost 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
弄个大点的水印吧，没啥好的解决方案
|
 |
66
vsean 2022-10-13 15:55:08 +08:00
图片全部用 base64 ？
|
 |
68
timedivision 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 里 |
 |
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