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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2413 天前的主题，其中的信息可能已经有所发展或是发生改变。

防复制就不多说了，整合了一下 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

2018-05-04 18:41:48 +08:00 via Android

有啥意义。。

x86

2018-05-04 18:45:19 +08:00

view-source: url

tyrealgray

2018-05-04 18:47:47 +08:00

打开调试在 Sources 里依然能看到 example.html

oonnnoo

2018-05-04 19:00:15 +08:00 via Android

wget，curl 下载下来

Greatshu

2018-05-04 19:05:37 +08:00

wireshark

ccqy66

2018-05-04 19:15:56 +08:00

本质上浏览器上能看到的内容是 http 响应的渲染。只要拿到 http 响应。什么技术都没有用。

xavier007

2018-05-04 19:16:57 +08:00

防小白，禁止复制就够了，对于程序员，还是知道如何开启开发者工具，另外禁止了 JS，也就不起作用了

131

2018-05-04 19:35:14 +08:00 via Android

@xavier007 毕竟看网上的“防复制教程”里面有用开发者工具的，而且国内很多浏览器内核都是 chromium 的，所以一定程度上也能防范

131

2018-05-04 19:38:09 +08:00 via Android

@oonnnoo 建议是让网页在 javascript 被禁用时无法正常显示；动态获取 /生成网页内容，一定程度上给分析源码添堵

131

2018-05-04 19:39:44 +08:00 via Android

@golmic 在一些应用场景中还是有用的，而且一些特殊场景更可以限制你必须用 chrome，还可以一发现你用开发者工具就封号

autoxbc

2018-05-04 20:03:22 +08:00 via iPhone

你加班写个防复制，他加班给破掉了，码农互相伤害，何苦呢

billlee

2018-05-04 20:08:56 +08:00

然后我点了一下「剪藏到印象笔记」

honeycomb

2018-05-04 20:15:08 +08:00 via Android

@131 这种东西肯定给破掉的

gzlock

2018-05-04 20:19:47 +08:00 via Android

整页截图再 ocr 了解一下？

131

2018-05-04 20:20:55 +08:00 via Android

@autoxbc 其实主要就是整合了一下这些方法，省得找零碎的东西了；另外，这些东西不都是为了增加破解成本吗，成本上去了，自然愿意花时间的人就少了

131

2018-05-04 20:21:03 +08:00 via Android

@billlee 23333

131

2018-05-04 20:22:16 +08:00 via Android

@gzlock 花式字体了解一下（

其实就只是整合一下这些方法，对程序猿的效果都不大的

schema

2018-05-04 20:58:54 +08:00 via Android

各取所需嘛，支持下开源项目

Ellison

2018-05-04 21:01:42 +08:00

还不如把内容做好点

geelaw

2018-05-04 21:09:02 +08:00

感觉不是很有意义 - - 而且在 Edge 上会无条件执行 handler。

使用 toString 方法检测是一个很糟糕的事情—— toString is supposed to be side-effect free。

131

2018-05-04 21:11:02 +08:00 via Android

@geelaw 嗯，这个方法确实是有不少限制和弊端，只是没啥更好的方法，有空我加一下判断 agent

afpro

2018-05-04 21:13:01 +08:00

防复制还是有意义的防开发者工具就很鸡肋了这类玩意一般都是做成油猴之类的给 PM 和运营做量大就 headless chrome 不会有程序猿自己开开发者工具复制你的内容的

opengps

2018-05-04 21:24:02 +08:00 via Android

先打开 f12,然后输入网址

131

2018-05-04 22:03:42 +08:00 via Android

@opengps 无效的，它不是防止你打开开发者工具，而是判断

131

2018-05-04 22:05:12 +08:00 via Android

@afpro 嘛，主要是之前网上查到的“防复制教程”里面有利用 console 的，所以就处理了一下

ledzep2

2018-05-04 22:56:44 +08:00

既然是开发者, 这点小障碍肯定是越得过的拉

131

2018-05-04 23:03:57 +08:00 via Android

@ledzep2 嗯，毕竟都是人才，但大部分其他的人还是不会的

letitbesqzr

2018-05-04 23:30:13 +08:00

最近我们这面也有个需求，要收集一下具体哪些用户在我们的网页打开过控制台。

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

chinvo

2018-05-04 23:39:17 +08:00

学 ReCAPTCHA 搞个 bytecode vm

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

执行 bytecode 得到客户端解密逻辑和密钥

chinvo

2018-05-04 23:40:38 +08:00

刚刚不小心按了 command + enter orz

WebSockets 下发分段密文和 IV

用 bytecode 里面的逻辑解密

bytecode 渲染内容到 canvas

完美 👍

131

2018-05-05 00:02:42 +08:00 via Android

@letitbesqzr 感想提供思路

131

2018-05-05 00:06:25 +08:00 via Android

@chinvo 666

misaka19000

2018-05-05 00:21:45 +08:00

view-source:https://netrvin.github.io/PageGuard.js/example.html

131

2018-05-05 00:24:38 +08:00 via Android

@misaka19000 这只是一个测试界面，用于演示防复制和检测开发者工具的功能

在生产环境中，建议让页面动态生成以在一定程度上防止分析源码

azh7138m

2018-05-05 01:03:57 +08:00 via Android

移动端有阅读模式，chrome+Firefox 都有

binux

2018-05-05 01:12:23 +08:00

挺好的，我有一个 headless 浏览器，https://github.com/sindresorhus/devtools-detect 检测不到，你的可以

131

2018-05-05 01:14:23 +08:00 via Android

@binux 谢谢支持

131

2018-05-05 01:16:48 +08:00 via Android

@azh7138m 那个测试页面比较单调（简陋），所以阅读模式能够较好的工作。正常的页面有一大堆其它的文本和样式，所以阅读模式的效果是没那么好的（而且可以人工插一堆看不见的字符来混淆之类的）

noe132

2018-05-05 02:30:29 +08:00

防复制我只服那个动态生成随机字体的

xqin

2018-05-05 10:51:22 +08:00

用 fiddler 把加载的这个 js 指向 404, 万事大吉.

131

2018-05-05 11:18:44 +08:00 via Android

@xqin 2333，毕竟不是用来防程序猿的（也很难防住嘛）

mlhorizon

2018-05-05 11:25:59 +08:00

Tampermonkey 脚本打个勾就破了，楼主继续加油。

131

2018-05-05 12:08:41 +08:00 via Android

@mlhorizon 多谢反馈，我试试能不能检测出被破解

131

2018-05-05 12:59:45 +08:00

@mlhorizon 我这里测试无法复现，请再试一下；有可能是因为 10 秒钟到了之后，网页自动解除的限制，这是为了展示解除限制的功能

nosay

2018-05-05 14:21:06 +08:00

突然想起年少时，追书时候的那些手打天团...

所以，只要你敢公开，只要有价值，哪怕非程序员，也会通过简单粗暴的方式拿到他想要的,23333

131

2018-05-05 14:42:51 +08:00 via Android

@nosay 2333，感谢他们为文学事业做出的“贡献”（

Mysdes

2018-05-05 15:13:06 +08:00

Chrome 上的 Allow Copy 插件

AX5N

2018-05-05 15:28:11 +08:00

这么做有什么意义吗？复制不来的都是普通人，如果连普通人都利用不了你网站的东西，你网站还存在什么价值吗？

icy37785

2018-05-05 15:33:37 +08:00 via iPhone

@AX5N #48 有意义呀，这个轮子很多场景下面是很有用的（至少在我部分项目下有用）。每个轮子都是针对特定场景下有用的。

qsnow6

2018-05-05 15:46:23 +08:00

都是码农，何必伤害呢

AX5N

2018-05-05 15:48:53 +08:00

@icy37785 那你就直接说下哪些场景很有用，我就想不出来限制普通人复制到底有什么意义。

icy37785

2018-05-05 16:02:52 +08:00 via iPhone

@AX5N #51 你这话题我肯定不接的，上面也是也是出于这种考虑所以我只说某些场景下面有用，如果我明确跟你说明哪些场景有用，你会跟我说用 xx 工具，xx 方法一样可以，然后我需要跟你解释 xx 工具盒 xx 方法为什么在这个场景下不适用，然后很有可能针对到底 xx 方法 xx 工具适不适用成为一个没有结局的对话，但是对于适不适用这个问题，不接触特定场景是理解不了的，所以这对话必然没结果，必然没结果的话题当然是不去开始比较好。这些轮子本来就是对于接触一些场景的人来说是有用的，对于不涉及特定场景的人来说没用的，我至少跟你说对部分人有用比如我的部分项目，既然对部分人有用那么就是有意义了。不知道我这样说你能不能认同。

131

2018-05-05 16:05:13 +08:00 via Android

@AX5N 网站的内容并不只有被复制这一个用途，比如在线答题，就需要限制考生对网页进行复制

131

2018-05-05 16:05:39 +08:00 via Android

@Mysdes 多谢反馈

2018-05-05 16:10:15 +08:00

“许看不许摸”，这是自主权。支持楼主的想法，欢迎楼主的作品！

UIXX

2018-05-05 16:18:23 +08:00

...这个工具属于“不够有用”，它意味着该效果在应用场景上
1、可以在常规用户上奏效
2、不可以在目标用户上奏效
3、常规用户跟目标用户并不高度重合
举个例子，在线答题，对于一般的考生他认认真真答题，发现不能复制那没什么。这个属于常规用户使用。如果一个考生铁了心要上网查答案，那你这个工具破解的成本太低了。而恰恰后一种用户才是我们开发这个工具所要防范的群体。

131

2018-05-05 16:27:01 +08:00 via Android

@UIXX 嗯，确实，考生完全可以打字、语音、截屏查，还可以直接问人；所以大型正规考试基本上都是线下的（但还可能带个蓝牙耳机或者口袋里放个手机）

131

2018-05-05 16:29:48 +08:00 via Android

@UIXX 所以可能应用在不希望被复制的，文字多的场景更好，这样子再换个字体之类的，如果你真的有毅力手打。。。那也没辙

codehz

2018-05-05 16:32:07 +08:00 via Android

没考虑可访问性 api 直接读取网页文字的问题，建议干掉所有文字改用图片渲染

131

2018-05-05 16:53:41 +08:00 via Android

@codehz 对，innerText 直接就能读，不过这个 JS 里弄图片渲染还要考虑各种普适性之类的问题，所以。。。就没考虑用这个方法

AX5N

2018-05-05 16:53:59 +08:00

@131 用防复制来防作弊，确实能算得上是一件有意义的事情。但不管怎么看，这个手段都是一个错误的方向，就像你下面所说的。

那么，除了防止作弊以外，还有什么其他用途吗。

131

2018-05-05 17:04:21 +08:00 via Android

@AX5N 看个人脑洞，而且既然已经有了用途，那么它的存在就已经有了意义

AX5N

2018-05-05 17:08:45 +08:00

@131 我想听下你的脑洞

est

2018-05-05 17:17:43 +08:00 via Android

66666

zeroDev

2018-05-05 17:43:32 +08:00 via Android

明白了，就是如何把人往死里整
2333

131

2018-05-05 18:18:33 +08:00

@Mysdes 这个插件我试了，只想到了几种治标的方法。。。

把它实现的代码贴一下： https://paste.ubuntu.com/p/DhhzkCy437/ ，大佬们看看能不能破，谢谢

codehz

2018-05-05 18:18:53 +08:00 via Android

@131 不是 innerText，是给盲人用的屏幕阅读器，不受 js 限制，只要是文本，都可以读，对付这种方法，只能靠图片了

zhjits

2018-05-05 23:45:23 +08:00 via iPhone

之前做过一个内部项目用 Screen Reader API 复制网页文本
在做之前还开过脑洞 hook GDI+/Direct2D API is 直接把程序画的字读出来

131

2018-05-06 00:07:57 +08:00 via Android

@zhjits 〈(゜。゜) 为什么，为什么？！明明我已经是一张画了，为什么你还要读我？！（ x

yankebupt

2018-05-06 00:41:05 +08:00

然后哪天被哪个恶意的植入了挖矿脚本，防开发工具调试用的 js 就被当成病毒加的壳一起检测了，然后域名因为无法调试确认病毒责任直接入了云防毒黑名单，是不是就舒服了。
纯脚本防屏蔽感觉做差不多就得了，真想防复制感觉像各种在线文献阅读网站似的要个 flash 或什么插件权限，别管真防假防当时吓住一大票人。

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

2018-05-06 01:39:01 +08:00

优化下：
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

2018-05-06 01:48:45 +08:00 via Android

@openmynet 厉害了，大佬；我会加一个判断丢失焦点（地址栏）的事件的（

openmynet

2018-05-06 01:54:55 +08:00

代码直接放在浏览器书签里直接点，地址栏不会出现焦点丢失。

131

2018-05-06 02:07:09 +08:00 via Android

@openmynet 我...我再加个判断鼠标位置

ho121

2018-05-06 09:34:13 +08:00 via Android

右键另存为？

ho121

2018-05-06 09:36:17 +08:00 via Android

防复制不如转成图片

gelilaohuang

2018-05-06 15:09:25 +08:00

![[email protected]]( https://i.loli.net/2018/05/06/5aeeaa0bcd038.png)

network block url

131

2018-05-06 16:28:18 +08:00 via Android

@gelilaohuang download and (rename or insert)

Roycom

2018-06-28 13:23:44 +08:00

全站直接图片输出