前端js反爬虫技术总结

本文介绍了多种反爬虫技术,包括禁止F12和保存查看代码、JavaScript混淆加密、利用Cookie、加密Ajax请求参数以及检测Selenium爬虫。通过这些方法,可以有效阻止普通用户和部分爬虫获取页面数据,提高数据安全性。同时,文章提到没有完美的反爬解决方案,反爬与爬虫之间的较量是一个持续的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.禁止f12和保存查看代码

这种办法一般就是禁止小白或者心血来潮想看源码的人
相关js代码

    	<script>
    document.onkeydown = function() {
        var e = window.event || arguments[0];
        if (e.keyCode == 123) {
            alert("F12被禁用");
            return false;
        }
         if ((e.ctrlKey) && (e.keyCode == 83)) { //ctrl+s
            alert("ctrl+s被禁用");
            return false;
        }
         if ((e.ctrlKey) && (e.keyCode == 85)) { //ctrl+s
            alert("ctrl+u被禁用");
            return false;
        }
        if ((e.ctrlKey) && (e.keyCode == 73)) { //ctrl+s
            alert("ctrl+shift+i被禁用");
            return false;
        }
    }
    document.oncontextmenu = function() {
        alert('右键被禁用');
        return false;
    }
    	</script>

在这里插入图片描述
效果就是无法通过右键,f12,ctrl+s,ctrl+u保存代码。

2.js混淆加密

就是把你的js代码加密,就算别人拿到了代码也不知道你代码写的什么东西,无法研究你的代码,一般js混淆加密和动态页面ajxa渲染数据一起用会有很好的效果。
代码压缩:去除空格、换行等
代码加密:eval、emscripten、WebAssembly等
代码混淆:变量混淆、常量混淆、控制流扁平化、调试保护等
效果参见下图
在这里插入图片描述

在这里插入图片描述
一段简单的hellow world被加密之后已经面目模糊了。推荐一个加密网址:https://www.jsjiami.com/

3.JS写cookie

原理:浏览器运行一段JS生成一个(或多个)cookie再带着这个cookie做二次请求。服务器那边收到这个cookie就认为你的访问是通过浏览器过来的合法访问。这样的话直接通过curl之类的方式就无法获取到页面了。

4.JS加密ajax请求参数

页面只有一个静态页面的框架,所有的数据都是通过ajax请求到数据之后再在页面上渲染的,然后前端和后端有一套加密的通信规则。于是无法直接通过请求页面的方式拿到浏览器展示的数据,只有先去破解js的加密,然后再伪装接口请求才能获得你想要爬取的数据。

这个和js混淆加密合起来用的话别人想要拿到的你的数据首先需要破解你的js加密,然后再看js代码破解你前后端的加密,大大提高了难度。

5.反Selenium爬虫

现在有一些工具可以直接通过浏览器打开页面然后获取页面数据,比如Selenium。由于是直接在浏览器内打开的,可以直接运行js,ajax渲染页面的方法就无法反这种爬虫了。但是,正因为它使用了工具,合直接在浏览器打开还是有区别的,找到这种区别你就可以防止这种直接打开浏览器的工具来爬取你的页面内容。
比如通过window.navigator.webdriver,它的作用是在用户打开浏览器时给当前窗口一个window属性来存放用户的各种信息,当我们使用selenium时值为true,正常用户访问网站时为false。

webdriver = window.navigator.webdriver;
if(webdriver){
    console.log('你以为使用Selenium模拟浏览器就没事了?')
} else {
    console.log('正常浏览器')
}

除了这些办法还有判断ua信息,ip限制,记录访问频率等等方式来反爬虫,没有完美的反爬方式,也没有能够爬到所有页面的爬虫,只有不断学习钻研才能继续在这条技术道路上走下去。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值