概述
此文主要阐述前端代码审计，从不同维度讲述存在的安全漏洞，解决大家的疑问。为什么要收集前端信息？
JSP和渗透人员口中的伪静态页面到底是什么？
新型Web的架构又发生了哪些变化？
这篇文章以知识性内容为主，实战性内容略少，但对于大家后期长久的发展非常有必要。
CMS识别产生的前端信息到底有什么用？
一次完整且经典的渗透测试取得成功最重要的一环一定是信息收集，这个环节为我们”一招制敌“做了铺垫。经典的信息收集一方面是将域名带入到CMS识别的系统当中，看看对方使用了什么中间件。但CMS识别经常会返回一些前端框架的信息，例如JQuery、bootstrap、Angular Js、Vue Js。
以FreeBuf平台为例
该平台采用了Vue JS、Ant Design前端框架。
从这一点，我根本不会去测试平台的XSS漏洞，一眼便可看穿。
为什么？且听我细细道来！
XSS漏洞产生的根本原因在于JS脚本在浏览器被识别为前端代码，才会发生解析。
1.什么意思呢，用户在前端页面输入伪造的JS代码
2.前端将用户输入数据当作参数传给后台
3.后台对参数进行业务逻辑处理存储到数据库
4.后台读取数据库内容返回给前端展示
5.浏览器渲染数据
这样的一套流程，导致问题在最后一环JS代码被浏览器解析。但是Vue Js这个前端框架的产生避免了最后一环产生的问题，Vue Js采用预编译的手段，使用插值表达式也就是"{{}}"去渲染后台返回的值时，不会解析内容，只会展示内容。
Vue Js提供的这个函数百分之百的解决了XSS漏洞。从根本上理解了XSS产生的原因后，这就是为什么XSS漏洞不能拿到系统shell，只能在浏览器”胡作非为“。因为JS再厉害也依赖于浏览器，但是，某种”沙箱逃逸“技术我们此处不做阐述。
可是新的问题又出现了，富文本编辑器怎么办？
1.富文本编辑器给用户使用，本质就是使用CSS和H5标签对用户的内容进行修饰，然后将带有前端标签的内容发送给后台
2.后台对文本进行业务逻辑处理存储到数据库
3.后台读取数据库内容返回给前端展示
4.Vue JS使用{{}}插值表达式加载
5.惊人的问题出现了，这些标签没有被解析，用户制造的漂亮的页面没有了
Vue Js发现了这种问题，又提供了"v-html"这个属性来渲染数据，解析标签。所以在存在富文本编辑器的地方我们可以去尝试XSS，FreeBuf平台的文章处我没敢测试，你们感兴趣可以试试。
防御
只要仔细阅读上文分析的XSS漏洞过程，你应该善于从过程中抓到切入点
1.Vue JS 在最后一步浏览器渲染解决此问题
2.可以在后台拿到前端参数这一步作为切入点，使用正则表达式匹配 "
上文为前端审计一眼看穿是否存在XSS技巧。
前端码审计信息泄露
前端代码展示在浏览器，可以被用户查看源码。F12 可对前端源码进行查看，这里的源码我们能发现什么。
前端代码的CDN绕过
某些网站存在cdn，各地的虚拟IP让我们后续的渗透难上加难，我查询了很多CDN溯源方法都没有提到一种，让我不禁疑惑。在前后端分离的Web项目中，前后端唯一交互的手段则是“Ajax”异步请求技术，前端需要指定请求的后端地址以便寻找后端接口，做出请求。我们直接找到前端代码，翻到前端请求后端代码的Ajax的地方无疑是对对方服务器地址IP的一种暴露，直接绕过CDN，这么有效的办法。
但是此方法不是一定可行的，因为有些经验老道的开发会给后台服务器配置一个 域名进行访问。
前端代码的签名算法绕过
因为有些后台接口api不想被其他人进行调用，想只给特定的前端进行调用，所以出现了签名算法这个东西。前端请求后台时会多带上一个参数，这个参数和后台约定俗称的规定，只有符合这种规定，才允许被调用。代码如下：
继续研究Freebuf平台，这是平台某个接口，cookie中携带一个参数，Hm_1pvt_xxxxx这个参数典型的签名算法，你试试自己直接代码调用肯定调用不通，不符合这个签名算法规则的一定不会调用成功。
但我们分析其中的逻辑
-
前端生成规定的参数
-
传送给后台做校验，是否满足规则
停，不对啊。前端生成规则参数，前端我们可以查看源码，懂的都懂。
结尾
这篇文章讲述了前端的信息收集到底起什么作用，从而引起的XSS原理剖析，签名算法认证破解，CDN绕过。实战性偏弱，原理性偏强。这为我们后续五分钟审计埋下伏笔，希望你们能够跟着笔者一起起学习、一起加油~~~感谢支持。
