V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kisshere
V2EX  ›  程序员

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

  •  
  •   kisshere · 2022-10-13 10:10:40 +08:00 · 11072 次点击
    这是一个创建于 533 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    111 条回复    2022-10-23 01:36:20 +08:00
    1  2  
    ladypxy
        1
    ladypxy  
       2022-10-13 10:12:40 +08:00 via iPhone   ❤️ 13
    没有任何办法, F12 现原形
    wolfie
        2
    wolfie  
       2022-10-13 10:14:43 +08:00   ❤️ 7
    canvas
    shuxhan
        3
    shuxhan  
       2022-10-13 10:14:50 +08:00   ❤️ 1
    禁止右键,禁止拖拽,禁止 f12 (可以在 js 还没加载出来提前 f12 ),混淆 Elements 代码
    我觉得防盗链是最好的方法了。
    pytth
        4
    pytth  
       2022-10-13 10:15:17 +08:00
    只能骗骗小白,说不定小白学一下,也能会用 F12 去获得图片地址。
    ColinLi
        5
    ColinLi  
       2022-10-13 10:16:15 +08:00
    防盗链
    AllenCai
        6
    AllenCai  
       2022-10-13 10:16:18 +08:00
    blob 试试
    SingeeKing
        7
    SingeeKing  
       2022-10-13 10:18:09 +08:00
    canvas 画正解(不过不能防止从开发者工具中看到)
    kop1989smurf
        8
    kop1989smurf  
       2022-10-13 10:18:48 +08:00
    禁止用户复制图片地址 x

    图片防盗链 /更换图形的展示方式(比如楼上说的用画布) √
    wangtian2020
        9
    wangtian2020  
       2022-10-13 10:19:13 +08:00
    只能防`君子`防不了`小人`
    RomeoHong
        10
    RomeoHong  
       2022-10-13 10:19:59 +08:00   ❤️ 61
    不要将网页对外开放就好了
    dcncy
        11
    dcncy  
       2022-10-13 10:23:21 +08:00 via iPhone
    域名白名单
    tulongtou
        12
    tulongtou  
       2022-10-13 10:23:59 +08:00 via iPhone
    @shuxhan 不一定非要按 F12 啊,知道网页地址了看图片链接那还不容易么
    Jooooooooo
        13
    Jooooooooo  
       2022-10-13 10:25:20 +08:00
    什么伪需求.

    你想要的是防盗链吧.
    muhuan
        14
    muhuan  
       2022-10-13 10:25:25 +08:00   ❤️ 2
    1. 图片不大的话,直接 base64 放进去,可能影响页面加载速度;
    2. 自定义协议,js 端去处理,这样即便拿到链接,无法直接用;
    hgc81538
        15
    hgc81538  
       2022-10-13 10:25:39 +08:00 via iPhone
    用 background-image, 加 pointer-events: none
    gam2046
        16
    gam2046  
       2022-10-13 10:26:10 +08:00
    防止小白,这两个任选其一:

    - blob url
    - canvas.drawImage
    killva4624
        17
    killva4624  
       2022-10-13 10:26:38 +08:00
    以前见过有人把图片放 Flash 里...
    Light3
        18
    Light3  
       2022-10-13 10:27:37 +08:00
    你的需求 加禁止鼠标点击应该可以 参考某 dn 论坛
    如果目标是防止图片被盗用 那就是防盗链咯
    tool2d
        19
    tool2d  
       2022-10-13 10:28:26 +08:00   ❤️ 1
    blob 和 canvas 可以一定程度加密原始图片 url ,但是没办法防止用户截屏,还是治标不治本。
    jamosLi
        20
    jamosLi  
       2022-10-13 10:28:46 +08:00
    svg canvas
    rbq123456
        21
    rbq123456  
       2022-10-13 10:30:45 +08:00   ❤️ 2
    oncontextmenu="return false"
    draggable="false"

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

    至于 f12 再 js 处理下,基本就 OK 了。
    yeejun
        22
    yeejun  
       2022-10-13 10:34:50 +08:00
    微信截图, 甚至 win 的系统截图都可以取下来. 唯一就是防盗链
    fkdtz
        23
    fkdtz  
       2022-10-13 10:35:41 +08:00   ❤️ 1
    看你想防谁了,防我还行,防 v 站的各位恐怕不太可能
    mingl0280
        24
    mingl0280  
       2022-10-13 10:40:47 +08:00 via Android   ❤️ 2
    防谁?
    没技术的随便禁个 F12 就完了,有技术的我上 Fiddler 搞 mitm 你怎么防得住?
    IvanLi127
        25
    IvanLi127  
       2022-10-13 10:41:06 +08:00
    base64 丢 background-image 里? 用户能访问的东西基本上就等于用户的东西了,你具体想防什么?防用户用你的图片发布到其他地方?
    aaronlam
        26
    aaronlam  
       2022-10-13 10:44:41 +08:00
    你能在浏览器显示出来,就别想着不让人知道图片地址是什么,最多就是限制他即使知道了地址他也不能随便拿来外链使用
    krapnik
        27
    krapnik  
       2022-10-13 10:50:17 +08:00
    cht
        28
    cht  
       2022-10-13 10:52:57 +08:00
    可以参考 Getty Images 的方案
    joffey
        29
    joffey  
       2022-10-13 10:54:41 +08:00
    防不了截图啊
    runze
        30
    runze  
       2022-10-13 11:00:45 +08:00   ❤️ 21
    canvas 或 blob ,然后每帧对图片随机遮罩一部分,这样用户看起来是正常的,但是截图时会发现总是有一部分截不全。
    qzwmjv
        31
    qzwmjv  
       2022-10-13 11:09:35 +08:00
    终极解决方案,不放图片资源,返璞归真
    zsj950618
        32
    zsj950618  
       2022-10-13 11:09:59 +08:00 via Android   ❤️ 1
    开个脑洞,图片换成一帧的视频,然后用 DRM (
    liuidetmks
        33
    liuidetmks  
       2022-10-13 11:10:11 +08:00
    感觉都是无用功,采用自定义格式,自己画可能有点用
    h1104350235
        34
    h1104350235  
       2022-10-13 11:20:49 +08:00
    服务端渲染 canvs ?
    novolunt
        35
    novolunt  
       2022-10-13 11:41:18 +08:00
    使用新的图片格式,并且使用自己定制的图片解析器,解析器使用 wasm 载到网站,并存在过期时间和 url 等限制。
    这样即使图片给别人下载下来也是无法解析的格式。
    66beta
        36
    66beta  
       2022-10-13 11:42:56 +08:00
    所以,你这么做的原因是什么?
    yougg
        37
    yougg  
       2022-10-13 11:44:13 +08:00   ❤️ 12
    给你一条未曾设想的道路
    在所有图片中都打上水印(明纹 /暗纹都行)
    水印内容为: 各种 ru(华 /共 /包)词汇
    保证药到病除,谁转谁死.
    dzdh
        38
    dzdh  
       2022-10-13 11:44:49 +08:00
    blob
    图片通过 wasm 解密
    yankebupt
        39
    yankebupt  
       2022-10-13 11:50:44 +08:00
    虽然想说 F12 显原型包括 blob ,但是考虑到 OP 的问法,很可能是防盗链……
    这个,各大站包括图床都有,就那种同一个图片地址别人贴链接上来就是灰的那种……
    这种是在图片服务器端实现的,可以自己找一找...
    XiLingHost
        40
    XiLingHost  
       2022-10-13 12:22:07 +08:00
    用 websocket 传二进制,肯定能防盗链
    Ashore
        41
    Ashore  
       2022-10-13 12:22:37 +08:00
    @yougg 我怎么觉得 op 会先进去?
    superrichman
        42
    superrichman  
       2022-10-13 12:23:56 +08:00 via Android
    @runze 这个想法妙啊
    zsen
        43
    zsen  
       2022-10-13 12:37:56 +08:00
    Firefox 浏览器的 工具→页面信息→媒体,挺好用的
    yolee599
        44
    yolee599  
       2022-10-13 12:38:47 +08:00 via Android
    给用户定制硬件,比如定制平板,防拆认证要达到银行 POS 机级,检测到被拆就销毁固件,使用 4G 网络并加密通讯,用户要看的时候直接提供定制的平板。
    ZE3kr
        45
    ZE3kr  
       2022-10-13 12:40:29 +08:00
    用 DRM ,这样截图也截不到,也不需要每帧随机遮罩一部分
    ZE3kr
        46
    ZE3kr  
       2022-10-13 12:41:23 +08:00
    然后用户拿出了另一个设备拍了一张照片,所有授权全白搭。哪怕每帧随机遮罩一部分,只要曝光时间选对,拍照也可以破解
    surbomfla
        47
    surbomfla  
       2022-10-13 12:42:37 +08:00
    @yougg 杀敌一千 自损一万
    paradoxs
        48
    paradoxs  
       2022-10-13 12:43:44 +08:00
    这个需求,网页做不到, 但是 windows 客户端是可以做到的。
    lovepplforever
        49
    lovepplforever  
       2022-10-13 12:47:37 +08:00
    用 three.js
    yougg
        50
    yougg  
       2022-10-13 12:48:54 +08:00
    @surbomfla #47 不会呀, 如果站点在境外自损则忽略不计.
    guowq
        51
    guowq  
       2022-10-13 13:16:08 +08:00 via Android
    简单,加和图片一样大的水印
    sujin190
        52
    sujin190  
       2022-10-13 13:34:50 +08:00 via Android
    inert
    sujin190
        53
    sujin190  
       2022-10-13 13:38:38 +08:00 via Android
    html 有个 inert 属性,用来禁止鼠标键盘触摸屏操作的,这个也可以让图片不再出现复制链接和保存到本地的菜单
    zhuweiyou
        54
    zhuweiyou  
       2022-10-13 13:52:22 +08:00
    一楼说得对
    xiang0818
        55
    xiang0818  
       2022-10-13 13:58:06 +08:00
    防止小白很简单。但是会 F12 的就算了。
    iovekkk
        56
    iovekkk  
       2022-10-13 14:16:59 +08:00   ❤️ 2
    笑死,任你百般花样
    我直接 alt+A 微信截图
    wu00
        57
    wu00  
       2022-10-13 14:36:00 +08:00
    高亮狂闪,把用户眼睛闪瞎
    milkmlik
        58
    milkmlik  
       2022-10-13 14:48:08 +08:00
    给图片上个专利吧。发现盗用,律师函警告。
    kasusa
        59
    kasusa  
       2022-10-13 14:50:14 +08:00
    是为了防止用户把你当成图床吗?
    保护图片的话 没用啊 用户可以截图的。
    liangyun
        60
    liangyun  
       2022-10-13 14:55:17 +08:00
    图片访问时验证 cookie
    li02
        61
    li02  
       2022-10-13 15:20:09 +08:00 via Android
    webp 就可以了吧
    YUCOAT
        62
    YUCOAT  
       2022-10-13 15:28:33 +08:00
    不考虑截屏这种情况,

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

    至于图片的源数据就用 websocket 之类的东西传。
    mokiki
        63
    mokiki  
       2022-10-13 15:29:27 +08:00 via Android
    @yougg 大家好,我是❌🐔
    xytest
        64
    xytest  
       2022-10-13 15:42:36 +08:00
    弄个大点的水印吧,没啥好的解决方案
    Rsplwe
        65
    Rsplwe  
       2022-10-13 15:47:33 +08:00
    @krapnik #27 我觉得这不是加密吧,就是正常的模型纹理。
    vsean
        66
    vsean  
       2022-10-13 15:55:08 +08:00
    图片全部用 base64 ?
    a90120411
        67
    a90120411  
       2022-10-13 15:56:44 +08:00
    @runze #30 没明白这个实现逻辑,请教补充说明一下关键点?
    timedivision
        68
    timedivision  
       2022-10-13 16:02:47 +08:00
    防盗链啥的也没用,只要你的图片能显示出来,写个脚本根据图片坐标及大小进行截图,一样能搞下来
    Ne
        69
    Ne  
       2022-10-13 16:04:41 +08:00 via Android
    你 copy 回来,让别人看,又不让别人 copy 。

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

    如果不是原创,浪费时间。
    runze
        70
    runze  
       2022-10-13 16:32:43 +08:00
    @a90120411 #67
    你的图片通过加密 /切分传输,在前端合成,然后画到 canvas 上,这样可以防止简单的 f12 或者右键另存为。

    同时每帧随机用水印或者遮罩盖住一部分,由于视觉暂留现象,浏览者看到的还是完整的图片,但是截图得到的就是不完整的。
    systemcall
        71
    systemcall  
       2022-10-13 16:34:52 +08:00
    图片加密、加鉴权
    用 js 解密之后,用 blob
    时不时喂给用户一些带盲水印的图,来通过泄露出来的图片追踪用户
    很多漫画网站是这么做的
    systemcall
        72
    systemcall  
       2022-10-13 16:39:17 +08:00   ❤️ 1
    @tool2d #19
    要防止用户截屏,可以考虑上 DRM ,用 Widevine 之类的技术,不过对用户的浏览器有要求,国外比较容易覆盖大部分用户但是国内还是不怎么行
    移动端的 App ,软件倒是可以感知截屏。截屏得多了,服务器那边传别的图片就可以了,比如某个盗版漫画网站在检测到非官方客户端或者非法操作的时候,会把剩下的图片全变成鬼图,并且是不一样的
    q409195961
        73
    q409195961  
       2022-10-13 16:50:14 +08:00
    淘宝天猫,详情没禁止,可直接复制

    京东,详情用 div ,然后图片放在 background-image 里
    qwertyzzz
        74
    qwertyzzz  
       2022-10-13 16:54:38 +08:00
    @iovekkk 我用手机拍(狗头
    Eytoyes
        75
    Eytoyes  
       2022-10-13 17:17:23 +08:00
    采集卡可破,甚至可以无视 hdcp
    d7101120120
        76
    d7101120120  
       2022-10-13 17:23:09 +08:00
    如果你的图片价值很大,最好的办法就是加上用户水印并且只开放给特定用户。

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

    这本身就是数据价值与获取成本的博弈,只有你允许对方看到,就没有绝对的办法阻止对方获取。
    cjpjxjx
        77
    cjpjxjx  
       2022-10-13 17:31:40 +08:00
    把图片打印出来,寄给用户
    abc0123xyz
        78
    abc0123xyz  
       2022-10-13 17:50:55 +08:00
    把用户鼠标键盘没收了
    webshe11
        79
    webshe11  
       2022-10-13 17:54:42 +08:00 via Android
    网站改 APP ,互联网信息孤岛+1
    bthulu
        80
    bthulu  
       2022-10-13 18:00:50 +08:00
    @systemcall 有办法防止用户在虚拟机里打开页面, 在虚拟机外截屏, 或者直接用手机拍照吗?
    webcape233
        81
    webcape233  
       2022-10-13 18:03:27 +08:00 via iPhone
    直接打印 pdf 截图
    Cat7373
        82
    Cat7373  
       2022-10-13 18:09:13 +08:00
    canvas ,传输层自定义协议,不要直接用公共图片格式
    tool2d
        83
    tool2d  
       2022-10-13 18:15:08 +08:00
    @systemcall "移动端的 App ,软件倒是可以感知截屏。截屏得多了,服务器那边传别的图片就可以了"

    感知不到的,现在手机都是投屏协作,把屏幕投到电脑上自动化截图,APP 怎么感知?
    xupefei
        84
    xupefei  
       2022-10-13 18:35:31 +08:00 via iPhone
    DRM 能解决所有问题😀
    systemcall
        85
    systemcall  
       2022-10-13 18:57:12 +08:00 via Android
    @tool2d #83
    安卓这边,displaymanager 可以获取显示设备,可以设置 flag_secure 来禁止常规的截图。海外市场可以直接上 widevine ,截屏和投屏的内容是黑的
    iOS 这边似乎不能限制截图,但是可以捕获截图的事件,投屏的行为也可以感知。安卓不知道怎么感知投屏,但是可以检测是否开启了 adb
    systemcall
        86
    systemcall  
       2022-10-13 18:58:54 +08:00 via Android
    @bthulu #80
    手机拍照不能防
    但是 widevine 你用过就知道,除了直接拍照以外,都可以防
    再加上阅读速度的限制,基本上可以防住那种大量搬运的
    gstqc
        87
    gstqc  
       2022-10-13 19:05:39 +08:00
    @yougg 这个想法非常可刑
    think2011
        88
    think2011  
       2022-10-13 19:19:33 +08:00
    canvas 、视频上面都说了,说一个可以用 box-shadows 直接画
    lanlanye
        89
    lanlanye  
       2022-10-13 19:24:25 +08:00
    在你的静态文件服务器 /CDN 设置验证 Referer 即可防止别人在其他地方引用你的图片地址,防复制属实没有意义
    cheese
        90
    cheese  
       2022-10-13 20:39:30 +08:00
    canvas
    goodboysisme
        91
    goodboysisme  
       2022-10-13 20:46:37 +08:00
    去看一下脉脉的 web 端
    pennai
        92
    pennai  
       2022-10-13 20:48:51 +08:00
    😉在图片上打马赛克,就没人想复制了
    sorsens
        94
    sorsens  
       2022-10-13 21:25:56 +08:00
    我直接截图
    WebKit
        95
    WebKit  
       2022-10-13 21:30:10 +08:00 via Android
    用户截图怎么报?
    signalas1
        96
    signalas1  
       2022-10-13 21:56:40 +08:00
    加水印 降画质
    zyronon
        97
    zyronon  
       2022-10-13 22:45:36 +08:00
    @wolfie #2 思路惊奇...
    a90120411
        98
    a90120411  
       2022-10-13 23:39:32 +08:00
    @runze #70 感谢回复,我主要是不理解您说的 “ 每帧图片遮罩盖住一部分,截图得到的就是不完整的 ”。 用 canvas 怎么实现的呢?
    Jirajine
        99
    Jirajine  
       2022-10-14 04:50:03 +08:00
    如果是防用户保存,直接截图就行,没意义。
    如果是防盗链当图床,那在服务端处理鉴权,或者以非常规格式和协议提供服务。
    禁右键禁拖拽的,可以直接 f12 ;禁 f12 更掩耳盗铃,直接浏览器菜单里打开 dev tools 。至于 blob 和 canvas 之类的,f12 直接看网络请求不就完了。
    dangyuluo
        100
    dangyuluo  
       2022-10-14 08:19:34 +08:00
    直接系统截图呢
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2452 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 15:54 · PVG 23:54 · LAX 08:54 · JFK 11:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.