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

知识点：

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

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

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

1、Vue 搭建

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

已安装18.3或更高版本的Node.js

2、Vue 创建

创建vue

bash 复制代码

npm create vue@latest

vite创建

bash 复制代码

npm create vite@latest

3、Vue 启动

bash 复制代码

cd <your-project-name>

安装依赖

bash 复制代码

npm install

必须安装

开发者模式启动

bash 复制代码

npm run dev

真实情况下网站一般不会用这种模式启动

打包构建启动

bash 复制代码

npm run build

真实环境下，网站一般用这种方式运行

4、安全例子-XSS

bash 复制代码

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>

测试

bash 复制代码

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

修复

bash 复制代码

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

其他安全问题

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

5、vite/webpack+VueJS源码泄露

bash 复制代码

// 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打包器。