前端JS將文字替換成偽類標籤防爬蟲的一個方法
阿新 • • 發佈：2018-12-04
話不多說 思路就是
把重要的資訊轉換成偽類標籤 顯示出來 把原有的文字刪除
本來還擔心替換成偽類標籤後字型什麼的會改變 偽類標籤很好的繼承了樣式
上程式碼
但是呢 很遺憾 你還是要過介面 這個方法可以作為中轉 比如你和後端商量好規則 你傳送你生成的class 去取得要隱藏的對應得資料 然後再渲染出來 而不是通過一個介面直接渲染出來
一開始我覺得這樣是可以防爬的 後來我自己爬了下 只靠前端的JS修改是不行的 非同步直接返回資料爬你的介面 直接渲染的話JS沒法影響 只能前後端一起配合混淆資料 來增加難度
/**
@param {String} -- cls 當前要替換的標籤名 比如我要替換所有p 標籤下的 span 的字為偽類標籤 就是 CreatePseudoClass( {cls: 'p span'} );
*/ 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>還能優化和修改 謝謝大佬指點