最近学习了vue.js环境下xss进犯场景相关的常识。整理出来共享给大家。

vue.js 下的数据绑定

常见的vue.js数据绑定是经过双大括号{{}}或许v-text指令进行的数据绑定的。vue.js会主动将对应的模版编译成js代码。

例如：模版代码为

vue.js会把这段模版代码编译成：

function anonymous() {
  with(this) {
    return _c('p', {
      domProps: {
        "textContent": _s(message)
      }
    }, [])
  }
}

一般情况下，vue.js经过双大括号向html内容中对指定部分进行插值。

而双大括号{{}}和v-text指令上底层上完成首要都是经过元素 DOM特点的textContent值来完成数据刺进。

这种情况下一般不会呈现注入的问题，因为浏览器的原生api会安全的处理这些值。 但是数据插值有时分需要向页面中刺进富文本信息。假如运用{{}} 和 v-text指令的话，富文本会被转义成一般文本。不能完成需求。

这时分或许需要用到v-html标签。v-html标签的模版在vue.js编译的方法如下：

示例模版：

vue模版烘托代码：

function anonymous() {
  with(this) {
    return _c('p', {
      domProps: {
        "innerHTML": _s(message)
      }
    }, [])
  }
}

能够看的v-html标签底层实际上运用了 Dom元素的innerHTML特点进行数据刺进。而 innerHTML特点在被刺进不信任数据的时分就会导致JS注入的问题。

安全防护：日常vue.js中数据绑定应该尽量运用{{}}和v-text的方法。v-html是一个有风险的指令，运用时一定要对数据进行过滤处理。

vue.js 下的标签的特点绑定

标签特点绑定，其实也是数据绑定的一种。我把它独立出来是因为特点上的数据绑定和上一小街其实的区别仍是很大。

web前端开发中除了数据内容填充，一同也需要对标签的特点进行数据绑定操作。

vue中咱们运用v-bind 标签特点进行数据绑定，这些数据的插值也是经过浏览器原生api对数据进行转码刺进。由于浏览器自身api安全的保障，数据刺进一般不会形成闭合特点导致的xss问题。

示例模版：对a标签的href进行数据刺进

vue.js编译后的代码：

function anonymous() {
  with(this) {
    return _c('a', {
      attrs: {
        "href": 1234
      }
    }, [])
  }
}

这种场景下，往往是开发人员安全意识缺失，在对标签特点进行数据绑定的时分，疏忽关于某些标签的风险特点绑守时的特别处理。

咱们知道，特别标签的某些特点，能够在特点值可控的情况下进行js代码注入。这样又回到了通用场景下 xss防护应该要注意的问题。

web风险特点大致有：

所有元素的style特点。（应避免用户输入数据绑定到标签的style特点中，防范垂钓进犯。）

a 标签的 href 特点。（正常情况应保证url 协议是http 和 https）

iframe 标签的 src 特点。（要避免经过 javascript://  履行js）
object 标签的 data 特点 。（要避免经过 javascript://  履行js.）

form  的 action 特点（要避免经过 javascript://  履行js.）

防护常识：关于src 、href 、action 、 data 这类能够赋值为uri的特点要限制好协议和请求的url，尽量保证运用http:// 和 https:// 协议及拜访可信的资源服务器 。

Vue.js 服务端模版烘托XSS

其实不仅仅是vue，在现在前后端分离开发的趋势下，前端Javascript结构假如运用了服务端模版烘托模版的方法，就都有或许呈现服务端模版XSS。（这类XSS的实质是模版注入，并不一定呈现都在服务端烘托场景）。

服务端烘托模版本身是为了提前生成html，利于某些站点的搜索引擎优化 和加快页面加载，假如对模版顶用户数据处理不妥，就会导致模版注入的问题。

举例：

假如你在vue.js开发的网站中输入了{{ 2+2 }}，后端服务器给回来了4的时分。你能够判定这儿存在模版解析的问题（服务端将用户输入直接放到template 中作为template的一部分解析回来）。

那么，如何进犯vue.js模版注入缝隙？

但在vue组件模版中，咱们不能直接调用底层javascript函数。运用vue的模版注入一般运用的是javascript的prototype的特性。

首先咱们知道，vue会把模版解析成js代码。那么关于模版注入缝隙，咱们只需要将注入数据在解析成果里变成一段想要的js代码就能够了。

Javascript 中的一切内容都是目标。每个目标都包括一个protoptype （原型），prototype其中有个特点叫constructor ，它指向的是该目标结构函数。

函数也是一个目标，函数目标的constructor是一个答应动态生成函数的函数。这个constructor只需简略把代码字符串赋值给它就能够结构一个匿名的JS 函数。

举个例子：运用toString函数的结构函数，经过赋值结构一个匿名函数。

toString.constructor("consolo.log(1)")();

调用这个匿名函数：

Vue 的模版注入payload 原理就便是这样，常用的测验payload有：

{{constructor.constructor('alert(1)')()}}
{{_c.constructor('alert(1)')()}}
{{_v.constructor('alert(1)')()}}
{{_s.constructor('alert(1)')()}}

还有许多payload , 大家能够到参考资料中的xss-cheat-sheet中查找。

防护常识：关于模版注入，咱们能够经过v-pre指令对模版中的用户输入进行处理。v-pre 指令能够越过指定点的模版编译。将重用在用户输入上能够避免用户输入形成的模版注入问题。

关于vue.js XSS 相关内容的共享就到这儿。其他的进犯点就靠大家一同开掘啦。