Vue框架的使用 搭建打包 Vue的安全问题（Xss，源码泄露）

前言

什么是Vue？ Vue是轻量级的js框架 可以帮助我们一键构造网站，打包app程序等

Vue的基本使用

1、构造框架并启用

新建一个 目录

使用终端切换到当前的目录

创建vue项目 

第一个弹出使用语法我们选择是  剩下的全选择否  

发现创建好了

接着进行初始化  

切换到目录下

安装依赖   如果觉得慢可以进行配置本地的源  或者淘宝的 cnpm

安装完成 之后启用

以开发者模式进行运行

搭建好了  我们以开发者模式进行的所以会有源码泄露问题   

我们进行看看vue的路由

页面有个you did it  全局找一下

首页文件就是这个src/app.vue

还有2个库的导入  

2、使用phpstudy进行启用

如果我们直接使用phpstudy进行启动的时候 会不识别vue   所以我们需要进行打包（类似于上节课的webpack打包器的功能）

打包文件在  dist目录下 我们直接使用小皮面板查看就行

Vue的安全问题（源码泄露）

修改保存之后重新进行打包即可

或者是手动进行找   复制路径  直接访问就能下载了

下载js文件之后我们进行还原

实战之通过手段拿到Vue源码如何进行进下一步挖掘

拿到源码.zip  进行解压   

使用以上的2中的一种进行打开    

Xss问题

<template>
  <div>
    <h1>XSS 漏洞演示</h1>
    <input v-model="userInput" placeholder="输入你的内容" />
    <button @click="showContent">显示内容</button>
    <div v-html="displayContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInput: '', // 用户输入
      displayContent: '' // 显示的内容
    };
  },
  methods: {
    showContent() {
      // 直接将用户输入的内容渲染到页面
      this.displayContent = this.userInput;
    }
  }
};
</script>

payload:<img src='xxx' οnerrοr="javascript:alert(1)">   这个Xss姿势利用的就是当 src不符合正确的形式的时候就会进行报错提示