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

相关推荐
安全系统学习26 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖42 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台2 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python