前言
任何网页开发者出于对自己网页的保护，都不想自己的前端代码被他人窃取或者抄袭。虽然我们平时都在忙着往代码里面写BUG，但是依然阻止他人对你代码的觊觎。
别人知道你代码的逻辑，就可以有很多的钻空子机会。于是有了下面常见的操作：
- 爬虫程序
- 拦截网页请求和伪造请求
- 秒杀、抢票、刷票等等
我们知道这些操作的前提，就是深刻分析你网页的逻辑。没有这个基础，那么这些都无法正常完成，所以反调试是防御攻击的第一部分。也是最重要的护甲，脱了这层护甲，后果将不可设想。
接下来，我们一起聊一聊反调试的方式方法。
目录：
- 常见反调试方式及实现分析
- 其他反调试方式及实现分析
常见反调试方式及实现分析
我们印象中常见的反调试，有如下几种方式：
- 代码混淆
- 禁用网页代码审查
- 页面关键数据动态生成
我们来分析下，这些基本方式的有效性及实现方式。
1. 禁用网页代码审查
最低级的方式，就是禁用网页代码审查，这中只能拦截掉那些刚入门的前端程序猿或者是稍微懂点web的普通用户。
具体实现方式：
- 禁用 F12 按键
- 禁用鼠标右键
- 禁用组合快捷键
- Windows: `Ctrl` + `Shift` + `i`
- Mac: `⌥` + `⌘` + `i`
这种方式很常见，具体实现代码我就不进行展开了，大家网站上搜索下就有。
2. 页面关键数据动态生成
这种主要用于防范图片和内容被直接抓取，作为一名前端宅男程序猿，在现实生活中没有找到心中那一个她（不过现在已经找到了），只能靠爬虫征服网页上的漂亮小姐姐。
有很多有能力的选手，已经爬过某国外大型视频网站 `某Hub` 网, 国内某大型图片网站 `某蛋` 网，还有选手爬了`某音`所有发短视频的小姐姐等等，这些都可以在程序猿大型社交网站 `Github` 上找到最后结果和源码。
最有印象的就是`某蛋`网，之前都是将所有图片以 `<img src="xx" />` 的形式直接放在页面上，但是耗不住大量程序猿的热爱，疯狂开启爬虫程序，最后不得不改为这种动态方式。
具体实现方式：
- 服务端渲染
- 懒加载图片资源
- 给对应的资源标签加上标识 ID
- 之后通过 JS 进行延迟请求加载图片
- 请求的图片存在对应的 ID 进行拼接
- 页面只给出缩略图，只有用户点击后才可以看到清晰大图
上述方式的具体实现，我就不在累赘阐述了，大家可以自行搜索。这种方式页面比较低级的处理手段，实际上你可以通过 `NETWORK`
看到所有图片的请求地址：
插个题外话，我们可以以知乎图片地址举例，看看图片地址如何处理：
首页的内容缩略图片地址：<https://pic2.zhimg.com/50/v2-74c7e543e65043a9a8f9606c6d206583_400x224.jpg>
- `https://pic2.zhimg.com`：为固定存在图片资源的仓库
- `50`：表示需要图片大小尺寸
- `v2-74c7e543e6503a9a8f9606c6d206583`：表示图片ID
- `400x224`：表示图片的像素规格。大部分公司的图片都是支持裁图功能的，直接下载原图费时费力，而且大概率用不上。
再如广告位图片地址：<https://pic1.zhimg.com/70/v2-a417121cb82188d8d532f12aa86e7ab8.jpg>
3. 代码混淆
大部分情况下，我们都会进行代码混淆处理。只有部分网站不会做混淆，例如：`中国移动`，`旧版12306`等网站，体现出了自己的代码自信。
其中印象深刻的当属中国移动网站，为什么是它了？因为曾经我登陆该网站的时候，JS报错了。出于程序猿的本能，我就打开了调试工具。一调试我就发现了新大陆。我觉得中国移动代码写的特别好，好在那里？
- 注释清晰，描述详细。
- 代码特别亲民，人人都能看懂。
- BUG 分配到人，都会写上自己的大名，以示负责。
- 可维护强，无论是谁都能在原有基础上修复和新增功能。
不好的地方，有点吹毛求疵，就是没有代码格式化，我们来欣赏下吧。
代码加密解密方法：
网站登陆状态码 API 回传：
顺着这些注释，最后我成功的登陆了网页，报错也没了，更多代码欣赏可以去 `10086` 首页参考观摩。
顺带插一句：
- 代码写出来不是给机器去执行的，而是给人看的。
- 代码易于阅读，可维护性强，应该是我们作为程序猿的基本职业操守。
基本实现：
- 通过 webpack 的打包处理分拆代码
- 常用代码混淆 JS 库如：Javascript-obfuscator，UglifyJS等
- 究极版代码加密：Encode any JavaScript program to Japanese style emoticons (^_^)，JSF**K 等
当然也有反解密的啦！ aadecode - Decode encode-as-aaencode JavaScript program. ['_']
最后，但是也是最重要的一点，这些混淆加密有好也有坏：
- 不利于自己进行生产调试，可能需要对照源码进行处理
- 会加重代码的体积，因为可能掺杂了大量的无用代码
当然有取必有舍，要看自己权衡啦！其他反调试操作，请听下回分解。
- 前端JS代码如何进行反调试操作？（上）
- 前端JS代码如何进行反调试操作？（下）
