首页 > 其他分享 >文本选中复制

文本选中复制

时间:2023-04-01 17:12:19浏览次数:55  
标签:事件处理 文库 复制 某度 按钮 选中 文本

某些网站例如某度文库、道客某某等都不允许用户选中文本进行复制,作为一个搞前端的,就感觉离谱,文本都下载到本地了,还不让我复制,于是为了更好的学(复)习(制),实现了一个脚本去解决这些限制。

 

描述

首先来看一下效果图,依旧是以某度文库、道客某某为例展示效果,点击复制按钮即可成功复制。

在这里插入图片描述

在这里插入图片描述脚本主要支持 百度文库 道客巴巴 无忧考网 学习啦 蓬勃范文 中文本的复制

实现

某度文库

在某度文库中直接右击检查元素的话,是能够直接看到文字的,可以直接在调试面板的Elements审查元素中复制,但是总是有些麻烦。如果在选中某度文库的东西会弹出他自行插入的复制按钮,无论是按Ctrl+C或者点击他的复制按钮都无效,除非开通一个VIP,本着白嫖的原则,且文本都下载到浏览器了还不让复制有点说不过去,于是首先研究一下他的Event Listeners

在这里插入图片描述

虽然通过移除一些Event Listeners确实能够达到使用Ctrl+C来实现复制的效果,但是浏览器并不提供获取所有事件监听的方法,无法移除对于匿名的事件处理函数,对于具名的事件处理函数也不容易获取,谷歌浏览器提供的getEventListeners方法也只能在Console中使用,在脚本中会出现找不到该方法的异常,于是替换了一种方案,通过自行实现一个复制按钮来规避某度文库对于按键以及复制事件的屏蔽,具体是通过动态地插入Dom实现一个按钮,然后使用ClipboardJS这个插件去实现复制,其他的操作都是一些细节的处理,例如阻止这个插入的按钮继续冒泡触发onmouseup事件等。

在这里插入图片描述

道客某某

不得不说,这个真的是惊到我了,他的实现是将文本加密,然后解密文本,最后通过使用Canvas将文本绘制,拖动鼠标选中时其实只是通过事件监听动态的插入了一个淡蓝色的透明的div,看似是选中了,实际文本是并未选中的。

在这里插入图片描述

见招拆招,既然文本都已经下载到了我本地,那么他的解密方式也必定在本地,于是我首先寻找的就是他对于加密的数据进行解密的代码,在浏览器中debug了很长时间,因为他对于代码有加密混淆压缩的行为,解密的相关代码比较混乱,并不太容易去复现,于是我换了一个思路,既然VIP是能够复制的,那么对于这个点击复制的按钮一定会有相应的事件处理函数,那么就寻找这个按钮绑定的事件处理函数,通过不断地debug我定位了一个加密的Js文件,虽然做了加密以及混淆但是将其解析并格式化之后在事件处理函数的部分不是特别影响阅读,此外他的混淆的变量名是动态生成的,所以要做的就是再次请求一遍这个Js首先将其解析生成一段字符串然后通过正则表达式匹配正确的变量名,从而实现文本的复制。

在这里插入图片描述

其他

对于这一部分基本上都是通过监听一个oncopy事件去拦截复制操作,对于DOM0级模型直接将oncopy事件的处理函数指向一个空函数即可,对于DOM2级模型,前文提到无法在脚本中直接获取一个元素绑定的所有事件,通过观察这些网站的Event Listeners可以发现其绑定的oncopy事件都是绑定在document上的,而且都是冒泡模型,那么只需要阻止事件向上冒泡就能规避这些网站的oncopy事件的触发,实现方案就是在body上定义oncopy事件为一个空函数并阻止其向上冒泡。

在这里插入图片描述

脚本链接

标签:事件处理,文库,复制,某度,按钮,选中,文本
From: https://www.cnblogs.com/kaysar/p/17278924.html

相关文章

  • R语言SVM支持向量机、文本挖掘新闻语料情感情绪分类和词云可视化
    支持向量机(SVM)是一种机器学习方法,基于结构风险最小化原则,即通过少量样本数据,得到尽可能多的样本数据。支持向量机对线性问题进行处理,能解决非线性分类问题。本文介绍了R语言中的SVM工具箱及其支持向量机(SVM)方法,并将其应用于文本情感分析领域,结果表明,该方法是有效的。在此基础上,对......
  • Vue引用富文本编辑器
    1.在package.json加上并安装依赖"devDependencies":{"@jsdawn/vue3-tinymce":"^1.1.7",}2.在页面中引入importVue3Tinymcefrom"@jsdawn/vue3-tinymce";3.使用<vue3-tinymcev-model="item.blockDataObj.text":setting=&qu......
  • 项目一众筹网06_02给用户分配角色、执行用户角色的分配、提交的 只是我们选中的解决、
    项目一众筹网06_02项目一众筹网06_02文章目录项目一众筹网06_0209-Admin分配Role-执行分配-handler方法(执行角色分配的后端代码开始)隐藏域的东西,不用传,点击submit(提交)的时候就会传过去,如下图允许参数是空值10-Admin分配Role-执行分配-Service方法==重复问题==11-Admin分配Role-执行......
  • Vue引用富文本编辑器
    1.在package.json加上并安装依赖"devDependencies":{"@jsdawn/vue3-tinymce":"^1.1.7",}2.在页面中引入importVue3Tinymcefrom"@jsdawn/vue3-tinymce";3.使用<vue3-tinymcev-model="item.blockDataObj.text":s......
  • 微信小程序之实现封装一个富文本编辑器 Editor
    前言富文本编辑器,可以对图片、文字进行编辑。编辑器导出内容支持带标签的html和纯文本的text,编辑器内部采用delta格式进行存储。通过setContents接口设置内容时,解析插入的html可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过delta进行插入。富文本......
  • mycat分库分表一主一从(主从复制)
    一、mysql主从复制1、准备挂载文件为了将配置文件在宿主机做挂载,先运行测试镜像拷贝配置文件1)、拉取镜像dockerpullmysql:8.0.262)、创建测试容器mysql-demodockerrun-it-p3300:3306\--namemysql-demo\-eMYSQL_ROOT_PASSWORD=123456\-dmysql:8.0.26运行......
  • 12 SQL语句的补充----复制表数据
    复制数据表1、复制数据1.1创建一个字段和源表不同的虚拟表 createtemporarytablet_yy( idint(16), namevarchar(25), sexvarchar(25) );源表与目标字段不一致,复制数据需要指定字段insertintot_yy(id,name,sex)selectid,sname,sexfromt_student;1.2创建一......
  • Python 应用 - jieba 分词 1:进行批量文本分词_艽野尘梦 better 的博客 - CSDN 博客
    知识点小结os.walk()os.walk()方法用于通过在目录树中游走输出在目录中的文件名,向上或者向下。os.walk()方法是一个简单易用的文件、目录遍历器,可以帮助我们高效的处理文件、目录方面的事情。importpandasaspdimportmatplotlib.pyplotaspltimportjiebafromPILimp......
  • 纯CSS3实现多行文本截断
    纯CSS处理多行文本展开和收起,直接上代码和效果图1<html>2<header>3<style>4.wrap{5position:relative;6padding:5px25px25px;7border-radius:5px;8box-shadow:05px20px3px#cc......
  • R语言SVM支持向量机、文本挖掘新闻语料情感情绪分类和词云可视化
    全文链接:http://tecdat.cn/?p=32032原文出处:拓端数据部落公众号支持向量机(SVM)是一种机器学习方法,基于结构风险最小化原则,即通过少量样本数据,得到尽可能多的样本数据。支持向量机对线性问题进行处理,能解决非线性分类问题。本文介绍了R语言中的SVM工具箱及其支持向量机(SVM)方法,并......