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

发布于：2025-03-30 ⋅ 阅读:(27) ⋅ 点赞:(0)

知识点：
1、安全开发-VueJS-搭建启动&打包安全
2、安全开发-VueJS-源码泄漏&代码审计

演示案例-WEB开发-VueJS-构建打包&源码泄漏&代码审计

1、Vue 搭建

官网参考：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

真实环境下，网站一般用这种方式运行
在这里插入图片描述

4、安全例子-XSS

App.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>

在这里插入图片描述

测试

<img src="x" onerror="alert('XSS')" />

在这里插入图片描述

修复

使用文本插值（{{}}）代替 v-html

在这里插入图片描述

其他安全问题

https://cn.vuejs.org/guide/best-practices/security //目前只有XSS比较有意义

5、vite/webpack+VueJS源码泄露

// vite.config.js
export default defineConfig({
plugins: [vue()],
build: {
sourcemap: true, // 如果需要生成 Source Map
  },
})
// vue.config.js
export default defineConfig({
plugins: [vue()],
build: {
sourcemap: true, // 如果需要生成 Source Map
  },
})
npm run build
//并不是所有的vue都用vite打包器，有的vue也会用webpack打包器。