#知识点
1、安全开发-VueJS-搭建启动&打包安全
2、安全开发-VueJS-源码泄漏&代码审计
一、Vue搭建+创建项目+启动项目
1、Vue 框架搭建->基于nodejs搭建，安装nodejs即可
已安装18.3或更高版本的Node.js
2、Vue 创建
创建vue：npm create vue@latest
vite创建：npm create vite@latest
3、Vue 启动（两种启动方式）->开发启动+打包构建启动
cd <your-project-name>
①安装依赖：npm install ->(不安装依赖或库，运行时容易报错）
②开发启动：npm run dev
③打包构建启动：npm run build （这种启动方式应用于"生产环境"的网站搭建，build打包构建后，还需依赖phpstudy中的中间件来启动网站）
二、Vue 项目实战搭建
网上找几个Vue开发的源码项目（站长之家寻找），了解如何启动，目录架构，代码逻辑等
三、Vue框架安全问题
vue框架演练场实验xss漏洞->文本插值（{{}}）代替 v-html
1、使用文本插值（{{}}）->不会产生xss,它会将<script>alert(）恶意语句中的"<",实体化成<，使恶意语句失效
2、使用v-html->产生xss,使恶意语句生效->因此该关键词成为vue框架代码审计的关注点
测试代码：
<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>
测试恶意语句：<img src="x" οnerrοr="alert('XSS')" />
修复：使用文本插值（{{}}）代替 v-html =>恶意语句失效
其他：https://cn.vuejs.org/guide/best-practices/security
四、WebPack打包器+vite打包器+VueJS源码泄露
vite打包器（vue框架中的打包，效果和webpack相似），如果配置不但，如开发，生产模式配置不当，devtool配置不当，都会造成源码泄露或map映射文件泄露
// vue.config.js这是vue框架里面的配置文件和webpack.config.js类似，有时为vite.config.js;作用都
差不多->他们里面的sourcemap如果配置不得当，就会泄露map映射文件xx.js.map，从而泄露源码
export default defineConfig({
plugins: vue(),
build: {
sourcemap: true, // 如果需要生成 Source Map //生成map映射文件，泄露源码
},
})
npm run build //打包构建
五、案例文章：
https://mp.weixin.qq.com/s/30XIDREyo0Ose4v8Aa9g2w
https://mp.weixin.qq.com/s/4KgOZcWUnvor_GfxsMlInA
六、总结
a.学会实战项目的Vue框架的搭建，两种启动(开发启动+打包构建利用中间件启动），了解如何启动，目录架构，代码逻辑
b.文本插值（{{}}）代替 v-html造成的Vue框架的xss漏洞
c.会使用Vue框架中的vite打包器+build进行构建
d.测试思路：
①前端F12->找map映射文件，webpack源码泄露->源码中找账密、url、接口等信息，看有没有v-html关键字(判断是否存在xss漏洞）
②前端F12->翻各种文件，尤其是js文件，找是否有泄露的账密，接口、url,接口可抓包（构造文件上传等）->构造文件上传还需学习（这一招很实用，也很看运气）