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

相关推荐
hahala23338 分钟前
ESLint 提交前校验技术方案
前端
夕水30 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
Winwin32 分钟前
js基础-数据类型
javascript
Winwin33 分钟前
哈?Boolean能作为回调函数?
javascript
我麻烦大了33 分钟前
实现一个简单的Vue响应式
前端·vue.js
Shartin37 分钟前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder41 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.1 小时前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js