js逆向 webpack_JavaScript 逆向爬取实战

最新推荐文章于 2024-09-27 19:58:47 发布
最新推荐文章于 2024-09-27 19:58:47 发布
阅读量2.2k 收藏 16
点赞数 6
文章标签： js逆向 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39980129/article/details/112447204
版权
本文通过一个实际案例，详细介绍了如何进行JavaScript逆向，特别是针对使用Webpack和javascript-obfuscator混淆的网站。文章展示了如何寻找Ajax入口，分析加密逻辑，最终实现Python爬取加密列表页的过程。主要内容包括：列表页Ajax接口和加密逻辑的寻找，以及如何在遇到加密参数时构造请求。
摘要由CSDN通过智能技术生成

↑ 关注 + 星标 ~ 有趣的不像个技术号，后台回复【大礼包】送你2TPython自学资料

好消息：Python学习交流群，已经建立，猛戳加入

519b876f404b8102def7e3b8f490792b.png
“

阅读本文大概需要 25 分钟。

”

在上一节总结一些网站加密和混淆技术中，我们介绍了网页防护技术，包括接口加密和 JavaScript 压缩、加密和混淆。这就引出了一个问题，如果我们碰到了这样的网站，那该怎么去分析和爬取呢？

本节我们就通过一个案例来介绍一下这种网站的分析思路，本节介绍的这个案例网站不仅在 API 接口层有加密，而且前端 JavaScript 也带有压缩和混淆，其前端压缩打包工具是使用了现在流行的 Webpack，混淆工具是使用了 javascript-obfuscator，这二者结合结合起来，前端的代码会变得难以阅读和分析。

如果我们不使用 Selenium 或 Pyppeteer 等工具来模拟浏览器的形式爬取的话，要想直接从接口层面上获取数据，基本上我们就要一点点调试分析 JavaScript 的调用逻辑、堆栈调用关系来整个弄清楚网站加密的实现方法了，我们可以称之为这个过程叫 JavaScript 逆向。这些接口的加密参数往往都是一些加密算法或编码的组合，完全搞明白其中的逻辑之后，我们就能把这个算法用 Python 模拟出来，从而实现接口的请求了。

案例介绍

案例的地址为：https://dynamic6.scrape.cuiqingcai.com/，页面如图所示。

15e8ac193ef23279db3aee75c6aa45f3.png

初看之下并没有什么特殊的，但仔细观察可以发现其 Ajax 请求接口和每部电影的 URL 都包含了加密参数。

比如我们点击任意一部电影，观察一下 URL 的变化，如图所示。

b37d809dbf42a555d917b8936da6d7f4.png

这里我们可以看到详情页的 URL 和包含了一个长字符串，看似是一个 Base64 编码的内容。

那么接下来直接看看 Ajax 的请求，我们从列表页的第 1 页到第 10 页依次点一下，观察一下 Ajax 请求是怎样的，如图所示。

6bfce3a678bde9e387231d696357e5a3.png

可以看到 Ajax 接口的 URL 里面多了一个 token，而且不同的页码这个 token 还是不一样的，这个 token 同样看似是一个 Base64 编码的字符串。

另外更困难的是，这个接口还是有时效性的，如果我们把 Ajax 接口 URL 直接复制下来，短期内是可以访问的，但是过段时间之后就无法访问了，会直接返回 401 状态码。

接下来我们再看下列表页的返回结果，比如我们打开第一个请求，看看第一部电影数据的返回结果，如图所示。

8cb1663124d6fa7f3b9b8227031d2a29.png

这里我们把看似是第一部电影的返回结果全展开了，但是刚才我们观察到第一步电影的 URL 的链接却为 https://dynamic6.scrape.cuiqingcai.com/detail/ZWYzNCN0ZXVxMGJ0dWEjKC01N3cxcTVvNS0takA5OHh5Z2ltbHlmeHMqLSFpLTAtbWIx，看起来是 Base64 编码，我们解码一下，结果为 ef34#teuq0btua#(-57w1q5o5--j@98xygimlyfxs*-!i-0-mb1，但是看起来似乎还是毫无规律，这个解码后的结果又是怎么来的呢？返回结果里面也并不包含这个字符串，那这又是怎么构造的呢？

再然后，这仅仅是某一个详情页页面的 URL，其真实数据是通过 Ajax 加载的，那么 Ajax 请求又是怎样的呢，我们再观察下，如图所示。

648037da49ef417e5ece409853b3f399.png 好，这里我们发现其 A jax 接口除了包含刚才所说的 URL 中携带的字符串，又多了一个 token，同样也是类似 Base64 编码的内容。

那么总结下来这个网站就有如下特点：

•列表页的 Ajax 接口参数带有加密的 token•详情页的 URL 带有加密 id•详情页的 Ajax 接口参数带有加密 id 和加密 token

那如果我们要想通过接口的形式来爬取，必须要把这些加密 id 和 token 构造出来才行，而且必须要一步步来，首先我们要构造出列表页 Ajax 接口的 token 参数，然后才能获取每部电影的数据信息，然后根据数据信息构造出加密 id 和 token。

OK，那到现在为止我们就知道了这个网站接口的加密情况了，我们下一步就是去找这个加密实现逻辑了。

由于是网页，所以其加密逻辑一定藏在前端代码里面，但上节课我们也说了，前端为了保护其接口加密逻辑不被轻易分析出来，会采取压缩、混淆的一些方式来加大分析的难度。

好，那么我们 就来看看这个网站的源代码和 JavaScript 文件是怎样的吧。

首先看看网站源代码，我们在网站上点击右键，弹出选项菜单，然后点击「查看源代码」，可以看到结果如图所示。<

最低0.47元/天 解锁文章
weixin_39980129
关注
js逆向webpack篇-某电商网站-拼xx
博客
12-01 539
本篇文章仅讲如何定位该加密参数以及如何抠该加密参数，该参数涉及的补环境部分不作讲解
Python爬虫，JS逆向之 webpack 打包站点原理与实战
热门推荐
梦想橡皮擦，专栏100例写作模式先行者，现象级专栏 《Python 爬虫 100 例》作者、《滚雪球学 Python 专栏》原创者
05-23 2万+
webpack 原理说明扣JS代码 webpack 是前端程序员用来进行打包JS的技术，打包之后的代码特征非常明显，例如下述代码。
JS逆向之Webpack(一)
Wxc的Blog
03-09 6286
JS逆向之Webpack 今天我们来学习一下js逆向之扣webpack代码 网址如下 https://www.gm99.com/ 需要逆向的值： 登录请求的password 首先肯定不是md5或者sha1或者des这类的，看上去想rsa，因为可以看到输入相同的密码加密后的结果不一样，好了那我们就开始吧 找到加密点 这是一个xhr请求，那我们直接看方法栈，很容易定位到时在n.login这里做了手脚，点进去看看 然后已经可以发现加密的地方了 然后我们下个断点，再提交一次看看 可以看到是对raw pass
js逆向——webpack扣取代码
最新发布
Tandy12356_的博客
09-27 1316
介绍了webpack扣取代码的通杀流程
JavaScript 逆向爬取实战
静觅
05-01 6505
“ 阅读本文大概需要 25分钟。 ”在上一节总结一些网站加密和混淆技术中，我们介绍了网页防护技术，包括接口加密和 JavaScript 压缩、加密和混淆。这就引出了一个问题，如果我们碰...
js逆向——webpack扣法
sin_0119的博客
03-19 5211
是个静态模块打包工具，目的是为了让前端工程师写的前端代码变成浏览器可以识别的代码，并且可以达到前端项目的模块化，也就是如何更高效地管理和维护项目中的每一个资源。这是因为加载器函数实际上是在你打开网页的时候就已经加载到内存中了，而只有当我们进行登录这一具体操作时才会执行调用这个函数，所以这时是找不到加载器的。直接把大对象给传进去了，而是在另一个独立的文件里面，那么加载器又是如何对另一份独立的文件中的模块进行加载的呢?但是，当断到我们想要的目标函数时再去定位n(“”)函数哪里是显示不出来的，如图。
爬虫：JS逆向之Webpack-乾坤大挪移
gwb0516的专栏
11-21 3201
通俗易懂webpack逆向的教程，方便初学者可以对照着一步一步验证调试。
JS逆向 webpack解密
lmttlw的博客
11-18 3935
JS webpack解密 ，这个网站很坑，那个验证字段搜不到，XHR断点也断不到，就很奇怪，不过竟然我敢写这篇文章，就代表我是过了的。
js逆向 webpack_Javascript逆向分析前端加密接口
weixin_42517807的博客
12-23 1134
前言在平时，我们前端日常工作中，几乎不会接触到去逆向分析 javascript ，因为通常会使用 Webpack ， Parcel 等打包工具来完成前端工程化。去看自己的工程即可。但是，如果反过来对自己感兴趣的网站进行学习和抓取，那么就会导致这项技能是必会的，本文带领大家了解其中逆向的一些技巧和分析思路。准备工作首先，对大家来说是有一些门槛的。你首先要掌握以下的知识，才能一步一步听懂我说的东西：c...
js 逆向实战之webpack 改写
01-12
"JS 逆向实战之 Webpack 改写" 在本节中，我们将探讨 JS 逆向实战之 Webpack 改写的技术要点。Webpack 是一个流行的 JavaScript 模块加载器和打包工具，广泛应用于前端开发中。通过对 Webpack 的逆向工程和改写，...
JS逆向实战19——通杀webpack逆向
有什么问题回复不及时，可以私聊我。也可以加我的星球：知识爬行者
06-30 3464
声明 本文章中所有内容仅供学习交流，抓包内容、敏感网址、数据接口均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请联系我立即删除！ 网站 aHR0cHM6Ly9mb2dhbmctbS5pdG91Y2h0di5jbi9tZWRpYURldGFpbC8zODc1Nw== aHR0cHM6Ly93d3cuZ205OS5jb20v webpack是什么？...
JS逆向---webpack专题讲解
m0_52336378的博客
08-04 2748
webpack是一个现代的前端打包工具，它的主要作用是将多个模块打包成一个或多个静态资源文件。通过配置webpack，我们可以定义入口文件和出口文件，使用插件和加载器来处理不同类型的文件，以及设置开发模式和使用webpack开发服务器。[1][2]使用webpack可以实现模块化开发，提高前端项目的开发效率和性能。对于webpack的配置项，我们需要了解入口和出口的设置，插件和加载器的使用，以及开发模式和webpack开发服务器的运作过程。声明。
JS逆向——webpack实战
Fleehom的博客
09-27 8068
乍一看加密很简单，但是这只是body的值，而l方法的断点后续还没运行（即y.encrypt(o)还未执行，这是生成signature值的过程），我们让该方法执行完就会发现signture的值，如图。对于这种情况，根据加密参数格式以及长度，大佬就会想到常见的非对称加密，如RSA、DES、AES、DSA等等，然后就可以通过关键词搜索、DOM断点、hook方法、启动器启动等方式寻找入口，当然，我们可以根据某种方法会遇到的问题，去选择其他捷径方法作为最优解（比如异步操作导致跟栈困难等问题）。
JavaScript逆向爬虫
Liu_Bruce的博客
04-05 1814
逆向JavaScript代码，找出其中的加密逻辑，直接实现该加密逻辑进行爬取。如果加密逻辑过于复杂，我们也可以找出一些关键入口，从而实现对加密逻辑的单独模拟执行和数据爬取。常用的JavaScript逆向技巧，包括浏览器工具的使用、Hook技术、AST技术、特殊混淆技术的处理、WebAssembly技术的处理。掌握这些技术，可以更从容的应对JavaScript防护技术。
js逆向 webpack_一：webpack的基础使用
weixin_36434922的博客
12-23 606
一：webpack是什么webpack是模块化管理工具，使用webpack可以对模块进行压缩、预处理、按需打包、按需加载等。webpack的核心是一个用于现代JavaScript应用程序的静态模块打包器。当webpack处理您的应用程序时，它会在内部构建一个依赖关系图，该图可以映射项目需要的每个模块并生成一个或多个包。二：webpack有哪些重要特征1.插件化：webpack本身非常灵活，提供了...
js逆向webpack
weixin_46468720的博客
10-19 1505
webpack遇到其它站的代码，扣加载器的时候，例如下图，除了function n(t){}这个函数，其它代码都删掉，判断标准是它带call或者apply。然后简化下加载器，对照着上面webpack最简单的样子，简化。案例：例如定位到的方法在一个webpackjs文件中。1、找到加载器（加载模块的方法）扣代码会遇到的基本2种形式。然后把他的模块加载器扣下来。3、构造一个自执行方法。
js逆向webpack方法
11-15
为了避免违反规则3，我将只介绍如何使用webpack进行打包和优化，而不会涉及逆向webpack的方法。 Webpack是一个现代JavaScript应用程序的静态模块打包器。将应用程序的所有依赖项视为模块，并将它们打包成一个或多个静态资源。Webpack还可以通过各种插件和加载器来优化和转换这些资源。 以下是使用Webpack进行打包和优化的一些方法： 1.安装Webpack和Webpack CLI 在使用Webpack之前，需要先全局安装Webpack CLI脚手架，并在项目中安装Webpack。 ```shell npm install webpack-cli -g npm install webpack --save-dev ``` 2.创建Webpack配置文件 在项目根目录下创建一个名为webpack.config.js的文件，并在其中定义Webpack的配置选项。 ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; ``` 上述配置文件指定了入口文件为src/index.js，输出文件为dist/bundle.js。 3.使用Webpack加载器 Webpack加载器可以将各种类型的文件转换为JavaScript模块，以便Webpack可以将它们打包到应用程序中。例如，使用Babel加载器可以将ES6代码转换为ES5代码。 ```javascript module.exports = { // ... module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } }; ``` 上述配置文件指定了使用Babel加载器来转换所有.js文件。 4.使用Webpack插件 Webpack插件可以用于优化和转换打包后的代码。例如，使用UglifyJS插件可以压缩JavaScript代码。 ```javascript const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = { // ... plugins: [ new UglifyJSPlugin() ] }; ``` 上述配置文件指定了使用UglifyJS插件来压缩打包后的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值