Vue中是如何防御XSS（注入攻击）的

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

模拟一段攻击文本

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

如果将这段文本直接写在html标签里面，那么它会直接执行（如 innerHtml操作 ）

这个时候就是非常不安全的，那么怎样做才能避免这种现象发生呢？有两种方法
1.innerText 方法
2.createTextNode 创建文本节点

vue中是如何操作的呢

我们来看一段模板代码

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

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

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

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

vue 在 patchVnode（ 虚拟dom 生成 真实dom ）有如下代码 处理子节点

红框部分意思是 如果 vnode 子节点为 基本类型 如字符串，那么该文本会通过createTextNode方法 生成 文本节点，然后插入父节点

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