JS前端解除页面禁止复制功能的方法与原理详解

解除页面禁止复制功能

在日常资料查阅与总结过程中，使用Ctrl+C和Ctrl+V进行复制时，发现知乎等部分网站启用了禁止转载功能，即对复制操作进行了拦截，要求用户登录才能复制。考虑到公司出于安全考虑，无法登录知乎及其他许多网站，这给工作带来了不便。作为前端开发者，同行之间或许可以考虑更开放的内容共享方式。

后续观察发现，知乎并非所有页面都禁止复制，只有被标记为“禁止转载”的内容才会触发复制拦截。对于普通内容，用户复制后系统会自动附加版权信息和来源链接。

前端实现禁止复制功能的方法

目前主要存在两类实现方式。

• 通过JavaScript阻止复制功能来实现禁止复制。
• 通过CSS样式user-select:none阻止文本选中来实现禁止复制。

目前大多数网站会选择其中一种方式，例如简书、掘金、知乎等资讯问答类平台；也有混合使用的情况，如以阅读为主的起点网。

破解禁止复制功能的方法

• 禁止当前页面的JavaScript执行，因为复制拦截主要通过JS实现。
• 删除或覆盖oncopy和onselect属性事件。
• 有些网站直接禁止用户选中文字，通过给文本增加CSS样式user-select:none实现。
• 非开发实现方式：将文章转发到手机端，利用手机长按选择并复制文本。
• 另一种非开发实现方式：截图，虽然简单但有效，幽默一下。
• 最“硬核”的方法：手动输入文字，这种方法可以解决所有防复制限制。

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。它常用的方法有三个：setData('text', 插入的内容)用于插入数据，getData()用于获取剪切板数据，clearData('text')用于清除数据。

知乎的转载加版权实现

常用的JS复制功能主要有两种：一种是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
    }
    // 兼容一下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();

示例如下：

禁用JavaScript，适用所有人。

对于Chrome浏览器：打开浏览器控制台，按F1进入Settings设置界面，勾选Disable JavaScript（禁止JS），具体操作如图所示：

通过OCR技术将图片转换为文字，适用于拥有相关软件的用户。

OCR技术也可用于家长作业辅导或图文内容识别等场景。

此外，一般也可直接安装浏览器插件来辅助解决。

此处不再赘述，若感兴趣者众，后续可补充相关内容。如果留言较多，一个没有插件的浏览器确实缺少了一些有趣的灵魂。

防复制技术升级

虽然称为升级，但本质上只是稍微增加了一些干扰。经过测试发现，防复制网站多为文章，且文章通常由多段内容组成。若在每一个内容元素上添加内联样式：user-select: none !important，那么想要手工复制的用户就需要逐一删除或去除每个内容元素的该内联样式。由于使用的是内联样式，无法通过通用CSS样式覆盖，手工操作较为繁琐。目前常用的浏览器脚本尚未对此项防复制技术升级做出响应。不过，解禁复制只需遍历元素进行样式删除或更改，但由于元素数量较大，会导致页面访问卡顿。由于浏览器插件通常保持开启状态，除非手动关闭，这会带来性能消耗。如果插件升级支持此功能，可能导致浏览器性能下降，长期或大量打开浏览器时卡顿现象将明显影响用户体验。至于用户如何选择，仍取决于个人意愿。

希望发布这篇文章后，那些不想登录却想偷懒的人不要打我，嘿嘿。

后续思考

后来考虑到，如果防复制技术升级，可以开发一款更专精的插件。不同于目前已知插件在打开页面时将所有元素防复制功能无效化的做法，新插件可增加选择功能，允许用户选择特定区域进行防复制无效化破解。但这样插件的开发复杂度会显著增加。

当然，这种方法无法阻止爬虫程序。后续将另行撰文介绍前端实现爬虫的原理及具体实现。

参考资料

https://www.jb51.net/article/166407.htm

https://www.jb51.net/article/110076.htm

以上就是JS前端实现解除页面禁止复制功能方法详解的详细内容，更多关于JS解除页面禁止复制的资料请关注本站其它相关文章！