【逆向基础】JS逆向入门:小白也可以看懂

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
简介: 【逆向基础】JS逆向入门:小白也可以看懂

前言

出于对数据安全的考虑,现代化的网站/APP通常会对数据接口做加密处理。而分析这些接口的加密算法并实现模拟调用的过程就叫做「逆向」。通常会对数据接口做加密处理。而分析这些接口的加密算法并实现模拟调用的过程就叫做「逆向」。逆向对于爬虫工程师来说是一个永远绕不开的话题,也逐渐成为各企业招聘时,JD 中的一个必备技能要求。

本文就以某在线翻译网站接口加密参数分析为案例,分享一下网页爬虫的逆向原理、分析思路和分析过程。


一、接口抓包

首先,我们访问这个网站,在左侧文本框中输入要翻译的文字:


可以看到,输入一个“你好”后,不到一秒钟的时间,右侧文本框中就显示对应的英文翻译结果。我们思考一下实现原理,首先这个事情不可能是纯粹放在客户端实现(这意味着网页临时文件中要存放一个庞大的词典库,显然不现实),那么它一定是由客户端向服务端发起了一个网络请求,服务端处理完成后再将结果返回给客户端,最后渲染到页面上。


既然过程中存在网络请求,就可以通过抓包工具抓取对应请求接口,看看具体的接口地址、请求参数以及返回结果。这几样东西明确了,不就意味着可以通过调取这个翻译接口来自己实现一个翻译功能吗?所以网站并不会那么轻易地就让任何人把这个接口调通。

cec3d46782211b45ef6839cfa38c1edc_098061ba7fca4e57abcc11a819d59f8f.png

打开浏览器开发者工具,切换到「Network」选项卡,确实捕获到了一个接口请求:

可以看到,这是一个 POST 请求,请求头中包含17个参数(无关紧要,这里不做展开),请求参数体中的 i 就是我们刚刚在页面上输入的文本内容“你好”。仔细分析一下请求体中的每个参数,大部分参数都可以直接写死,或者是时间戳,但其中的 sign 参数是我们比较疑惑的。如果模拟调用一下这个接口,就会发现,sign 是这个接口的必传参数,且必须要传正确的值。显然,这个 sign 就是该网站用来防止第三方程序调用的加密措施。


二、逆向分析

通过上面的接口抓包,我们已经有了一个明确的目标,就是分析出 sign 参数的加密算法,然后自己实现这个算法进行参数生成和接口调用。有了目标之后,我们先思考一下,这个参数到底是什么时候以及在哪里被生成的呢?刚刚我们看到,这是接口请求体中的一个参数,所以它一定是在请求发起前在客户端生成的,而网页前端使用的交互逻辑代码是 Javascript,也就是说,它的加密算法很可能就在网页资源文件中的 JS 代码里,关键是能不能把它找出来。


我们先来试试关键词检索的方式。打开浏览器开发者工具,切换到「Sources」选项卡,在底部搜索框中输入“sign”,会有一个 JS 文件的搜索结果。进入这个文件里边再搜索下,会匹配到 15 条结果,浏览一遍这 15 条结果,就会发现下面这行“疑似加密算法”的代码,因为它用到了 MD5 方法,这是一种被广泛使用的加密算法。

ec3123b2b514dda0c82706949789ab93_b01126da36594d88aeadb7b3d0c2d778.png 接下来,我们就得验证一下,它到底是不是我们的目标加密算法,验证的方式就是看看这行代码计算的结果,与接口发起请求时传的「sign」参数值是否一致。想看这行代码的执行结果,可以给它打上断点,然后再去页面上输入一次文本进行翻译。如果发起请求前执行到了这行代码,程序就会暂停在这行代码的位置,这时候就能看到执行结果了。

629e9da2be6f7a385167258cff4020f4_878b18d1dd9c4202bfa501058b7eb25a.png

底部 「Console」是控制台,这里可以执行在当前环境下的 JS 代码,我们直接输入那行“疑似加密算法”的代码在这里执行,得到的值为 “b9f9df08d53c54eeef463dee79459ea1” 我们先将这个结果记录下来。

由于加密算法里还用到了 e 和 i 参数,我们也顺便打印了一下这两个值,他们分别是「你好」和「16197727689967」(看起来像时间戳的一长串数字,待会再讲)。

现在我们让程序继续执行,再切回「Network」选项卡,看看接口传参的 sign 是什么值:

可以看到,接口参数中的 sign 值和我们刚刚记录的结果是一致的,且其中的 salt 参数,也跟刚刚打印的 i 的值一致。


由于 salt 也是接口中的必要参数,且现在看来它还得作为 sign 的加密参数之一,那就也得弄清楚 salt 的生成方式。从表面看,它很像是时间戳,但时间戳通常要么是10位(精确到秒),要么是13位(精确到毫秒),但它却有 14 位。所以它可能是基于时间戳还做了什么修改,我们回到刚刚加密算法的代码位置,定位到 i 参数,往上追溯,会发现 i 的生成方法,就在代码的第 8380 行和 8381 行上。

4478aebf2b4e5b98d93284ca59d88b61_1a647c38e69242d78723eae730838b9b.png

很明显,它是用当前时间戳(13位),和一个 0-9 的随机数,拼接而成。


至此,我们就能得到 sign 的加密算法为: md5(“fanyideskweb” + e + i + “Tbh5E8=q6U3EXe+&L[4c@”) , 其中首尾两个是写死的字符串,e 为要翻译的文本内容,i 为时间戳+一位 0 到 9 的随机数。


3. 接口验证

清楚加密算法和逻辑后,剩下的事情就简单了。写一个 Python 程序模拟调用一下接口即可。

27cdfc060d4c2b798b09cb884396bc92_05250f8dec0e4114ba55ff1f00727a7b.png

可以看到,接口成功调通返回正确结果,不仅能翻译单词,还能翻译句子,甚至还能自动检测语言翻译为中文,相当于网站中在线翻译支持的功能,这里都能支持了。


总结

本文通过一个案例分享了爬虫逆向的原理和思路,由于案例比较简单,仅通过在网页 JS 资源文件里直接搜索关键词就能找到对应的加密算法。而大部分时候其实不会这么顺利,因为网站既然已经对参数做了加密,就会想办法把加密算法也“藏起来”,比如加入大量「程序执行时确实有调用,却无任何实际意义的代码」、「将变量名和方法名作混淆后降低可读性」等,以此来增加爬虫工程师调试分析的难度和时间成本。


原文链接:https://blog.csdn.net/liaozp88/article/details/131029801

相关文章
|
1月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
239 2
|
11天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
11天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
18 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
19天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
52 10
|
17天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
1月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
22 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
425 1
|
1月前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。