性能实现 - 解除页面禁止复制性能

解除页面禁止复制性能

起源：明天照例进行日常总结，在查找材料进行 ctrl+ c 加 ctrl+ v 时，发现知乎的页面居然禁止转载了，也就是对复制做了拦挡，须要登录才能够复制，然而咱们公司因为平安的起因，知乎以及很多网站是无奈登陆，那咋办？都是前端开发，同行就别这样啦。

后续发现知乎不是所有内容都是禁止转载的，只有设置了禁止转载的内容才禁止复制，一般内容在复制后会加上版权以及起源

前端实现禁止复制性能的办法，目前就两大类

• 通过 js 阻止复制性能实现禁止复制。
• 通过 css 款式 user-select:none 阻止选中实现禁止复制。

目前个别抉择其中一种，比方简书、掘金、知乎等资讯问答类，也有混合应用的，比方起点网这类浏览为主的。

破解禁止复制性能的办法

1. 禁止以后页面的 javascript，毕竟咱们对复制拦挡就是通过 js 实现的。
2. 删除或者笼罩 oncopy 和 onselect 属性事件。
3. 有些网站间接让你无奈选中，给文本减少了 css 款式user-select:none。
4. 非开发实现：将文章转发到手机，应用手机的长按抉择复制文本
5. 仍旧是非开发实现：截图，哈哈哈，皮一下就很开心。
6. 最牛皮的办法：手敲，解决所有妖魔鬼怪。

js 实现防复制性能

js 实现防复制个别就是应用 copy 这个 api:

document.body.oncopy = function(e) {// 全局监听};
$('#articl_content').oncopy = function(e) {// 部分监听};
window.addEventListener('copy', e => {// 全局监听})
复制代码

以及 document.getSelection()，这个办法是用来操作选中的内容的 api，其中：document.getSelection(0).toString() 能够 取得选中内容的文字局部，document.getSelection(0).empty()能够勾销选中，在 getSelection() 中传参能够获取不同的选中 内容段，更多乏味的办法在它原型里。

另外顺便提一下和复制相干的还有剪切 -cut，粘贴 -paste，用法和 copy 统一。

一些网站尽管不禁止用户复制内容，但会在复制的内容前面加版权以及起源信息，这个就须要用到剪切板这个对象了，即：clipboa rdData。它罕用的办法有 3 个，setData('text', 插入的内容)插入数据，getData()获取剪切板的数据，clearData('text') 革除数据。

知乎的转载加版权实现

个别罕用的 js 复制性能有 2 种，一种是document.execCommand('copy')，个别在富文本编辑器框架中常常应用到，目前尽管在 js 手册中显示已废除，但大部分浏览器还是反对该性能的。

另外一种就是 oncopy 监听，复制的数据通过 window.getSelection 这个 api 获取，如果须要加版权信息，在数据放入剪切板前解决下，加上版权信息接口，知乎就是用的这种，大部分网站都是这样的。

个别网站都是在局部元素上做监听的，不会进行全局监听，document.body.oncopy 实现的是全局监听，document.getElementById（‘xx’).oncopy 实现的某个元素内监听。

个别实现：

document.body.oncopy = (event) => {
    // 是否登录，没登陆就禁止转载
    if (!isLogin()) return alert('禁止转载'); 
    event.preventDefault(); // 勾销浏览器本来默认的 copy 事件
    let authorizationInfo, // 受权信息
        copyText = window.getSelection(0).toString(); // 获取被复制的文本内容，没有 dom 构造
    if (copyText.length > 20) {
        // 个别大量复制网站是容许的，字数长度超过 20 个，则退出受权信息
        copyText = `${copyText}

作者：111,
连贯：zhihui.com/article/123
起源：知乎
著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。`
    }
    // 兼容一下 ie 浏览器，ie 中是 window，其余浏览器是 event
    let clipboardData = event.clipboardData || window.clipboardData;
    clipboardData.setData('text', copyText);
}
复制代码

起点网防复制性能实现

• 禁止复制 + 剪切
• 禁止右键，右键某些选项：复制粘贴剪切
• 禁用文字抉择：user-select:none

具体实现:

// 禁止右键
document.body.oncontextmenu = e => {
    return false; 
    // e.preventDefault();};
// 禁止文字抉择 
document.body.onselectstart = e => {
    return false; 
    // e.preventDefault();};
// 禁止复制 
document.body.oncopy = e => {
    return false; 
    // e.preventDefault();}
// css 禁止用户抉择
.content{
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}
复制代码

破解转载代码 - 简略版（实用开发者）

关上浏览器，按下 f12，最下面一排找到 console, 复制上面代码，而后抉择你要复制的文本内容，将上面代码粘贴到 console 中并回车，即可看到你选中的内容的纯文本模式，这个形式只能复制纯文本。

window.getSelection(0).toString();
复制代码

如下：

禁用 js，实用所有人

Chrome 浏览器的话：关上浏览器控制台，按 F1 进入 Setting，勾选 Disable JavaScript(禁止 js)，放图：

通过 OCR 技术，将图片转文字，实用有该类软件的人

ocr 也可用于家长作业或者图文内容辨认等。

另外个别也可间接装置浏览器插件。

这个不多说，不懂的人多的话我后续再补充。如果留言的人多的话，一个没有插件的浏览器是短少乏味的灵魂的插件。

防复制技术降级

尽管是降级，但说到底也就是略微恶心下人，通过测试发现，防复制网站个别是文章，文章个别是多段内容，那么在每一个内容元素 上加内联款式：user-select: none !important，那么想要手工复制的人就须要将每一个内容的内联款式都删除或去掉，因为是 用内联款式写的，所以无奈通过通用款式进行笼罩，手工操作起来比拟繁琐，而且目前罕用的浏览器脚本还未对于此项防复制技术降级。不过解禁复制也就是遍历下元素进行款式删除更改，然而因为元素量比拟大，就会导致拜访页面会比拟卡顿，因为浏览器插件会始终开启，除非手动敞开，那么就存在性能耗费，如果 插件降级了此项性能，就会导致浏览器性能升高，长期应用或者当用户大量关上浏览器的状况下，卡顿就会显著，从而影响用户体验，至于用户到底怎么抉择，还是取决于用户本人。

心愿发了这篇文章后，不想登陆来偷懒的人不要打我，嘿嘿嘿。

后续

起初想了下，如果防复制技术降级，那么就开发一款更加专精的插件，不对页面一开始就革除（目前我所已知的插件是关上页面时就 将所有元素进行防复制有效化一遍），减少一个抉择性能，用户可抉择想要的区域进行防复制有效化破解，然而这样插件开发起来就 比拟繁琐了。

当然，这个是无奈阻止爬虫的。后续再出一篇对于前端实现爬虫的原理以及实现。

参考资料

• juejin.cn/post/684490…
• www.cnblogs.com/wisewrong/p…