第40天:Web开发-JS应用VueJS框架Vite构建启动打包渲染XSS源码泄露代码审计

#知识点

1、安全开发-VueJS-搭建启动&打包安全

2、安全开发-VueJS-源码泄漏&代码审计

一、Vue搭建+创建项目+启动项目

1、Vue 框架搭建->基于nodejs搭建，安装nodejs即可

参考：https://cn.vuejs.org/

已安装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(）恶意语句中的"<",实体化成&lt，使恶意语句失效

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,接口可抓包（构造文件上传等）->构造文件上传还需学习（这一招很实用，也很看运气）