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

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

　　本文转载于：猿2048网站➩

　　前言

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

　　我经常会遇到这些场景，有时我会思考背后发生了什么。趁着周末的空闲时间研究了一下，发现这些都和操作剪贴板有关，不难。知道如何做，组织它并与大家分享。

　　个人博客了解：

　　目录： API介绍： 复制、剪切、粘贴事件：发生复制操作时触发复制；当发生剪切操作时触发剪切；paste 发生粘贴操作时触发；每个事件都有一个对应的前事件：beforecopy、beforecut、beforepaste；

　　之前的这些一般用的不是很多，所以我们可以重点关注其他三个事件。

　　触发条件：

　　在鼠标右键菜单中复制、粘贴、剪切；

　　使用对应的键盘组合键，如：command+c、command+v；

　　即使随便按一下，也会触发事件。在 Chorme、Firefox 和 Safari 中的 Elevation 中引入了这些 before 事件，只有在剪贴板事件实际发生时才会触发，并且 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+取消用户选择样式。

　　Chrome浏览器：打开浏览器控制台，按F1进入设置，勾选Disable JavaScript (forbid js)。

　　此时如果无法复制，则需要找到用户选择样式，取消该样式。

　　所以那些盗版小说都是手打的，实在看不懂，请问？? ?

　　点击复制功能：

　　不能使用剪贴板数据：

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

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

　　而其他浏览器都是对应事件对象的属性，这其实是一种防止未授权访问的安全措施。为了兼容其他浏览器，我们不能通过clipboardData来做到这一点。

　　具体方法：

　　点这里复制内容的demo，可以点进去看。

　　结语

　　在工作之余了解这些东西很有趣，而且可以拓宽你的知识面。

　　其实只要*敏*感*词*到这些事件，我们就可以对要剪切的内容进行各种操作，比如：复制时替换文字，粘贴时查找是否有图片（上传图片），或者文字的长度. 切等，唯一限制你的

　　希望看过的朋友可以点赞/关注，你们的支持是对我最大的鼓励。

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

　　如果喜欢这篇文章，请关注我的订阅号，漫漫的科技之路，期待未来共同学习成长。

　　201以上8.8.8

　　参考：

　　js高程14.2.2操作剪贴板

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

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

　　更多专业前端知识，请前往【猿2048】