前端JS将文字替换成伪类标签防爬虫的一个方法
来源:互联网 发布:c语言指针初始化 编辑:程序博客网 时间:2024/06/05 18:53
话不多说 思路就是
把重要的信息转换成伪类标签 显示出来 把原有的文字删除
本来还担心替换成伪类标签后字体什么的会改变 伪类标签很好的继承了样式
上代码
但是呢 很遗憾 你还是要过接口 这个方法可以作为中转 比如你和后端商量好规则 你发送你生成的class 去取得要隐藏的对应得数据 然后再渲染出来 而不是通过一个接口直接渲染出来
一开始我觉得这样是可以防爬的 后来我自己爬了下 只靠前端的JS修改是不行的 异步直接返回数据爬你的接口 直接渲染的话JS没法影响 只能前后端一起配合混淆数据 来增加难度
/**@param {String} -- cls 当前要替换的标签名 比如我要替换所有p 标签下的 span 的字为伪类标签 就是 CreatePseudoClass( {cls: 'p span'} );*/function CreatePseudoClass( option ){ if( !(this instanceof CreatePseudoClass) ){ return new CreatePseudoClass( option ); } this.defaults = { cls: 'p strong' // 传递的默认参数 } this.result = $.extend( {}, this.defaults, option ); this.init(); } CreatePseudoClass.prototype = { constructor: CreatePseudoClass, init: function(){ var self = this, $items = $(self.result.cls), // 获取生成的样式表 注意了 这是精华 这种方式生成的样式表在控制台中是看不到里面的样式的 就是个空的 <style></style> 但是里面确实是有样式标签的 我还为了隐藏生成的样式表里的内容这个东西研究了好久 基础不扎实啊 嘿嘿 sheet = self.addSheet(); for( var i = 0, l = $items.length; i < l; i++ ){ (function(i){ var $item = $items.eq(i); $itemText = $item.text(), newName = self.getEnglish(), // 产生一些随机数啥的 来混淆写爬虫的人 确实我感觉没啥卵用 itemTagName = Array.prototype.join.call( newName, parseInt( Math.random()*100) ), newClass = itemTagName + parseInt( Math.random()*10000 ) ; $item.text(''); // 给当前的这个添加产生伪类的样式 $item.addClass(newClass); // 添加样式信息 self.addRule(sheet, newClass, $itemText) })(i) } }, // 获取随机英文 getEnglish(){ var result = []; for( var i = 0; i < 4; i++ ){ var ranNum = Math.ceil(Math.random() * 25); //生成一个0到25的数字 //大写字母'A'的ASCII是65,A~Z的ASCII码就是65 + 0~25;然后调用String.fromCharCode()传入ASCII值返回相应的字符并push进数组里 result.push( String.fromCharCode( 65 + ranNum ) ); } return result.join( '' ); }, // 添加样式表 addSheet: function(){ var style = document.createElement("style"); document.head.appendChild(style); return style.sheet; }, addRule: function(sheet, newClass, $itemText){ // 判断兼容性 typeof sheet.addRule == 'function' ? sheet.addRule('.' + newClass+':before', 'content: "'+$itemText+'"') : sheet.insertRule('.' + newClass + ':before {content: "'+$itemText+'"}' , 0); } }
demo图 别嫌丑 嘿嘿
dom结构图
生成的效果图
可以看到 文字本替换成了伪类标签 而且增加了两个看起来是空的样式表(我初始化了两次方法)
还是把demo代码贴出来吧 嘿嘿
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>防抓取</title> <style> p strong{color: #eb6120; background: black} </style></head><body> <p class="red">1111</p> <p> <span>尚泽大都会 </span><strong class="123xx">168元</strong> </p> <p> <span>尚泽大都会1 </span><strong class="12xx3">18元</strong> </p> <p> <span>尚泽大都会2 </span><strong class="12xx3">14568元</strong> </p> <p><a href="baidu.com">baidu</a></p> <p><a href="baidu.com">baidu</a></p> <p><a href="baidu.com">baidu</a></p> <p><a href="baidu.com">baidu</a></p> <p><a href="baidu.com">baidu</a></p> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> function CreatePseudoClass( option ){ if( !(this instanceof CreatePseudoClass) ){ return new CreatePseudoClass( option ); } this.defaults = { cls: 'p strong' } this.result = $.extend( {}, this.defaults, option ); this.init(); } CreatePseudoClass.prototype = { constructor: CreatePseudoClass, init: function(){ var self = this, $items = $(self.result.cls), // 获取生成的样式表 注意了 这是精华 这种方式生成的样式表在控制台中是看不到里面的样式的 就是个空的 <style></style> 但是里面确实是有样式标签的 我还为了隐藏生成的样式表里的内容这个东西研究了好久 基础不扎实啊 嘿嘿 sheet = self.addSheet(); for( var i = 0, l = $items.length; i < l; i++ ){ (function(i){ var $item = $items.eq(i); $itemText = $item.text(), newName = self.getEnglish(), // 产生一些随机数啥的 来混淆写爬虫的人 确实我感觉没啥卵用 itemTagName = Array.prototype.join.call( newName, parseInt( Math.random()*100) ), newClass = itemTagName + parseInt( Math.random()*10000 ) ; $item.text(''); // 给当前的这个添加产生伪类的样式 $item.addClass(newClass); // 添加样式信息 self.addRule(sheet, newClass, $itemText) })(i) } }, // 获取随机英文 getEnglish(){ var result = []; for( var i = 0; i < 4; i++ ){ var ranNum = Math.ceil(Math.random() * 25); //生成一个0到25的数字 //大写字母'A'的ASCII是65,A~Z的ASCII码就是65 + 0~25;然后调用String.fromCharCode()传入ASCII值返回相应的字符并push进数组里 result.push( String.fromCharCode( 65 + ranNum ) ); } return result.join( '' ); }, // 添加样式表 addSheet: function(){ var style = document.createElement("style"); document.head.appendChild(style); return style.sheet; }, addRule: function(sheet, newClass, $itemText){ // 判断兼容性 typeof sheet.addRule == 'function' ? sheet.addRule('.' + newClass+':before', 'content: "'+$itemText+'"') : sheet.insertRule('.' + newClass + ':before {content: "'+$itemText+'"}' , 0); } } CreatePseudoClass({}) CreatePseudoClass({cls: 'p a'}) </script></body></html>
还能优化和修改 谢谢大佬指点
阅读全文
0 0
- 前端JS将文字替换成伪类标签防爬虫的一个方法
- Android将TextView中的文字替换为一个小图片的方法
- 几种用图片替换文字的方法
- 【前端】三种方法将文字垂直居中
- 前端网页禁止选中文字的方法
- js 替换html标签
- 【爬虫工具方法】根据属性得到一条HTML标签的一个属性值
- Java中替换HTML标签的方法
- Java中替换HTML标签的方法
- 前端性能优化:高频执行事件/方法的防抖
- 前端性能优化:高频执行事件/方法的防抖
- HTML在前端设置标签文字的颜色动态变化
- 一个构建多标签防假死浏览器的小技巧
- 获取一个标签文字的长度和显示完整文字
- js的replace方法将字符串中的 全部替换为空字符串
- 将ECSHOP的首页主广告轮播替换为CSS+JS,最模板方法一
- js替换所有的方法,js正则替换所有
- js替换所有的方法,js正则替换所有
- org.xml.sax.SAXParseException 文档根元素 "mapper" 必须匹配 DOCTYPE 根 "configuration"
- android studio
- iOS中@try@catch@finally捕获异常使用
- 文件基本操作
- 这几个征信误区你一定要知道!否则会房贷多花几十万
- 前端JS将文字替换成伪类标签防爬虫的一个方法
- Windows下使用pthread
- 【数据结构】关于数据结构顺序表动态内存开辟的介绍
- 创建表空间方式
- Hive 实现多字段的IN 和 NOT IN
- 十大编程算法助程序员走上高手之路
- capstone训练营2017-12-13
- Spring Boot(六)——Spring Date Jpa
- PuTTY 和 Xshell 密钥认证