网站设计参考文献有哪些_香港免费的服务器地址_附近电商培训班_百度搜索关键词排名查询

时间:2025/7/17 15:19:50来源：https://blog.csdn.net/m0_60571842/article/details/146602594 浏览次数:0次

知识点：
1、安全开发-VueJS-搭建启动&打包安全
2、安全开发-VueJS-源码泄漏&代码审计

演示案例-WEB开发-VueJS-构建打包&源码泄漏&代码审计

1、Vue 搭建

官网参考：https://cn.vuejs.org/
已安装18.3或更高版本的Node.js

2、Vue 创建

创建vue

npm create vue@latest

在这里插入图片描述

vite创建

npm create vite@latest

在这里插入图片描述

3、Vue 启动

在这里插入图片描述

cd <your-project-name>

安装依赖

npm install

必须安装
在这里插入图片描述

开发者模式启动

npm run dev

真实情况下网站一般不会用这种模式启动
在这里插入图片描述

在这里插入图片描述

打包构建启动

npm run build

真实环境下，网站一般用这种方式运行
在这里插入图片描述

4、安全例子-XSS

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>

在这里插入图片描述

测试

<img src="x" onerror="alert('XSS')" />

在这里插入图片描述

修复

使用文本插值（{{}}）代替 v-html

在这里插入图片描述

其他安全问题

https://cn.vuejs.org/guide/best-practices/security //目前只有XSS比较有意义

5、vite/webpack+VueJS源码泄露

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