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不符合正确的形式的时候就会进行报错提示