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

有没有一种方法, js 阻止用户截图?

  •  
  •   alwayshere · 2018-09-18 15:13:24 +08:00 · 32439 次点击
    这是一个创建于 2045 天前的主题,其中的信息可能已经有所发展或是发生改变。

    网站上的图片不想让用户下载,又不想打水印影响图片美观,js 已经阻止了右键保存和拖拽,但是用户一截图又相当于保存图片了,有没有什么方法可以阻止用户截图?

    第 1 条附言  ·  2018-09-18 15:47:49 +08:00
    阻止用户对着屏幕拍照没意义,那样拍出来的照片就不是高清照片而是“枪版照片”了
    第 2 条附言  ·  2018-09-19 07:20:22 +08:00
    感谢各位的冷嘲热讽,此题正确答案出来了,#26 楼是标准答案,在#26 楼基础上,我准备后端用 imagick 把图片打乱,前端用 css sprite 拼凑,js setInterval 显示残缺的图像,时间间隔随机,但必须控制显示帧数在 24 帧以上,这样几乎可以屏蔽绝大部分用户截图了
    225 条回复    2020-08-31 09:37:28 +08:00
    1  2  3  
    h19981126g
        101
    h19981126g  
       2018-09-18 18:04:40 +08:00
    个人觉得没意思,就算你全部阻拦了,也阻拦不了抓包
    Luzifer
        102
    Luzifer  
       2018-09-18 18:10:53 +08:00
    shintendo

    #26

    战略马克
    Greatshu
        103
    Greatshu  
       2018-09-18 18:11:33 +08:00   ❤️ 6
    即使用户不懂技术,你能阻止用户在虚拟机外截图?
    huclengyue
        104
    huclengyue  
       2018-09-18 18:11:42 +08:00 via Android   ❤️ 1
    想多了,我调用浏览器外的程序截图。你能阻止?
    UnknownR
        105
    UnknownR  
       2018-09-18 18:14:57 +08:00
    真想截图的人,连视频信号采集器都能用上,你拿什么阻止
    shuax
        106
    shuax  
       2018-09-18 18:25:35 +08:00   ❤️ 4
    这需求不复杂啊,以前我们老板还让我研究怎么把公司网站放到百度首页。
    xiejinpeng007
        107
    xiejinpeng007  
       2018-09-18 18:27:07 +08:00
    不知道前端有没有这样的操作:
    开放右键另存为,但是存的时候加水印。
    lusheldon
        108
    lusheldon  
       2018-09-18 18:35:59 +08:00 via Android
    把产品名字曝出来,阻止用户就行了,没有用户自然没有用户截图
    fmumu
        109
    fmumu  
       2018-09-18 18:46:57 +08:00 via Android
    禁用 J's,f12 看下路径直接下载,怎么阻止?
    otato
        110
    otato  
       2018-09-18 18:54:04 +08:00
    233,之前做个几个潮牌,都有这需求
    penghangtech
        111
    penghangtech  
       2018-09-18 18:56:55 +08:00
    @shuax 运营的同学让技术 gg 把微信的导航栏做成透明的
    vakara
        112
    vakara  
       2018-09-18 18:56:57 +08:00 via Android
    那是不是还要阻止拍照……
    supuwoerc
        113
    supuwoerc  
       2018-09-18 18:57:56 +08:00
    这需求。。我觉得产品会和前端打起来。。
    leeolsen
        114
    leeolsen  
       2018-09-18 18:58:36 +08:00
    Netflix 的 app 里一截屏就黑屏
    lelsetsuna
        115
    lelsetsuna  
       2018-09-18 19:01:30 +08:00
    浏览器里的 Netflix 在播放视频的时候截图也会直接把内容黑掉,不知道怎么实现的。
    YUCOAT
        116
    YUCOAT  
       2018-09-18 19:02:47 +08:00   ❤️ 1
    尝试一波下面的操作:

    1、一旦网页丢失鼠标键盘的焦点之后立即隐藏图片
    2、能否监听 PrtSc 按键,一旦按下之后立即隐藏图片

    我看这个网站是能监听 PrtSc 按键的 http://www.keyboardtester.com/
    fiht
        117
    fiht  
       2018-09-18 19:12:16 +08:00
    我怕你们打起来...
    ZXCDFGTYU
        118
    ZXCDFGTYU  
       2018-09-18 19:22:47 +08:00
    还不如显示出来的图片就是低清晰度分辨率的图片,截图走了也毛线用没有
    allenhu
        119
    allenhu  
       2018-09-18 19:25:18 +08:00
    话说什么叫截屏,不是太理解,录屏软件开着算不算?建议关键部位打上马赛克,这样最安全,不然你完全无法阻止。
    expy
        120
    expy  
       2018-09-18 19:48:19 +08:00
    可以参考下视频保护那一套,DRM/HDCP/AACS。
    xcatliu
        121
    xcatliu  
       2018-09-18 19:52:32 +08:00
    屏幕录制就可以了
    Davidwg
        122
    Davidwg  
       2018-09-18 19:53:49 +08:00
    跟检测手机壳颜色的需求有异曲同工之妙
    vmebeh
        123
    vmebeh  
       2018-09-18 19:54:39 +08:00 via iPhone
    没有,

    js 再怎么也跳不出浏览器窗口吧,随便激活一个网页外的窗口,键盘鼠标随便按 js 也不会知道呀
    jimzhong
        124
    jimzhong  
       2018-09-18 20:14:50 +08:00
    没有。除非你用 DRM。但是用 DRM 也不能组织有人用特殊硬件移除 DRM。
    C2G
        125
    C2G  
       2018-09-18 20:19:50 +08:00 via Android   ❤️ 1
    @DOLLOR 我记得这种方法电影届防盗版用过,加的超声水印,不同影院不同场次不同,轻松定位盗版来源。
    不过图片不像电影,加隐形水印没法识别的吧
    boris1993
        126
    boris1993  
       2018-09-18 20:39:15 +08:00 via Android
    有没有一种方法,js 阻止用户把图画下来 /滑稽
    嘛,说正经的,感觉吧,还是打水印,和在文件的元数据里加指纹(如果有这个技术的话),更靠谱一点
    控制文件比控制用户应该简单多了吧
    AEANWspPmj3FUhDc
        127
    AEANWspPmj3FUhDc  
       2018-09-18 20:40:47 +08:00
    假设就要大胆,就假设,能用 js 阻止用户截图、抓包。

    别忘了,还有个东西叫做虚拟机。
    QNLvw5fLfr7c
        128
    QNLvw5fLfr7c  
       2018-09-18 20:48:10 +08:00 via iPhone
    培养一个强大的律师团队
    loading
        129
    loading  
       2018-09-18 20:51:15 +08:00 via iPhone
    鼠标焦点不在浏览器,全屏你能阻止?
    gaocc
        130
    gaocc  
       2018-09-18 21:05:34 +08:00
    为什么要阻止用户截图?何况截图的效果很差,美工一般都不直接截图,要不从链接里拿,要不自己写 js 脚本拿。
    CloudnuY
        131
    CloudnuY  
       2018-09-18 21:31:01 +08:00
    开个虚拟机就完事儿了,想啥呢?
    realpg
        132
    realpg  
       2018-09-18 21:38:44 +08:00
    @penghangtech #111
    曾经某老板让技术把他们家的公众号在所有人的微信里自动置顶……
    然后技术就拎刀去了……
    suyuyu
        133
    suyuyu  
       2018-09-18 21:41:24 +08:00
    我自己的电脑 你怎么阻止
    Gua
        134
    Gua  
       2018-09-18 21:42:33 +08:00
    醉了 手机拍照 怎么阻止
    zoffy
        135
    zoffy  
       2018-09-18 22:15:08 +08:00
    我想阻止地球自转
    mingyun
        136
    mingyun  
       2018-09-18 22:54:34 +08:00
    产品脑回路可以的
    liuguang
        137
    liuguang  
       2018-09-18 22:57:00 +08:00
    网页是突破不了沙箱的,哈哈,我用 QQ 截图,你这个网页难道还能跑出来打我?哈哈哈哈哈哈哈哈
    VgV
        138
    VgV  
       2018-09-18 23:25:02 +08:00
    楼主别闹。。。。
    kersbal
        139
    kersbal  
       2018-09-18 23:30:12 +08:00
    哈哈可以定制一个低端平板,把接口全去掉,搞个内置防火墙只能连你们公司的 ip,除了定制的浏览器其他功能一概没有,usb 只有充电功能,然后给用户一人发一个大家来看图
    Mavious
        140
    Mavious  
       2018-09-18 23:32:14 +08:00
    最烦你们这种在 js 里阻止复制的人了,复制几个文字还得把 js 暂时屏蔽掉。
    qiuqiuer
        141
    qiuqiuer  
       2018-09-18 23:34:20 +08:00 via Android
    你干脆用 js 阻止用户用电脑吧
    qiuqiuer
        142
    qiuqiuer  
       2018-09-18 23:36:32 +08:00 via Android
    @opengps 感觉还是上次那个手机壳随 app 变色的傻产品经理的粉儿提出的
    alvin2ye
        143
    alvin2ye  
       2018-09-18 23:37:17 +08:00   ❤️ 2
    用 JS 驱动摄像头, 识别到有人拿相机就退出.
    beastk
        144
    beastk  
       2018-09-18 23:38:30 +08:00 via iPhone
    图片设置具有阅后遗忘功能吧
    moposx
        145
    moposx  
       2018-09-18 23:38:57 +08:00 via Android
    阻止用户复制文本什么的都能用油猴脚本解决....
    这个 js 我认为是做不到的,除非你从 OS 层面阻止
    fyyz
        146
    fyyz  
       2018-09-18 23:41:14 +08:00 via Android
    我先开 OBS,然后开虚拟机,然后虚拟机里开浏览器,你怎么拦截?
    POPOEVER
        147
    POPOEVER  
       2018-09-19 02:29:46 +08:00 via Android
    @HeyWeGo media query
    bestkayle
        148
    bestkayle  
       2018-09-19 07:47:42 +08:00 via iPhone
    @mokeyjay #17 录屏咋办……
    IvanLi127
        149
    IvanLi127  
       2018-09-19 08:08:49 +08:00 via Android
    @sanggao js 弄出的图片 禁了就别看了。
    guanhui07
        150
    guanhui07  
       2018-09-19 08:10:49 +08:00
    那是不是还要阻止拿手机拍照 录视频……
    SimbaPeng
        151
    SimbaPeng  
       2018-09-19 08:13:04 +08:00
    牛逼也吹完了,方案也有了,楼主记得做好了,发出来让大家看看
    qilishasha
        152
    qilishasha  
       2018-09-19 08:15:15 +08:00
    完全可以实现,设定一个透明层,鼠标必须有响应、并且 insert 键必须常按,才能看到图片。一但检测不到条件,引爆…… BOOM
    skinny
        153
    skinny  
       2018-09-19 08:17:35 +08:00
    C 都没办法,凭什么你认为 JS 可以?
    MOONYANYI
        154
    MOONYANYI  
       2018-09-19 08:32:49 +08:00 via Android
    参考一下,支付宝和微信两者的收款码不允许截图,但只只应用 Android,因为是调起手机内置功能
    yinzhili
        155
    yinzhili  
       2018-09-19 09:07:34 +08:00
    把网站彻底关闭,从根本上解决所有问题
    lcdxiangzi
        156
    lcdxiangzi  
       2018-09-19 09:07:51 +08:00
    我觉得有两个帖子有意思,26 楼的思路确实可以试一下,然后 103 楼提到用虚拟机操作,虚拟机操作可以规避高频随机拼接图片不完整的问题吗?
    不是很懂诶
    9ki
        157
    9ki  
       2018-09-19 09:14:19 +08:00
    ..比较好奇楼主最后能实现到哪种程度,期待结果
    Felldeadbird
        158
    Felldeadbird  
       2018-09-19 09:19:52 +08:00
    之前不是有一个做法,JS 去获取后端一部分输出的区域图? 要看全图就的买。。?
    LeeSeoung
        159
    LeeSeoung  
       2018-09-19 09:20:21 +08:00
    要是人家直接抓你图片的包 自己拼出来呢?
    ashes1122
        160
    ashes1122  
       2018-09-19 09:20:35 +08:00
    @alwayshere 既然图片是拼凑出来的,那如果有人再另外做出拼凑的功能把图片获取到呢?
    crab
        161
    crab  
       2018-09-19 09:21:38 +08:00
    残缺 拼凑 不就是现在的滑动图片验证码形式吗?
    Neoth
        162
    Neoth  
       2018-09-19 09:22:35 +08:00
    你们讲那么热闹,怎么没人发一个 demo 网站,让大家去截图试试呢???
    cstj0505
        163
    cstj0505  
       2018-09-19 09:25:36 +08:00
    @shuax 请问下,怎么破解 qq 空间黑名单和密码
    jydeng
        164
    jydeng  
       2018-09-19 09:26:59 +08:00   ❤️ 1
    #26 的想法点意思,楼主做好了可以放个 demo 学习一下吗
    irisfor
        165
    irisfor  
       2018-09-19 09:35:19 +08:00
    残缺的部分用什么替代……就网页背景色吗,感觉频闪肉眼可见吧
    shilyx
        166
    shilyx  
       2018-09-19 09:39:50 +08:00   ❤️ 1
    残影法试过,失败了

    当时是一篇文章,没三个字符中同一时间只显示两个,屏幕闪得不行,遂放弃
    phpcxy
        167
    phpcxy  
       2018-09-19 09:44:38 +08:00
    残影法会不会人家以为你在挖矿啊。。。
    lneoi
        168
    lneoi  
       2018-09-19 09:45:53 +08:00
    能得到完整的图片碎片,再加上是在前端用 js 拼凑的。那能直接翻 js 然后拼出完整的图片吧
    scriptB0y
        169
    scriptB0y  
       2018-09-19 09:45:56 +08:00
    Netflix 的任何版本(包括 IOS )都截不了图,看电影是能看,已截图就是黑的,只有字幕,不知道咋做到的,感觉很牛逼
    li02
        170
    li02  
       2018-09-19 09:58:53 +08:00
    @scriptB0y 录屏在截图行吗?有 WEB 版吗?
    greatghoul
        171
    greatghoul  
       2018-09-19 10:00:32 +08:00
    chrome devtools
    NaiveSimpleYoung
        172
    NaiveSimpleYoung  
       2018-09-19 10:06:31 +08:00
    随机显示碎片还是可以录屏后提取 24 帧然后拼凑,考虑下如何增加拼凑难度 hhhh
    xxdd
        173
    xxdd  
       2018-09-19 10:10:36 +08:00
    什么鬼需求 我手机拍照好了伐
    laoyuan
        174
    laoyuan  
       2018-09-19 10:10:57 +08:00   ❤️ 1
    我感觉 26 楼不可行,图片的正常部分有残影,残缺部分也有残影啊,结果就是糊在一起了
    seassin
        175
    seassin  
       2018-09-19 10:19:57 +08:00
    v2ex 戾气那么重的地方楼猪还能分享想法,佩服。

    如果只有一张图片的话,是否能把 setInterval 换成 window.requestAnimationFrame 呢?这样能把图片打得更碎,同时帧率更高?
    laoyuan
        176
    laoyuan  
       2018-09-19 10:25:42 +08:00
    我提供一个思路,一个像素按 RGB 分成 3 种颜色,这个像素点快速高频随机切换这 3 种颜色,是否可以呈现出原色?
    简化一下的话,比如把图片切成 32 块,每块按 RGB 分成 3 种颜色,全都高频闪动,也许可行吧
    openbsd
        177
    openbsd  
       2018-09-19 10:40:29 +08:00
    不好意思,我就是那个在设计公司传授 图形加载完后快捷键关闭浏览器的 JS 功能,然后另存 /截图,从未失手的人
    PERFECTCN
        178
    PERFECTCN  
       2018-09-19 10:42:57 +08:00
    @laoyuan 同意

    我这里测试下来, 不行.

    闪的很严重
    laoyuan
        179
    laoyuan  
       2018-09-19 11:08:01 +08:00
    @PERFECTCN 我也忍不住测试了,`setInterval( )` millisec=1 也不灵,刷不到足够高的频率,我感觉也就是一秒 10 帧的样子吧。用 Flash 能刷到更高?
    rogerlee
        180
    rogerlee  
       2018-09-19 11:17:12 +08:00
    @shintendo HDR 可破?
    thesunfei
        181
    thesunfei  
       2018-09-19 11:18:27 +08:00
    加个 CSS,页面默认全透明,只有鼠标浮动上去才变不透明。截图时浏览器是检测不到鼠标浮动的。
    Admstor
        182
    Admstor  
       2018-09-19 11:20:38 +08:00
    JS 刷新怎么可能有那么高的性能
    别忘记 JS 也是基于浏览器性能的
    konakona
        183
    konakona  
       2018-09-19 11:26:56 +08:00
    人家用相机你咋班?
    laoyuan
        184
    laoyuan  
       2018-09-19 11:31:30 +08:00
    @thesunfei 那我就鼠标移动到一角
    w3sy
        185
    w3sy  
       2018-09-19 11:32:31 +08:00
    @seassin 来个 demo 试试,只是想想谁都能吧
    BinRelay
        186
    BinRelay  
       2018-09-19 11:38:34 +08:00
    @openbsd chrome 有这个快捷键么 ?还是要手动配?
    j
        187
    j  
       2018-09-19 11:47:10 +08:00
    看来除非用小号来提问网站的名字
    是不会有人想知道这是啥网站了
    略悲哀呢
    openbsd
        188
    openbsd  
       2018-09-19 11:57:34 +08:00
    @BinRelay #186
    Chrome 应该需要手动配置,而且可能无法越过一些网站的设置(设置后需要刷新才对当前页生效),网站检测 JS 关闭后会拒绝加载。 当时是在设计公司,MAC 系统 Safari 设置关闭 JS 后不刷新就可以对当前页生效,手动设置快捷键后拿图非常舒服.....
    tabris17
        189
    tabris17  
       2018-09-19 12:04:26 +08:00
    @scriptB0y ios 不知道,windows 使用 directx 输出图像,print screen 截不到,不过可以通过其他软件截图
    chaim
        190
    chaim  
       2018-09-19 12:40:17 +08:00
    自己开发软硬件和协议
    ICU
        191
    ICU  
       2018-09-19 12:53:44 +08:00
    楼主做好后,一定要给个链接 让我学习一下😏
    xmsz
        192
    xmsz  
       2018-09-19 13:53:40 +08:00
    真的控制不住也要嘲讽一下 哈哈哈哈
    我不知道这是哪来的想法
    又是哪来觉得 js 可以做得到

    很有意思,特别是居然还发出来,让大家看笑话 哈哈哈哈
    duan602728596
        193
    duan602728596  
       2018-09-19 13:59:33 +08:00 via iPhone
    求求你们,放过 js 和浏览器吧
    rebeccaMyKid
        194
    rebeccaMyKid  
       2018-09-19 14:12:34 +08:00
    @jydeng 怎么这么多嘲讽的,我也想看 demo。
    DANG
        195
    DANG  
       2018-09-19 14:12:53 +08:00
    还可以屏蔽掉大量网速差的用户,还可以把一部分机能差的用户闪瞎
    shilyx
        196
    shilyx  
       2018-09-19 14:13:37 +08:00
    @laoyuan 颜色都变了,估计会大花脸
    dallaslu
        197
    dallaslu  
       2018-09-19 14:45:53 +08:00   ❤️ 3
    Immortal
        198
    Immortal  
       2018-09-19 14:49:15 +08:00
    楼主说的方法在大批量图片同时显示的时候 如何保证 cpu 不给吃炸了
    mytry
        199
    mytry  
       2018-09-19 14:51:04 +08:00   ❤️ 1
    @alwayshere 视觉残缺之前在验证码上试过,非常明显。如果用在观赏性场合的话,体验会非常差。

    事实上,像这种场合并不需要残缺,只需对图片进行局部动态调整也可以。例如通过 canvas 把某个随机区域的色调进行少量调整。或者加一些渐隐渐现、位置随机的水印特效也可以。这样任何时候截的图都不是原图,并且对视觉干扰不大。
    RRRoger
        200
    RRRoger  
       2018-09-19 15:16:01 +08:00
    @shintendo #26 神了
    1  2  3  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3493 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 10:54 · PVG 18:54 · LAX 03:54 · JFK 06:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.