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

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

模拟一段攻击文本

let xssText = ''

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

vue中是如何操作的呢

我们来看一段模板代码

这种操作有害吗?no,完全无害,我来分析一下

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

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

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

所以 很明显  xssText 被 createTextNode 处理成了纯字符串了,变成无害的了,so easy




你可能感兴趣的:(源码分析vue.js)