Vue中是如何防护XSS(注入攻击)的

XSS 简单来讲就是 非法脚本 存储在了服务端,并输出到了用户客户端,脚本执行后就会读取cookie等隐私数据 并发送信息给攻击者html

模拟一段攻击文本vue

let xssText = '<script> console.log( 'cookie数据为',  document.cookie ) </script>'

若是将这段文本直接写在html标签里面,那么它会直接执行(如 innerHtml操做 )
image
这个时候就是很是不安全的,那么怎样作才能避免这种现象发生呢?有两种方法
1.innerText 方法
2.createTextNode 建立文本节点node

vue中是如何操做的呢安全

咱们来看一段模板代码

cookie

<template>
   <div>{{ xssText  }}<div>
</template>

这种操做有害吗?no,彻底无害,我来分析一下并发

上面一段模板代码生成的render函数相似于

dom

createElement( 'div', {}, xxsText ) // 建立vnode

vue 在 patchVnode( 虚拟dom 生成 真实dom )有以下代码 处理子节点
image
红框部分意思是 若是 vnode 子节点为 基本类型 如字符串,那么该文本会经过createTextNode方法 生成 文本节点,而后插入父节点xss

因此 很明显  xssText 被 createTextNode 处理成了纯字符串了,变成无害的了,so easy函数

相关文章
相关标签/搜索