Webpack源码泄露到Vue快速入门

前言

1.webpack 源码泄露

1.1漏洞简介

1.2存在泄露的站点

1.3 如何判断是否存在漏洞

方法1:

方法2:

1.4.如何将js.map文件还原为项目文件

1. 4.1查看npm版本

1.4.2 安装reverse-sourcemap

1. 4.3.检查是否安装

1. 4.4 使用reverse-sourcemap进行js.map文件还原操作

1.4.5 进行审计分析

1.4.6 漏洞修复

2.什么是VUE

3.演变过程

4.什么是MVVM

4.1MVC：

4.2MVVM：

4.3 MVVM与MVC最大区别：

5.Vue快速入门

5.1.进行配置

5. 2 在JS代码区域，创建VUE核心对象，进行数据绑定

5.3 编写视图

5.4 效果演示

5.5 页面源码

6. Vue常用指令

6.1 v-bind指令

6.2 v-on指令

6.3 v-if指令

6.4 v-for指令

前言

学习Vue和Webpack也有一段时间了,回顾一下学习中对Vue的学习过程中对笔记总结进行记录,同时将学习过程中的思考和理解加入其中,方便自己进行后续的学习和回顾,当然因为这两个内容都和我之前在进行渗透测试中碰到的一种漏洞类型相关,其中很容易碰到资产是关于使用wepack进行打包的,并且存在js.map泄露,在源码泄露中,常见的前端是通过vue进行编写的,顺便加深一下之前渗透过程的印象.

1.webpack 源码泄露

1.1漏洞简介

webpack是一个JavaScript应用程序的静态资源打包器（module bundler）。它会递归构建一个依赖关系图（dependency graph）,其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。大部分Vue等项目应用会使用webpack进行打包，如果没有正确配置，就会导致项目源码泄露，可能泄露的各种信息如API、加密算法、管理员邮箱、内部功能等等。

1.2存在泄露的站点

这是我之前碰到的一个教育src的存在泄露的站点,通过js.map泄露插件或是,直接使用F12里面的调试,查看是否存在泄露就可以判断了,存在,直接访问下载下来,对源码进行分析和审计漏洞

使用webpack打包应用程序会在网站js同目录下生成 js.map文件

1.3 如何判断是否存在漏洞

方法1:

webpack项目源码在泄漏的情况下，可以在浏览器控制台中的Sources——> Page—> webpack:// 中查看源代码,当然也会存在更改名后的,如下图这个站点就进行了改变,找到app后缀的js文件,然后进行查看是否存在js.map,如果存在代表存在漏洞,当然存在这个有危害,但是不会收的,需要我们进行进一步利用.

方法2:

这也是判断是否存在漏洞的一种方式,根据上面看到的app.js文件,访问这个文件,后拼接.map看是否会下载到文件.当然这种方式还有一个好处,就是方便将其转为本地项目文件,然后方便进行代码审计.

1.4.如何将js.map文件还原为项目文件

1. 4.1查看npm版本

npm -v

1.4.2 安装reverse-sourcemap

 npm install --global reverse-sourcemap

1. 4.3.检查是否安装

reverse-sourcemap -h

1. 4.4 使用reverse-sourcemap进行js.map文件还原操作

这里我习惯通过dos,就直接用命令了,可以在文件目录右键打开cmd,然后进行操作

首先到前面访问后,下载的js.map的位置,然后输入下面的命令

其中把点斜杠后面的换成需要恢复的js.map文件就可以了,注意./不要丢,其实后面的那个./代表是把恢复的webpack打包的文件输出到当前文件,当然也可以自己定义位置进行输出.

reverse-sourcemap --output-dir ./ app.705d925a.js.map

1.4.5 进行审计分析

接下来就是对源码进行,查看是否存在敏感信息,以及通过写脚本对api接口进行收集,然后利用burp进行fuzz查找是否存在未授权了

1.4.6 漏洞修复

在项目路径下修改config/index.js中build对象productionSourceMap: false；
建议删除或禁止访问正式环境中的js.map文件；

2.什么是VUE

Vue 是一套用于构建用户界面的渐进式JavaScript框架，简化dom操作。
基于MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定(理解为数据的同步改变).

简单可以总结：
VUE是一套前端框架，免除了原生JavaScript中的DOM操作，简化书写
VUE基于MVVM（Model-View_ViewModel）思想，实现数据双向绑定
Vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

3.演变过程

html+js+css（2007）
EasyUI+JQuery （2013）
node.js + vue（React，Angular）+ElementUI（iview，antDesign）（2018）

4.什么是MVVM

4.1MVC：

这个是学完JavaWeb后学习的基础知识,在学习了这个后的基础上去理解Vue的MVVM更容易理解一点.

MVC是一种设计模式：
        M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据；
        V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的；
        C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。

4.2MVVM：

        Vue框架中MVVM的M就是后端的数据，V就是节点树，VM就是new出来的那个Vue({})对象
M（Model）：模型层。就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。
        V（View）：视图层。就是展现出来的用户界面。
        VM（ViewModel）：视图模型层。连接view和model的桥梁。因为，Model层中的数据往往是不能直接跟View中的控件一一对应上的，所以，需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

4.3 MVVM与MVC最大区别：

MVVM与MVC的最大区别就是：它实现了View和Model的自动同步(这个就是双向绑定)，也就是当Model的数据改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变数据后该数据对应View层显示会自动改变。

5.Vue快速入门

5.1.进行配置

非常简单,通过新建HTML页面，引入Vue.js文件,这里使用的是cdn引入的js文件,当然也可以访问链接下载到本地进行使用,当然这里是Vue2的入门介绍,Vue3和Vue2的差别还是有的,但是学了Vue2更容易学习Vue3,不然很容易懵,当然大佬除外.

 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

5. 2 在JS代码区域，创建VUE核心对象，进行数据绑定

下面是创建一个Vue对象

其中el定义的是指定Vue要控制的区域,在下面的div中的表单中进行查看,样式很像id选择器

data是设定数据源的地方,里面是编写需要绑定的数据的,详细一点:

在 Vue 的 data 选项中，可以定义各种类型的数据属性来存储组件的状态。数据通常包括基本类型（如字符串、数字、布尔值）、数组、对象，以及这些类型的组合。

new Vue({el:"#app",data(){return{username: "admin"}}             })

5.3 编写视图

基本都是前端的内容,其中v-model是进行双向绑定的,具体作用就是实现了View和Model的自动同步,就是说,你改表单的数据,绑定的数据也会同步改变.

其中{{}}是差值表达式,作用就是将username的值展示出来,便于理解的话就是JavaWeb中el表达式里面的${username}作用是一样的

<!-- 创建视图层 --><div id="app"><input type="text" name="username" v-model="username"><!-- 插值表达式 -->{{username}}</div>

5.4 效果演示

改变输入框里面的值,绑定的数据也会进行同步改变

5.5 页面源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue入门案例</title><!--引入Vue--><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body><!-- 创建视图层 --><div id="app"><input type="text" name="username" v-model="username"><!-- 插值表达式 -->{{username}}</div><script>//  model层// 创建Vue对象new Vue({el:"#app",data(){return{username: "admin"}}             })</script>
</body>
</html>

6. Vue常用指令

Vue指令是带有v-前缀的特殊属性，它们作用于HTML元素，表示它们是Vue提供的特殊属性。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为

v-if指令:条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else指令:条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show指令:条件渲染指令，根据表达式的真假删除和插入元素
v-for指令:列表渲染，遍历容器的元素或者对象的属性
v-bind指令:为HTML标签绑定属性值，如设置 href , css样式等
v-on指令 :为HTML标签绑定事件
v-model指令:在表单元素上创建双向数据绑定

指令示例展示如下,当然根据我个人习惯,我喜欢将介绍给写到注释中

6.1 v-bind指令

v-bind指令:为HTML标签绑定属性值，如设置 href , css样式等

这里就比较容易理解,就是将数据层定义的数据绑定到视图层的标签上了,与直接使用href来说还是方便了很多,比如说使用绑定的同时使用双向绑定的话,就会在输入框中改变值后,所有数据都会同步改变,是不是方便了很多.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue入门案例</title><!--引入Vue--><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body><!-- 创建视图层 --><div id="app"><!-- 插值表达式 -->{{username}}<br>{{url}}<!--绑定指令 v-bind: 简写为 : --><a v-bind:href="url">点我进行跳转: {{url}}</a><p>简写命令</p><a :href="url">点我进行跳转: {{url}}</a><br><p>进行双向绑定</p><input type="text" v-model="url"></div><script>//  model层// 创建Vue对象new Vue({// 指定Vue要控制的区域el:"#app",//数据层data(){return{username: "admin",url: "https://xiaoyunxi.wiki/"}}             })</script>
</body>
</html>

6.2 v-on指令

为HTML标签绑定事件,说通俗来说就是类似于绑定js的方法函数,在Vue对象的methods中定义方法

下面的就是进行一个弹窗进行测试,当然xss漏洞是不会忘记的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue入门案例</title><!--引入Vue--><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body><!-- 创建视图层 --><div id="app"><!--绑定方法指令 v-on: 简写为@click --><input type="button" value="点击我" v-on:click="show1()"><input type="button" value="点击我" @click="show1()"><input type="button" value="点击我" @click="show2()"></div><script>//  model层// 创建Vue对象new Vue({// 指定Vue要控制的区域el:"#app",//设定数据源data(){return{username: "admin",url: "https://xiaoyunxi.wiki/"}},methods:{//定义方法show1(){alert("hello");},show2(){alert("world");}}             })</script>
</body>
</html>

6.3 v-if指令

这里这三种指令一般使用时是配套一起使用的,所以就用示例一起展示了

v-if指令:条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else指令:条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show指令:条件渲染指令，根据表达式的真假删除和插入元素根据条件展示某元素，区别在于切换的是display属性的值

其中v-if指令和v-show指令的区别是,当条件不满足时,前面的是不进行渲染,后面的是隐藏了(hiden)

将下面的代码中data中的showstate改为2,发现

showstate为3时:

showstate为2时:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue入门案例</title><!--引入Vue--><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body><!-- 创建视图层 --><div id="app"><div v-if="state==1">状态值===1</div><div v-if="state==2">状态值===2</div><div v-show="showstate==3">状态值===3</div><input type="text" v-model="state"></div><script>//  model层// 创建Vue对象new Vue({// 指定Vue要控制的区域el:"#app",//设定数据源data(){return{state:2,showstate:3}}            })</script>
</body>
</html>

6.4 v-for指令

列表渲染，遍历容器的元素或者对象的属性

因为在在 Vue 的 data 选项中，可以定义各种类型的数据属性来存储组件的状态。数据通常包括基本类型（如字符串、数字、布尔值）、数组、对象，以及这些类型的组合。因此我们可以通过Vue的for指令将数据进行遍历,然后展示在界面中,当然想进一步利用的话需要借助axios来调用api接口来进一步将数据库的数据进行展示出来,下面仅用数组做示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue入门案例</title><!--引入Vue--><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body><!-- 创建视图层 --><div id="app"><p>遍历数组中的数据并展示,用法和java的增强for(for-each)基本一致</p><div v-for="number in arrays"><li>{{number}}</li></div><p>遍历数组中的下标和数据并展示,和java的增强for(for-each)基本一致,和python的zip()方法基本很像</p><div v-for="(number,i) in arrays"><li>{{i}}:{{number}}</li></div></div><script>//  model层// 创建Vue对象new Vue({// 指定Vue要控制的区域el:"#app",//设定数据源data(){return{arrays: [111,222,333,444,555]}}            })</script>
</body>
</html>