第四十天(Vue)
1、Vue 搭建
参考：Vue.js - 渐进式 JavaScript 框架 | Vue.js
已安装18.3或更高版本的Node.js
2、Vue 创建
vite创建：npm create vite@latest
创建vue：npm create vue@latest
在webstrom中打开一个文件夹，，然后打开终端
这样就在终端中启动了当前文件
终端中输入命令 npm create vue@latest 直接回车即可 ，第一个是设置项目名称，可以自定义也可以直接用默认的
开发的项目一般是放在src 里面
3、Vue 启动
cd
安装依赖：npm install
开发启动：npm run dev dev 是已开发者模式启动项目 测试时用的
打包构建：npm run build 上线时就要打包构建了
先用cd 进到创建的文件目录下 ，再安装依赖
再启动项目
复制网址打开查看
分析显示页面是加载哪个文件：
首先查看目录下的index.html 文件 ，发现引用了src下的main 文件
来到这里后看到是来自一个App.vue 文件
来到app.vue 下，页面中显示的 you did it! 就来自这里， 又看到引用了其他两个文件，那么就打开看看
果然在里面看到了显示的内容 ，
另一个vue ，就显示页面右边的内容了
打包构建 命令 npm run build
这里就会自动创建一个dist文件夹放置打包好的文件了
直接用浏览器打开访问这个index.html
这样访问是看不到内容的，要将打包好的文件放到phpstudy 搭建的网站中访问才行
将打包文件放进去
这样就能正常打开了
构建文件，通过vite 进行打包 ，这个是vue自带的，也可以导入 webpack 来打包
在vite打包文件添加一段代码后，再重新打包 加的这个代码就会生成映射文件 (.map) ，造成源码泄露
打包
打包好的文件下就有又一个.map 文件
打开网址访问 ，插件工具就会有.map 文件，下载之后还原即可
如果插件不行，就直接将这个文件的地址复制后在后面加上.map
打开后鼠标右键点击文件另存为，然后将文件丢到还原的工具中
来到shuji.cmd 文件目录下将刚刚的map文件复制进去，然后右键打开命令终端，输入，cmd ，再输入shuji ...
这个是还原好的文件，源码了
4、Vue 项目
网上找几个Vue开发的源码项目，了解如何启动，目录架构，代码逻辑等
源码_网站源码_源码下载_源码之家 - 站长源码
用vscode打开，然后点击... 启动终端 ，
在vueproject 目录下输入 npm install ，安装依赖
安装好后启动 ，输入 npm run dev
成功启动
这里还不可以用PHP study打开，因为phpstudy不认识 indx.html 中的这句，要先打包构建好之后才能成功打开
构建 好后，项目就会有一个dist目录，这个是打包好的目录，现在用PHP study启动试试
成功启动
源码逻辑：
src/router 下的文件是写的路由关系 访问什么地址指向哪个文件
system : 一些后台的东西
views ： 指向文件位置
分析启动模式还有 打包时的devtool值
打包时看到时build/build.js ,那么就直接找到它去看
然后点config的时候跳到index.js里面，看到打包模式 dev 下面还有build
buil 打包时还会有一个debtool 值 ，这个就是和之前webpack那个一样，会导致源码泄露
刚才打包的就会有这个map文件
这个是设置启动模式 的
将模式改成生产模式 production 启动 查看浏览器源码中是否还会有 webpack:// 因为这里没有配置 pro的启动模式，所以弄不了
因为dev 模式下也有devtool 值，所以要先注释掉，防止干扰
改好后依旧输入 npm run dev 启动成功后打开f12查看
这里就没有看到webpack:// 了 也没有 map ；说明dev文件就是配置启动模式的
将模式改成pro 后再将devtool值注释掉，用打包构建，查看是否还会有webpack:// 和 map 文件泄露
这里就什么都没有泄露了
在将pro模式不变(测试了一下改成dev也不会泄露) 将devtool值 的注释去掉，用打包构建，查看是否还会有webpack:// 和 map 文件泄露
这里不但有webpack:// 还有 map
经测试：
用npm run dev 启动时，如果devtool值注释掉也不会有webpack:// 不注释时就会有webpack:// 但不会有map文件
用npm run dev 打包启动时 只和devtool值有关，注释掉就什么都没有，不注释就 webpack:// 和map文件都有
5、安全例子
搭建：
npm create vite@latest
cd vue-xss-demo
npm install
修改：
<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>
<style>
\#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
margin-top: 60px;
}
</style>
启动：npm run dev
测试：
<img src="x" onerror="alert('XSS')" />
修复：使用文本插值（{{}}）代替 v-html
其他：安全 | Vue.js
这里直接在演示场中测试 将代码复制进去，然后在右侧输入框中输入测试代码
这里使用v-html 接收参数，再显示出来
这里换成{{}} 这个 安全写法再测试一下 输入测试代码就没有用了，只会输出，不会执行js代码了
鼠标右键点击输出的内容，点击检查 ；然后再右键选择编辑为HTML
可以看到尖括号被实体化了
2、WebPack+VueJS源码泄露
// vue.config.js
export default defineConfig({
plugins: [vue()],
build: {
sourcemap: true, // 如果需要生成 Source Map
},
})
npm run build
案例文章：
前端VUE渗透测试的一些技巧和思路
Vue Vben Admin硬编码漏洞