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

有啥意义。。

view-source: url

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

wget，curl 下载下来

wireshark

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

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

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

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

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

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

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

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

整页截图再 ocr 了解一下？

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

@billlee 23333

@gzlock 花式字体了解一下（

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

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

还不如把内容做好点

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

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

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

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

先打开 f12,然后输入网址

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

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

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

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

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

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

学 ReCAPTCHA 搞个 bytecode vm

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

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

刚刚不小心按了 command + enter orz

WebSockets 下发分段密文和 IV

用 bytecode 里面的逻辑解密

bytecode 渲染内容到 canvas

完美

@letitbesqzr 感想提供思路

@chinvo 666

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

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

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

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

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

@binux 谢谢支持

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

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

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

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

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

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

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

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

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

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

Chrome 上的 Allow Copy 插件

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

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

都是码农，何必伤害呢

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

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

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

@Mysdes 多谢反馈

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

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

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

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

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

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

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

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

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

@131 我想听下你的脑洞

66666

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

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

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

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

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

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

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

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;
})();

优化下：
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;
})();

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

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

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

右键另存为？/div>

防复制不如转成图片

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

network block url

@gelilaohuang download and (rename or insert)

全站直接图片输出