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

相关推荐
灵感__idea6 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴8 小时前
Mix
前端·webgl
代码续发8 小时前
前端组件梳理
前端
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_8 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码9 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记9 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏9 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数9 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante10 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端