第40天:Web开发-JS应用VueJS框架Vite构建启动打包渲染XSS源码泄露代码审计
1、安全开发-VueJS-搭建启动&打包安全
2、安全开发-VueJS-源码泄漏&代码审计
1、Vue 框架搭建->基于nodejs搭建，安装nodejs即可
参考：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 （这种启动方式应用于“生产环境”的网站搭建，build打包构建后，还需依赖phpstudy中的中间件来启动网站）
二、Vue 项目实战搭建
网上找几个Vue开发的源码项目（站长之家寻找），了解如何启动，目录架构，代码逻辑等
三、Vue框架安全问题
vue框架演练场实验xss漏洞->文本插值（{{}}）代替 v-html
1、使用文本插值（{{}}）->不会产生xss,它会将<script>alert(）恶意语句中的"<",实体化成<，使恶意语句失效
2、使用v-html->产生xss,使恶意语句生效->因此该关键词成为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>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
margin-top: 60px;
}
</style>
测试恶意语句：<img src="x" οnerrοr="alert('XSS')" />
修复：使用文本插值（{{}}）代替 v-html =>恶意语句失效
其他：https://cn.vuejs.org/guide/best-practices/security
四、WebPack打包器+vite打包器+VueJS源码泄露
vite打包器（vue框架中的打包，效果和webpack相似），如果配置不但，如开发，生产模式配置不当，devtool配置不当，都会造成源码泄露或map映射文件泄露
// vue.config.js这是vue框架里面的配置文件和webpack.config.js类似，有时为vite.config.js;作用都
差不多->他们里面的sourcemap如果配置不得当，就会泄露map映射文件xx.js.map，从而泄露源码
export default defineConfig({
plugins: [vue()],
build: {
sourcemap: true, // 如果需要生成 Source Map //生成map映射文件，泄露源码
},
})
npm run build //打包构建
五、案例文章：
https://mp.weixin.qq.com/s/30XIDREyo0Ose4v8Aa9g2w
https://mp.weixin.qq.com/s/4KgOZcWUnvor_GfxsMlInA
六、总结
a.学会实战项目的Vue框架的搭建，两种启动(开发启动+打包构建利用中间件启动），了解如何启动，目录架构，代码逻辑
b.文本插值（{{}}）代替 v-html造成的Vue框架的xss漏洞
c.会使用Vue框架中的vite打包器+build进行构建
d.测试思路：
①前端F12->找map映射文件，webpack源码泄露->源码中找账密、url、接口等信息，看有没有v-html关键字(判断是否存在xss漏洞）
②前端F12->翻各种文件，尤其是js文件，找是否有泄露的账密，接口、url,接口可抓包（构造文件上传等）->构造文件上传还需学习（这一招很实用，也很看运气）
相关文章：
第40天:Web开发-JS应用VueJS框架Vite构建启动打包渲染XSS源码泄露代码审计
#知识点 1、安全开发-VueJS-搭建启动&打包安全 2、安全开发-VueJS-源码泄漏&代码审计 一、Vue搭建创建项目启动项目 1、Vue 框架搭建->基于nodejs搭建，安装nodejs即可 参考：https://cn.vuejs.org/ 已安装18.3或更高版本的Node.js 2、Vue 创建…...
2.10学习总结
今天接着看了数据结构，但是跟指针有关的看不懂（万恶的指针），写了考试的补题。 #include <stdio.h> #include <stdlib.h> int a[1000005]; int main() {int n,i,x0;scanf("%d",&n);for(i1;i<n;i){x;i…...
MySQL 中可以通过添加主键来节省磁盘空间吗？（译文）
从历史上看，MySQL 不需要在表上定义显式主键，直到今天默认都是这样。不过，这种要求是通过两种复制方法施加的：组复制和 Percona XtraDB 集群 （PXC），默认情况下不允许使用没有主键的表。对于缺少…...
Django在终端创建项目（pycharm Windows）
1.选择目录 选择或新建一个文件夹，作为项目保存的地方 2.右键在终端打开 3.确定django-admin.exe安装位置 找到自己安装django时，django-admin.exe安装的位置，例如 4.运行命令 使用django-admin.exe的绝对路径，在刚才打开的终端…...
IDEA接入DeepSeek
IDEA 目前有多个途径可以接入deepseek，比如CodeGPT或者Continue，这里借助CodeGPT插件接入，CodeGPT目前用的人最多，相对更稳定 一、安装 1.安装CodeGPT idea插件市场找到CodeGPT并安装 2.创建API Key 进入deepseek官网…...
Linux 内核自旋锁spinlock（二）--- ticket spinlock
文章目录 前言一、ticket spinlock二、源码分析2.1 spin_lock_init2.2 spin_lock2.2 spin_unlock 参考资料 前言 自旋锁是 Linux 内核中最底层的互斥机制。因此，它们对内核的安全性和性能有着巨大的影响，因此对各种（特定架构的）自…...
Elixir语言的计算机基础
Elixir语言的计算机基础 引言 Elixir是一种现代的编程语言，建立在Erlang虚拟机（BEAM）上，专注于并发、分布式系统和容错能力。随着互联网的发展，应用程序的需求变得越来越复杂，Elixir凭借其高效的性能、灵…...
MindStudio制作MindSpore TBE算子（二）算子测试
在上一节中，成功制作了Mindspore的Add算子，具体可以查看MindStudio制作MindSpore TBE算子（一）算子制作，这一节，一起看看如何对算子进行测试。 建议参考以下内容一起食用： 算子代码实现 MindSpor…...
深度解读城市地下网管管廊改造要点
引 言 近日国家发改委和住建部联合发布通知（后附），要求各地抓紧编制“城市地下管网和综合管廊建设改造实施方案”并于12月27日前报国家发改委和住建部相关司处，逾期未报的城市（县、区），视同自愿…...
Docker 部署 redis | 国内阿里镜像
一、简易单机版 1、镜像拉取 # docker hub 镜像 docker pull redis:7.0.4-bullseye # 阿里云镜像 docker pull alibaba-cloud-linux-3-registry.cn-hangzhou.cr.aliyuncs.com/alinux3/redis_optimized:20240221-6.2.7-2.3.0 2、运行镜像 docker run -itd --name redis \n …...
Day88：加载游戏图片
在游戏开发中，加载和显示图片是非常常见的需求，尤其是在 2D 游戏 中，角色、背景、道具、敌人等都需要用图片来表示。今天，我们将学习如何在 Python 游戏开发中使用 Pygame 加载并显示图片。 1. 加载游戏图片的基本步骤 在 Pygame 中加载图片通常需要以下几个步骤： 导入 P…...
Elasticsearch：在 Elastic 中玩转 DeepSeek R1 来实现 RAG 应用
在这个春节，如一声春雷，DeepSeek R1 横空出世。现在人人都在谈论 DeepSeek R1。这个大语言模型无疑在中国及世界的人工智能发展史上留下了重要的里程碑。那么我们改如何结合 DeepSeek R1 及 Elasticsearch 来实现 RAG 呢？在之前的文章 “使用…...
SOME/IP报文格式及发现协议详解
在之前的文章中，我们介绍了SOME/IP协议的几种服务接口。在本篇博客中，主要介绍some/ip协议传输的header报文格式以及SOME/IP-SD发现协议。 目录 流程 报文格式 Message ID Length Request ID protocal version/Interface Version Message Type…...
elementplus 使用日期时间选择器，设置可选范围为前后大于2年且只能选择历史时间不能大于当前时间点
需求：时间选择器可选的时间范围进行限制，-2年<a<2年且a<new Date().getTime()核心：这里需要注意plus版没有picker-options换成disabled-date属性了，使用了visible-change和calendar-change属性逻辑：另设一个参…...
C语言·关键字·char关键字
C语言菜鸟入门关键字char关键字_c char-CSDN博客...
Ansible简单介绍及用法
一、简介 Ansible是一个简单的自动化运维管理工具，基于Python语言实现，由Paramiko和PyYAML两个关键模块构建，可用于自动化部署应用、配置、编排task(持续交付、无宕机更新等)。主版本大概每2个月发布一次。 Ansible与Saltstack最大的区别是…...
Mac 本地搭建自己的 DeepSeek
Mac 本地搭建自己的 DeepSeek 安装 Ollama通过Ollama命令安装 DeepSeek 模型安装一个UI客户端，提升体验 注：本文章完全参考网上教程，没有丝毫原创，只是记录一下我本人在安装DeepSeek 的步骤 安装 Ollama https://ollama.com/dow…...
深度学习-交易预测
下面为你详细介绍如何使用Python结合深度学习库TensorFlow和Keras来构建一个简单的交易预测模型。在这个示例中，我们以股票价格预测为例，假设我们要根据过去一段时间的股票价格数据来预测未来的价格走势。 步骤分析 数据准备：获取股票价格数…...
Prompt逆向工程:如何“骗“大模型吐露其Prompt?
提示词的“逆向工程”，让AI大语言模型帮你反推提示词 一、前言 在日常生活中，我们不时会遇到一些令人惊艳的文本，不论是一篇精彩绝伦的小说、一篇深入浅出的科普文章，还是一篇充满热情的音乐推荐，它们都能在我们的心…...
游戏手柄Type-c方案，支持一边充电一边传输数据
乐得瑞推出LDR6023SS，专门针对USB-C接口手机手柄方案，支持手机快充，支持任天堂游戏机，PS4等设备~同时支持手机充电跟数据传输 1、概述 LDR6023SS SSOP16 是乐得瑞科技针对 USB Type-C 标准中的 Bridge 设备而开发的双 USB-C DRP …...
Vue设计模式到底多少种？
Vue设计模式到底多少种？ 很多同学问，Vue到底有多少种设计模式？？各个模式到底是什么意思？？又各自适合什么场景？？ 这里我给大家直接说下，Vue的设计模式没有一个固定的数值…...
C++ 中的 std::timed_mutex 和 std::recursive_timed_mutex
1、背景 在多线程编程中，互斥锁（Mutex）是用于保护共享资源的重要工具。C 标准库提供了多种互斥锁类型，其中 std::timed_mutex 和 std::recursive_timed_mutex 是两种支持超时功能的互斥锁。在阅读FastDDS源码时，发现了…...
HAL库外设宝典：基于CubeMX的STM32开发手册（持续更新）
目录 前言 GPIO（通用输入输出引脚） 推挽输出模式 浮空输入和上拉输入模式 GPIO其他模式以及内部电路原理 输出驱动器 输入驱动器 中断 外部中断（EXTI） 深入中断（内部机制及原理） 外部中断/事件控…...
Kotlin实战经验：将接口回调转换成suspend挂起函数
在 Kotlin 协程中， suspendCoroutine 和 suspendCancellableCoroutine 是用于将回调或基于 future 的异步操作转换成挂起函数。 suspendCoroutine 用途：将回调式异步操作转换为可挂起函数 行为： 启动一个新的协程来处理基于回调的操作挂起当前协程，直到调用回调回调负责…...
银行国际结算
银行国结项目，即国际结算项目，是银行业务中的重要组成部分，它涉及跨国界的货币收付和资金转移。 一、银行国结项目的定义 银行国结项目是指银行为国际贸易、投资等活动提供的国际结算服务，包括各种国际支付和资金清算业务。这些…...
java后端开发day13--面向对象综合练习
（以下内容全部来自上述课程） 注意：先有javabean，才能创建对象。 1.文字版格斗游戏 格斗游戏，每个游戏角色的姓名，血量，都不相同，在选定人物的时候（new对象的时候&#…...
Vue解决父子组件传值，子组件改变值后父组件的值也改变的问题
vue开发过程中，父组件通过props传值给子组件，子组件在页面展示父组件的值，在操作子组件值以后，即使不点击确定按钮，父组件中的值也发生了变化，但是需求是操作子组件数据以后，必须点击"确定…...
【通俗解释,入门级】DeepSeek - R1 - Zero：强化学习提升LLM推理能力的奥秘
DeepSeek - R1 - Zero：强化学习提升LLM推理能力的奥秘 第一节：强化学习在DeepSeek - R1 - Zero中的基本概念与公式解释【通俗解释】 强化学习在DeepSeek - R1 - Zero里就像是一位“聪明的探险家”，在各种可能的推理路径中探索，通…...
《图解设计模式》笔记（六）访问数据结构
十三、Visitor 模式：访问数据结构并处理数据 Visitor：访问者 我们会“处理”在数据结构中保存着的元素，通常把“处理”代码放在表示数据结构的类中。 但每增加一种处理，就不得不去修改表示数据结构的类。 在 Visitor模式中&am…...
windows11上，使用pipx安装Poetry，Poetry的安装路径是什么？
当使用 pipx 安装 Poetry 时，pipx 会将 Poetry 安装到一个独立的虚拟环境中，并将其可执行文件链接到一个集中的目录中。以下是 pipx 安装 Poetry 时的路径信息： 1. Poetry 的安装路径 pipx 会为每个工具（如 Poetry）创…...
使用 vcpkg 简化 C++ 项目依赖管理
使用 vcpkg 简化 C 项目依赖管理 什么是 vcpkg？ vcpkg 是微软推出的跨平台 C/C 包管理工具，支持 Windows/Linux/macOS。它可以帮助开发者： ✅ 一键安装 2000 开源库 ✅ 自动解决依赖关系 ✅ 生成 Visual Studio 集成配置 ✅ 支持自定义编译…...
怎样确定网站访问速度出现问题是后台还是服务器造成的？
网站的访问速度会影响到用户的体验感，当网络过于卡顿或访问速度较慢时，会给用户带来不好的体验感，但是网站访问速度不仅会是后台造成影响的，也可能是服务器的原因，那么我们该如何分辨呢？ 当网站使用了数据库…...
【Elasticsearch】管道聚合
管道聚合就是在已有聚合结果之上在进行聚合，管道聚合是针对于聚合的聚合 在 Elasticsearch 中，管道聚合（Pipeline Aggregations）是一种特殊的聚合类型，用于对其他聚合的结果进行进一步的计算和处理，而不是直…...
)
CNN-GRU卷积神经网络门控循环单元多变量多步预测，光伏功率预测（Matlab完整源码和数据)
代码地址：CNN-GRU卷积神经网络门控循环单元多变量多步预测，光伏功率预测（Matlab完整源码和数据) CNN-GRU卷积神经网络门控循环单元多变量多步预测，光伏功率预测 一、引言 1.1、研究背景和意义 随着全球能源危机和环境问题的日…...
后端java工程师经验之谈，工作7年，mysql使用心得
mysql 工作7年，mysql使用心得 mysql1.创建变量2.创建存储过程2.1：WHILE循环2.2：repeat循环2.3：loop循环2.4：存储过程，游标2.5：存储过程，有输入参数和输出参数 3.三种注释写法4.case …...
综合评价 | 基于随机变异系数-TOPSIS组合法的综合评价模型（Matlab）
基于随机变异系数-TOPSIS组合法的综合评价模型 代码获取私信回复：综合评价 | 基于随机变异系数-TOPSIS组合法的综合评价模型（Matlab） 一、引言 1.1、研究背景与意义 在现代社会，随着信息量的不断增加和数据复杂性的提升&#…...
Visual Studio Code中文出现黄色框子的解决办法
Visual Studio Code中文出现黄色框子的解决办法 一、vsCode中文出现黄色框子-如图二、解决办法 一、vsCode中文出现黄色框子-如图 二、解决办法 点击 “文件”点击 “首选项”点击 “设置” 搜索框直接搜索unicode选择“文本编辑器”，往下滑动，找到“Un…...
手写一个C++ Android Binder服务及源码分析
手写一个C Android Binder服务及源码分析 前言一、 基于C语言编写Android Binder跨进程通信Demo总结及改进二、C语言编写自己的Binder服务Demo1. binder服务demo功能介绍2. binder服务demo代码结构图3. binder服务demo代码实现3.1 IHelloService.h代码实现3.2 BnHelloService.c…...
【AIGC】在VSCode中集成 DeepSeek（OPEN AI同理）
在 Visual Studio Code (VSCode) 中集成 AI 编程能力，可以通过安装和配置特定插件来实现。以下是如何通过 Continue 和 Cline 插件集成 DeepSeek： 一、集成 DeepSeek 获取 DeepSeek API 密钥：访问 DeepSeek 官方网站，注册并获取 …...
使用 Three.js 实现热力渐变效果
大家好！我是 [数擎 AI]，一位热爱探索新技术的前端开发者，在这里分享前端和 Web3D、AI 技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！ 开发领域：前端开发 | A…...
Vue事件处理 - 绑定事件
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue事件处理 - 绑定事件及事件处理 目录 事件处理 绑定方式 函数表达式 绑定函数名 输入框绑定事件 拿到输入框的值 传值加事件源 事件第三种写法 总结 事件处理 绑定方式 函数表达式 在按钮上使用函数表达式绑定事…...
DVWA靶场通关——SQL Injection篇
一，Low难度下unionget字符串select****注入 1，首先手工注入判断是否存在SQL注入漏洞，输入1 这是正常回显的结果，再键入1’ You have an error in your SQL syntax; check the manual that corresponds to your MySQL server ver…...
DeepSeek 助力 Vue 开发：打造丝滑的步骤条
前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...
今日学习总结
1.完成了P2242公路维修问题 2.完成了P10605下头论文 1.P2242 思考：建立单向链表，使用qsort降序排序。 #include<stdio.h> #include<stdlib.h> #include<stdbool.h> #include<string.h> int n,m; int a[15005],b[15005],ans;…...
Transformer 的辉煌与大模型方向确立，点燃AGI之火把
GPT3，指明大模型发展方向，点燃大模型软件行业繁荣之火，目前大模型有100万个。 DeepSeek-V3，指明下一个阶段大模型发张方向，破壁： 资金壁垒：训练成本降低，适配丰富硬件，总…...
DeepSeek-Coder系列模型：智能编程助手的未来
文章目录 一、模型架构与核心功能1. 模型架构2. 核心功能 二、多语言支持与代码生成1. Python代码生成2. Java代码生成3. C代码生成4. JavaScript代码生成 三、仓库级代码理解1. 代码结构分析2. 上下文理解 四、FIM填充技术1. 函数自动填充2. 代码补全 五、应用场景1. 代码补全…...
微信小程序longpress以及touchend的bug，touchend不触发，touchend不执行
核心原因：bind：touchend里面不能放wx:if 举例： <view bind:longpress"longpressBtn" bind:touchend"touchendBtn"><view wx:if"{{isRecording}}" >松开发送</view><view wx:else"…...
多租户架构设计与实现：基于 PostgreSQL 和 Node.js
多租户架构设计与实现：基于 PostgreSQL 和 Node.js 引言 多租户架构（Multi-tenancy）是现代 SaaS（Software as a Service）应用的核心设计模式之一。它允许多个租户共享同一套应用实例，同时确保数据隔离和安全性。本文将详细介绍多租户架构的设计方案，并基于 PostgreSQL…...
四、OSG学习笔记-基础图元
前一章节： 三、OSG学习笔记-应用基础-CSDN博客https://blog.csdn.net/weixin_36323170/article/details/145514021 代码：CuiQingCheng/OsgStudy - Gitee.com 一、绘制盒子模型 下面一个简单的 demo #include<windows.h> #include<osg/Node&…...
windows平台本地部署DeepSeek大模型+Open WebUI网页界面（可以离线使用）
环境准备： 确定部署方案请参考：DeepSeek-R1系列（1.5b/7b/8b/32b/70b/761b）大模型部署需要什么硬件条件-CSDN博客 根据本人电脑配置：windows11 + i9-13900HX+RTX4060+DDR5 5600 32G内存 确定部署方案：DeepSeek-R1:7b + Ollama + Open WebUI 1. 安装 Ollama Ollama 是一…...