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

相关推荐
leluckys1 分钟前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
kidding72315 分钟前
微信小程序怎么分包步骤(包括怎么主包跳转到分包)
前端·微信小程序·前端开发·分包·wx.navigateto·subpackages
微学AI30 分钟前
详细介绍:MCP(大模型上下文协议)的架构与组件,以及MCP的开发实践
前端·人工智能·深度学习·架构·llm·mcp
liangshanbo12151 小时前
CSS 包含块
前端·css
Mitchell_C1 小时前
语义化 HTML (Semantic HTML)
前端·html
倒霉男孩1 小时前
CSS文本属性
前端·css
shoa_top1 小时前
JavaScript 数组方法总结
javascript
晚风3081 小时前
前端
前端
JiangJiang1 小时前
🚀 Vue 人如何玩转 React 自定义 Hook?从 Mixins 到 Hook 的华丽转身
前端·react.js·面试
鱼樱前端1 小时前
让人头痛的原型和原型链知识
前端·javascript