前端JS将文字替换成伪类标签防爬虫的一个方法

最新推荐文章于 2024-02-21 11:04:07 发布

重复过往

最新推荐文章于 2024-02-21 11:04:07 发布

阅读量2.9k

点赞数

分类专栏： JS JQ 文章标签：前端前端防爬虫 JavaScript css jquery

本文链接：https://blog.csdn.net/qq_37540004/article/details/78794323

版权

JS JQ 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

话不多说思路就是
把重要的信息转换成伪类标签显示出来把原有的文字删除
本来还担心替换成伪类标签后字体什么的会改变伪类标签很好的继承了样式
上代码

但是呢很遗憾你还是要过接口这个方法可以作为中转比如你和后端商量好规则你发送你生成的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
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
前端JS将文字替换成伪类标签防爬虫的一个方法

话不多说思路就是把重要的信息转换成伪类标签显示出来把原有的文字删除本来还担心替换成伪类标签后字体什么的会改变伪类标签很好的继承了样式上代码/**@param {String} -- cls 当前要替换的标签名比如我要替换所有p 标签下的 span 的字为伪类标签就是 CreatePseudoClass( {cls: 'p span'} );*/function
复制链接

扫一扫