V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
131
V2EX  ›  JavaScript

PageGuard.js 防复制 + 检测开发者工具

  •  1
     
  •   131 · 2018-05-04 18:39:13 +08:00 via Android · 8611 次点击
    这是一个创建于 2155 天前的主题,其中的信息可能已经有所发展或是发生改变。

    防复制就不多说了,整合了一下 JS 和 CSS 防复制的方法,应该还是比较全的

    检测开发者工具的话,整合了各种较新的方法,经测试是支持 Chrome (包括单独窗口打开的情况)和 Firefox (在单独窗口打开时,只有打开控制台时才能检测到),其他浏览器还没有测试,不过估计 chromium 内核的浏览器也都是支持的

    最后放个链接求 star: https://github.com/Netrvin/PageGuard.js

    第 1 条附言  ·  2018-05-05 13:01:41 +08:00
    已修复 IE 10 及以下无法正常运行的 bug
    已修复 Edge 中误判的 bug
    感谢 @geelaw 的反馈
    第 2 条附言  ·  2018-05-05 22:11:42 +08:00
    已修复能被部分插件破解的 bug (可能以后还会被破解。。。)
    已添加 API : 允许复制(对应禁止复制)

    感谢 @Mysdes 的反馈
    80 条回复    2018-06-28 13:23:44 +08:00
    golmic
        1
    golmic  
       2018-05-04 18:41:48 +08:00 via Android   ❤️ 3
    有啥意义。。
    x86
        2
    x86  
       2018-05-04 18:45:19 +08:00
    view-source: url
    tyrealgray
        3
    tyrealgray  
       2018-05-04 18:47:47 +08:00
    打开调试在 Sources 里依然能看到 example.html
    oonnnoo
        4
    oonnnoo  
       2018-05-04 19:00:15 +08:00 via Android
    wget,curl 下载下来
    Greatshu
        5
    Greatshu  
       2018-05-04 19:05:37 +08:00
    wireshark
    ccqy66
        6
    ccqy66  
       2018-05-04 19:15:56 +08:00
    本质上浏览器上能看到的内容是 http 响应的渲染。只要拿到 http 响应。什么技术都没有用。
    xavier007
        7
    xavier007  
       2018-05-04 19:16:57 +08:00
    防小白,禁止复制就够了,对于程序员,还是知道如何开启开发者工具,另外禁止了 JS,也就不起作用了
    131
        8
    131  
    OP
       2018-05-04 19:35:14 +08:00 via Android
    @xavier007 毕竟看网上的“防复制教程”里面有用开发者工具的,而且国内很多浏览器内核都是 chromium 的,所以一定程度上也能防范
    131
        9
    131  
    OP
       2018-05-04 19:38:09 +08:00 via Android
    @oonnnoo 建议是让网页在 javascript 被禁用时无法正常显示;动态获取 /生成网页内容,一定程度上给分析源码添堵
    131
        10
    131  
    OP
       2018-05-04 19:39:44 +08:00 via Android
    @golmic 在一些应用场景中还是有用的,而且一些特殊场景更可以限制你必须用 chrome,还可以一发现你用开发者工具就封号
    autoxbc
        11
    autoxbc  
       2018-05-04 20:03:22 +08:00 via iPhone   ❤️ 16
    你加班写个防复制,他加班给破掉了,码农互相伤害,何苦呢
    billlee
        12
    billlee  
       2018-05-04 20:08:56 +08:00
    然后我点了一下「剪藏到印象笔记」
    honeycomb
        13
    honeycomb  
       2018-05-04 20:15:08 +08:00 via Android
    @131 这种东西肯定给破掉的
    gzlock
        14
    gzlock  
       2018-05-04 20:19:47 +08:00 via Android
    整页截图再 ocr 了解一下?
    131
        15
    131  
    OP
       2018-05-04 20:20:55 +08:00 via Android
    @autoxbc 其实主要就是整合了一下这些方法,省得找零碎的东西了;另外,这些东西不都是为了增加破解成本吗,成本上去了,自然愿意花时间的人就少了
    131
        16
    131  
    OP
       2018-05-04 20:21:03 +08:00 via Android
    @billlee 23333
    131
        17
    131  
    OP
       2018-05-04 20:22:16 +08:00 via Android
    @gzlock 花式字体了解一下(

    其实就只是整合一下这些方法,对程序猿的效果都不大的
    schema
        18
    schema  
       2018-05-04 20:58:54 +08:00 via Android
    各取所需嘛,支持下开源项目
    Ellison
        19
    Ellison  
       2018-05-04 21:01:42 +08:00
    还不如把内容做好点
    geelaw
        20
    geelaw  
       2018-05-04 21:09:02 +08:00   ❤️ 3
    感觉不是很有意义 - - 而且在 Edge 上会无条件执行 handler。

    使用 toString 方法检测是一个很糟糕的事情—— toString is supposed to be side-effect free。
    131
        21
    131  
    OP
       2018-05-04 21:11:02 +08:00 via Android
    @geelaw 嗯,这个方法确实是有不少限制和弊端,只是没啥更好的方法,有空我加一下判断 agent
    afpro
        22
    afpro  
       2018-05-04 21:13:01 +08:00
    防复制还是有意义的 防开发者工具就很鸡肋了 这类玩意一般都是做成油猴之类的给 PM 和运营做 量大就 headless chrome 不会有程序猿自己开开发者工具复制你的内容的
    opengps
        23
    opengps  
       2018-05-04 21:24:02 +08:00 via Android
    先打开 f12,然后输入网址
    131
        24
    131  
    OP
       2018-05-04 22:03:42 +08:00 via Android
    @opengps 无效的,它不是防止你打开开发者工具,而是判断
    131
        25
    131  
    OP
       2018-05-04 22:05:12 +08:00 via Android
    @afpro 嘛,主要是之前网上查到的“防复制教程”里面有利用 console 的,所以就处理了一下
    ledzep2
        26
    ledzep2  
       2018-05-04 22:56:44 +08:00
    既然是开发者, 这点小障碍肯定是越得过的拉
    131
        27
    131  
    OP
       2018-05-04 23:03:57 +08:00 via Android
    @ledzep2 嗯,毕竟都是人才,但大部分其他的人还是不会的
    letitbesqzr
        28
    letitbesqzr  
       2018-05-04 23:30:13 +08:00   ❤️ 1
    最近我们这面也有个需求,要收集一下具体哪些用户在我们的网页打开过控制台。

    我们的做法是利用 sourceMapping,在网站上引入一个通过程序生成的 js,最后加上 souceMapping 的路径,路径和当前登录的用户有关联,监听这个地址,就能够知道是谁打开了。我测试过,只要一打开 chrome 控制台就会去加载 sourceMapping。虽然这东西在控制台里面可以禁止,但是默认都是开启的。没有必要去防御,毕竟都是丢给用户的游览器上执行的了,几乎没有什么是扰不过的。
    chinvo
        29
    chinvo  
       2018-05-04 23:39:17 +08:00
    学 ReCAPTCHA 搞个 bytecode vm

    WebSockets + WebRTC 下发 bytecode 并且检查中间人攻击的可能性

    执行 bytecode 得到客户端解密逻辑和密钥
    chinvo
        30
    chinvo  
       2018-05-04 23:40:38 +08:00
    刚刚不小心按了 command + enter orz

    WebSockets 下发分段密文和 IV

    用 bytecode 里面的逻辑解密

    bytecode 渲染内容到 canvas

    完美 👍
    131
        31
    131  
    OP
       2018-05-05 00:02:42 +08:00 via Android
    @letitbesqzr 感想提供思路
    131
        32
    131  
    OP
       2018-05-05 00:06:25 +08:00 via Android
    @chinvo 666
    misaka19000
        33
    misaka19000  
       2018-05-05 00:21:45 +08:00
    131
        34
    131  
    OP
       2018-05-05 00:24:38 +08:00 via Android   ❤️ 1
    @misaka19000 这只是一个测试界面,用于演示防复制和检测开发者工具的功能

    在生产环境中,建议让页面动态生成以在一定程度上防止分析源码
    azh7138m
        35
    azh7138m  
       2018-05-05 01:03:57 +08:00 via Android
    移动端有阅读模式,chrome+Firefox 都有
    binux
        36
    binux  
       2018-05-05 01:12:23 +08:00
    挺好的,我有一个 headless 浏览器,https://github.com/sindresorhus/devtools-detect 检测不到,你的可以
    131
        37
    131  
    OP
       2018-05-05 01:14:23 +08:00 via Android
    @binux 谢谢支持
    131
        38
    131  
    OP
       2018-05-05 01:16:48 +08:00 via Android
    @azh7138m 那个测试页面比较单调(简陋),所以阅读模式能够较好的工作。正常的页面有一大堆其它的文本和样式,所以阅读模式的效果是没那么好的(而且可以人工插一堆看不见的字符来混淆之类的)
    noe132
        39
    noe132  
       2018-05-05 02:30:29 +08:00   ❤️ 1
    防复制我只服那个动态生成随机字体的
    xqin
        40
    xqin  
       2018-05-05 10:51:22 +08:00
    用 fiddler 把加载的这个 js 指向 404, 万事大吉.
    131
        41
    131  
    OP
       2018-05-05 11:18:44 +08:00 via Android
    @xqin 2333,毕竟不是用来防程序猿的(也很难防住嘛)
    mlhorizon
        42
    mlhorizon  
       2018-05-05 11:25:59 +08:00

    Tampermonkey 脚本打个勾就破了,楼主继续加油。
    131
        43
    131  
    OP
       2018-05-05 12:08:41 +08:00 via Android
    @mlhorizon 多谢反馈,我试试能不能检测出被破解
    131
        44
    131  
    OP
       2018-05-05 12:59:45 +08:00
    @mlhorizon 我这里测试无法复现,请再试一下;有可能是因为 10 秒钟到了之后,网页自动解除的限制,这是为了展示解除限制的功能
    nosay
        45
    nosay  
       2018-05-05 14:21:06 +08:00
    突然想起年少时,追书时候的那些手打天团...

    所以,只要你敢公开,只要有价值,哪怕非程序员,也会通过简单粗暴的方式拿到他想要的,23333
    131
        46
    131  
    OP
       2018-05-05 14:42:51 +08:00 via Android
    @nosay 2333,感谢他们为文学事业做出的“贡献”(
    Mysdes
        47
    Mysdes  
       2018-05-05 15:13:06 +08:00   ❤️ 1
    Chrome 上的 Allow Copy 插件

    AX5N
        48
    AX5N  
       2018-05-05 15:28:11 +08:00
    这么做有什么意义吗?复制不来的都是普通人,如果连普通人都利用不了你网站的东西,你网站还存在什么价值吗?
    icy37785
        49
    icy37785  
       2018-05-05 15:33:37 +08:00 via iPhone
    @AX5N #48 有意义呀,这个轮子很多场景下面是很有用的(至少在我部分项目下有用)。每个轮子都是针对特定场景下有用的。
    qsnow6
        50
    qsnow6  
       2018-05-05 15:46:23 +08:00
    都是码农,何必伤害呢
    AX5N
        51
    AX5N  
       2018-05-05 15:48:53 +08:00
    @icy37785 那你就直接说下哪些场景很有用,我就想不出来限制普通人复制到底有什么意义。
    icy37785
        52
    icy37785  
       2018-05-05 16:02:52 +08:00 via iPhone
    @AX5N #51 你这话题我肯定不接的,上面也是也是出于这种考虑所以我只说某些场景下面有用,如果我明确跟你说明哪些场景有用,你会跟我说用 xx 工具,xx 方法一样可以,然后我需要跟你解释 xx 工具盒 xx 方法为什么在这个场景下不适用,然后很有可能针对到底 xx 方法 xx 工具适不适用成为一个没有结局的对话,但是对于适不适用这个问题,不接触特定场景是理解不了的,所以这对话必然没结果,必然没结果的话题当然是不去开始比较好。这些轮子本来就是对于接触一些场景的人来说是有用的,对于不涉及特定场景的人来说没用的,我至少跟你说对部分人有用比如我的部分项目,既然对部分人有用那么就是有意义了。不知道我这样说你能不能认同。
    131
        53
    131  
    OP
       2018-05-05 16:05:13 +08:00 via Android
    @AX5N 网站的内容并不只有被复制这一个用途,比如在线答题,就需要限制考生对网页进行复制
    131
        54
    131  
    OP
       2018-05-05 16:05:39 +08:00 via Android
    @Mysdes 多谢反馈
    PP
        55
    PP  
       2018-05-05 16:10:15 +08:00
    “许看不许摸”,这是自主权。支持楼主的想法,欢迎楼主的作品!
    UIXX
        56
    UIXX  
       2018-05-05 16:18:23 +08:00   ❤️ 1
    ...这个工具属于“不够有用”,它意味着该效果在应用场景上
    1、可以在常规用户上奏效
    2、不可以在目标用户上奏效
    3、常规用户跟目标用户并不高度重合
    举个例子,在线答题,对于一般的考生他认认真真答题,发现不能复制那没什么。这个属于常规用户使用。如果一个考生铁了心要上网查答案,那你这个工具破解的成本太低了。而恰恰后一种用户才是我们开发这个工具所要防范的群体。
    131
        57
    131  
    OP
       2018-05-05 16:27:01 +08:00 via Android
    @UIXX 嗯,确实,考生完全可以打字、语音、截屏查,还可以直接问人;所以大型正规考试基本上都是线下的(但还可能带个蓝牙耳机或者口袋里放个手机)
    131
        58
    131  
    OP
       2018-05-05 16:29:48 +08:00 via Android
    @UIXX 所以可能应用在不希望被复制的,文字多的场景更好,这样子再换个字体之类的,如果你真的有毅力手打。。。那也没辙
    codehz
        59
    codehz  
       2018-05-05 16:32:07 +08:00 via Android
    没考虑可访问性 api 直接读取网页文字的问题,建议干掉所有文字改用图片渲染
    131
        60
    131  
    OP
       2018-05-05 16:53:41 +08:00 via Android
    @codehz 对,innerText 直接就能读,不过这个 JS 里弄图片渲染还要考虑各种普适性之类的问题,所以。。。就没考虑用这个方法
    AX5N
        61
    AX5N  
       2018-05-05 16:53:59 +08:00
    @131 用防复制来防作弊,确实能算得上是一件有意义的事情。但不管怎么看,这个手段都是一个错误的方向,就像你下面所说的。

    那么,除了防止作弊以外,还有什么其他用途吗。
    131
        62
    131  
    OP
       2018-05-05 17:04:21 +08:00 via Android
    @AX5N 看个人脑洞,而且既然已经有了用途,那么它的存在就已经有了意义
    AX5N
        63
    AX5N  
       2018-05-05 17:08:45 +08:00
    @131 我想听下你的脑洞
    est
        64
    est  
       2018-05-05 17:17:43 +08:00 via Android
    66666
    zeroDev
        65
    zeroDev  
       2018-05-05 17:43:32 +08:00 via Android
    明白了,就是如何把人往死里整
    2333
    131
        66
    131  
    OP
       2018-05-05 18:18:33 +08:00
    @Mysdes 这个插件我试了,只想到了几种治标的方法。。。

    把它实现的代码贴一下: https://paste.ubuntu.com/p/DhhzkCy437/ ,大佬们看看能不能破,谢谢
    codehz
        67
    codehz  
       2018-05-05 18:18:53 +08:00 via Android
    @131 不是 innerText,是给盲人用的屏幕阅读器,不受 js 限制,只要是文本,都可以读,对付这种方法,只能靠图片了
    zhjits
        68
    zhjits  
       2018-05-05 23:45:23 +08:00 via iPhone
    之前做过一个内部项目用 Screen Reader API 复制网页文本
    在做之前还开过脑洞 hook GDI+/Direct2D API is 直接把程序画的字读出来
    131
        69
    131  
    OP
       2018-05-06 00:07:57 +08:00 via Android
    @zhjits 〈(゜。゜) 为什么,为什么?!明明我已经是一张画了,为什么你还要读我?!( x
    yankebupt
        70
    yankebupt  
       2018-05-06 00:41:05 +08:00
    然后哪天被哪个恶意的植入了挖矿脚本,防开发工具调试用的 js 就被当成病毒加的壳一起检测了,然后域名因为无法调试确认病毒责任直接入了云防毒黑名单,是不是就舒服了。
    纯脚本防屏蔽感觉做差不多就得了,真想防复制感觉像各种在线文献阅读网站似的要个 flash 或什么插件权限,别管真防假防当时吓住一大票人。
    openmynet
        71
    openmynet  
       2018-05-06 01:13:35 +08:00
    javascript:(function() {
    let html = document.documentElement.cloneNode(true);
    let jsNodes = html.querySelectorAll("script");
    jsNodes.forEach(element => {
    element.parentElement.removeChild(element);
    });
    let forceCopyWin = window.open("", "force");
    forceCopyWin.document.documentElement.innerHTML = html.innerHTML;
    })();
    openmynet
        72
    openmynet  
       2018-05-06 01:39:01 +08:00   ❤️ 1
    优化下:
    javascript: (function() {
    let html = document.documentElement.cloneNode(true);
    let jsNodes = html.querySelectorAll("script");
    jsNodes.forEach(element => {
    element.parentElement.removeChild(element);
    });
    let base = document.createElement("base");
    base.href = window.location.origin + window.location.pathname;
    html.querySelector("head").appendChild(base);
    let forceCopyWin = window.open("", "forceCopy");
    forceCopyWin.document.documentElement.innerHTML = html.innerHTML;
    })();
    131
        73
    131  
    OP
       2018-05-06 01:48:45 +08:00 via Android
    @openmynet 厉害了,大佬;我会加一个判断丢失焦点(地址栏)的事件的(
    openmynet
        74
    openmynet  
       2018-05-06 01:54:55 +08:00
    代码直接放在浏览器书签里直接点,地址栏不会出现焦点丢失。
    131
        75
    131  
    OP
       2018-05-06 02:07:09 +08:00 via Android
    @openmynet 我...我再加个判断鼠标位置
    ho121
        76
    ho121  
       2018-05-06 09:34:13 +08:00 via Android
    右键另存为?
    ho121
        77
    ho121  
       2018-05-06 09:36:17 +08:00 via Android
    防复制不如转成图片
    gelilaohuang
        78
    gelilaohuang  
       2018-05-06 15:09:25 +08:00
    131
        79
    131  
    OP
       2018-05-06 16:28:18 +08:00 via Android
    @gelilaohuang download and (rename or insert)
    Roycom
        80
    Roycom  
       2018-06-28 13:23:44 +08:00
    全站直接图片输出
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5530 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 06:38 · PVG 14:38 · LAX 23:38 · JFK 02:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.