WEB前端的渲染艺术

一、背景介绍

从众测中屡次重复忽略，却不明如何做到又快又细的手法；在大佬的阴影下成长，走出了第二次瓶颈，从而悟到的前端渗透进阶技巧。

二、前端渲染

1.条件成立

JS流程控制语句也就是做判断(if语句)，if语句是基于条件成立才执行相应代码时使用的语句。

示例：

2.响应包替换关键字

引用浏览器JS反调试与绕过可以直接替换响应包中逻辑来达到条件成立，copy楼兰师傅的响应包替换关键字细节。

BurpSuite - Proxy - Options - Match and Replace

将debugger关键字设置为console.log('debugger')

这个时候我们再打开开发者工具时，便可以看到没有进入暂停页面

三、案例分析

前端渲染技巧需满足3个条件

1、webpack前端项目构建框架包含所有前端功能

2、不是模板渲染设计方式

3、条件成立

登录框站点通常我们渗透都会采用教科书方式爆破与翻阅JS获取api进行测试，那么存在一个痛点就是达不到又快又细的情况，却常常因为找不到POST参数而痛失漏洞。

1、webpack前端项目构建框架包含所有前端功能判断

存在app.js,chunk.js或翻越代码方式确认，也可以使用前端插件进行判断Vue.js devtools,Augury,React Developer Tools等谷歌插件

2、不是模板渲染设计方式

判断它是否模板渲染方式根据前端暴露出来的信息去判断，如访问aspx输出html页面内容大概率就是模板引擎渲染，所以我们没办法欺骗前端来达到我们要看的内容，因为无法欺骗后端逻辑。

3、条件成立

通过压缩混淆的JS代码进行条件成立，有2种方式

3.1 伪造api返回包

那么达到前面说的需webpack前端项目构建框架包含所有前端功能，不是模板渲染设计方式，接下来就是满足第三点条件成立。

确定登录所需条件,根据代码块进行分析所需的条件，从代码中得到逻辑，请求接口后返回包需要返回{"data":{"AccessToken":"1"}}才能条件成立，条件成立执行e()

当第一个条件成立满足后测试发现请求了info获取信息的接口

继续追踪接口进行分析，从代码块中得到的逻辑，请求接口后返回包需要返回{"data":{"UserRole":"1","UserName":"admin","RoleName":"system"}}，才能条件成立，条件成立执行e()

当所有条件成立那么就达成了前端渲染的技巧，利用这样的技巧可以达到又快又细的标准也解决了寻找post参数的烦恼。

3.2 篡改js代码

没找到案例简单的做个示例:

当在前端渲染的过程中，重复的逻辑一直使你的需要去达到更多的条件成立需求，那么不采用pretty print，直接搜索出对应的代码进行replace为空就能减少条件成立的需求。