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

6、Vue 真实源码项目

网上找的Vue开发的源码项目,了解如何启动,目录架构,代码逻辑等



开发者模式启动源码


打包构建启动源码



源码目录架构


寻找安全问题






7、真实案例文章

https://mp.weixin.qq.com/s/30XIDREyo0Ose4v8Aa9g2w
https://mp.weixin.qq.com/s/4KgOZcWUnvor_GfxsMlInA

相关推荐
qq. 28040339842 小时前
CSS层叠顺序
前端·css
喝拿铁写前端3 小时前
SmartField AI:让每个字段都找到归属!
前端·算法
猫猫不是喵喵.3 小时前
vue 路由
前端·javascript·vue.js
烛阴3 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin91533 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek
GISer_Jing4 小时前
[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景
前端·html
程序员黄同学4 小时前
解释 Webpack 中的模块打包机制,如何配置 Webpack 进行项目构建?
前端·webpack·node.js
拉不动的猪4 小时前
vue自定义“权限控制”指令
前端·javascript·vue.js
再学一点就睡4 小时前
浏览器页面渲染机制深度解析:从构建 DOM 到 transform 高效渲染的底层逻辑
前端·css
拉不动的猪4 小时前
刷刷题48 (setState常规问答)
前端·react.js·面试