破解网站禁止复制页面内容和图片( 一下基本都知道怎么做了，你还不知道？)

　　破解网站禁止复制页面内容和图片(

一下基本都知道怎么做了，你还不知道？)

　　

　　前言

　　有时候我们经常会遇到这样的场景：打掘金时抄一段文字，知乎，内容后面总是加一些版权信息，小说网站等禁止入选，禁止抄袭功能，点击自动复制账号功能。

　　我经常遇到这些场景。有时我会想怎么做。趁着周末的空闲时间研究了一下，然后发现这些都是和操作剪贴板有关的，基本不难理解。知道如何去做，组织起来并与大家分享。

　　个人博客学习一下： 目录：API介绍：复制、剪切、粘贴事件：复制操作发生时触发复制；剪切操作发生时触发剪切；粘贴操作发生时触发粘贴；每个事件都有一个before事件对应于：beforecopy、beforecut、beforepaste；

　　之前的这些一般都不是很有用，所以我们可以专注于其他三个事件。

　　触发条件：

　　复制、粘贴、剪切鼠标右键菜单；使用对应的键盘组合键，如：command+c、command+v；

　　即使随便按下，也会触发事件。在 Chorme、Firefox 和 Safari 中，这些 before 事件只会在剪贴板事件实际发生时触发。在IE上，可以先触发。我实际测试的时候，最新版本的chorme也会被随机按下触发，所以限制应该是在较早的版本上。

　　所以我想说的是：之前这些事件最好不要用，剪贴板的处理最好放在复制、剪切和粘贴上。

　　使用姿势：

　　以复制为例：

　　 document.body.oncopy = e => {

// *敏*感*词*全局复制 做点什么

}

// 还有这种写法：

document.addEventListener("copy", e => {

// *敏*感*词*全局复制 做点什么

});

　　以上是对document.body的全局监控，但是很多人不知道的是，我们还可以为一些dom单独添加剪贴板事件：

　　 // html结构

// 写法一样：

let test1 = document.querySelector('#test1');

test1.oncopy = e => {

// *敏*感*词*test1发生的复制事件 做点什么

// test1发生的复制事件会触发回调，其他地方不会触发回调

}

　　其他事件同理，这里不再赘述。

　　clipboardData 对象：用于访问和修改剪贴板中的数据

　　兼容的：

　　不同的浏览器有不同的对象：在IE中，这个对象是window对象的属性，在Chrome、Safari和Firefox中，这个对象是对应事件对象的属性。所以我们在使用的时候，需要做如下兼容：

　　 document.body.oncopy = e => {

let clipboardData = (e.clipboardData || window.clipboardData);

// 获取clipboardData对象 + do something

}

　　对象方法：

　　该对象有三个方法：getData()、setData()、clearData()

　　应用：

　　如果学习不是为了安装X，那么一切都将毫无意义。来看看这个东西可以用在哪些场景：

　　实*敏*感*词*复制一大段文字添加版权信息：

　　实现很简单：取消默认复制后，主要是在复制内容后添加信息，然后根据clipboardData的setData()方法将信息写入剪贴板。

　　可以直接复制这段代码到本地试试。

　　 // 掘金这里不是全局*敏*感*词*，应该只是*敏*感*词*文章的dom范围内。

document.body.oncopy = event => {

event.preventDefault(); // 取消默认的复制事件

let textFont, copyFont = window.getSelection(0).toString(); // 被复制的文字 等下插入

// 防知乎掘金 复制一两个字则不添加版权信息 超过一定长度的文字 就添加版权信息

if (copyFont.length > 10) {

textFont = copyFont + '\n'

+ '作者：OBKoro1\n'

+ '链接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts\n'

+ '来源：掘金\n'

+ '著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。';

} else {

textFont = copyFont; // 没超过十个字 则采用被复制的内容。

}

if (event.clipboardData) {

return event.clipboardData.setData('text', textFont); // 将信息写入粘贴板

} else {

// 兼容IE

return window.clipboardData.setData("text", textFont);

}

}

　　然后command+c，command+v，输出：

　　你复制的内容

作者：OBKoro1

链接：https://juejin.im/user/58714f0eb123db4a2eb95372/posts

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

　　实现起点网的防复制功能：

　　可以复制代码到本地玩玩：

　　 // 禁止右键菜单

document.body.oncontextmenu = e => {

console.log(e, '右键');

return false;

// e.preventDefault();

};

// 禁止文字选择。

document.body.onselectstart = e => {

console.log(e, '文字选择');

return false;

// e.preventDefault();

};

// 禁止复制

document.body.oncopy = e => {

console.log(e, 'copy');

return false;

// e.preventDefault();

}

// 禁止剪切

document.body.oncut = e => {

console.log(e, 'cut');

return false;

// e.preventDefault();

};

// 禁止粘贴

document.body.onpaste = e => {

console.log(e, 'paste');

return false;

// e.preventDefault();

};

// css 禁止文本选择 这样不会触发js

body {

user-select: none;

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

}

　　PS：

　　破解防拷贝：

　　上面的防复制方法是通过js+css实现的，所以思路是：禁用js+取消user-select样式。

　　Chrome浏览器：打开浏览器控制台，按F1进入设置，勾选禁用JavaScript（禁止js）。

　　

　　如果此时仍无法复制，则应转到用户选择的样式并取消该样式。

　　

　　所以我真的看不懂那些盗版小说，打扰一下？? ?

　　点击复制功能：

　　不能使用剪贴板数据：

　　在 IE 中，可以使用 window.clipboardData.setData('text','content') 来实现。

　　如上所述，clipboardData 是 IE 中 window 的一个属性。

　　其他浏览器是对应事件对象的属性。这实际上是一种防止未经授权访问的安全措施。为了兼容其他浏览器，我们不能通过clipboardData来实现这个操作。

　　具体方法：

　　点击此处复制演示内容，您可以点击查看。

　　结束语

　　在工作之外学习这些东西很有趣，也可以拓宽你的知识面。

　　其实只要监控到这些事件，我们就可以对要剪切的内容进行各种操作，比如：复制的时候改变文字，粘贴的时候搜索图片（上传图片），或者文字的长度剪切和等等，唯一限制你的东西

　　希望看完的朋友可以点赞/关注我。您的支持是我最大的鼓励。

　　个人博客和掘金个人主页，如需转载请放原文链接并签名。码字不易，感谢支持！

　　如果喜欢本文，请关注我的订阅号，踏上漫长的技术之旅，期待未来共同学习成长。

　　

　　201以上8.8.8

　　参考资料：

　　js高程14.2.2操作剪贴板

　　如何禁止在网页上复制粘贴以及如何破解

　　原生js实现点击按钮复制文本