前端 MVVM 框架可能出现的安全问题

这些年，AngularJS、React 和 Vue.js 算是前端框架中比较热门的，相对于 jQuery 等框架，有一些不太一样的可能出现问题的点，当然都是集中在 XSS 上。

模板注入

类似后端模板注入，前端模板注入也是存在的，被分析最多的还是 AngularJS，详见 https://docs.angularjs.org/guide/security

首先是后端直接生成前端模板，比如 {{1+1}}，然后 AngularJS 去解析和执行。

其次是前端部分表达式和表达式 parser 的参数可以被控制，比如 $watch(userContent, ...) $compile(userContent)

之前的 AngularJS 是有沙箱的，隔离了部分 runtime context，但是最新版本中去除了，因为多次的被绕过，而且并没有真正的提升安全性。

在其他框架中也是存在类似的问题的，比如 Vue.js 这里有一个有趣的案例 https://inside.pixiv.blog/kobo/5962

直接插入 HTML

MVVM框架一般不需要关心 dom 操作，但是有时候还必须手动的插入和控制一些 HTML，框架也是提供了相关的方法的。

• Vue.js 的 {{{ data }}} 和 v-html
• AngularJS 的 $sce.trustAsHtml
• React 的 dangerouslySetInnerHTML

这时候就应该认真检查用户输入的数据了。

我感觉 AngularJS 和 React 的函数名字设计的特别科学，你要知道 trust 那些 dangerous 的数据才可以，还比如 grpc 中，使用非 SSL 的时候，方法名是add_insecure_port。

SSR

为了解决 SPA 页面的 SEO 问题的，主流框架也提供了 SSR 方案，但是 SSR 的时候就经常的忘记了转义和过滤，一个是说程序员的问题，使用了危险的函数，另外一个就是框架的漏洞了。

比如新版知乎页面使用了 SSR，会先把用户的问题输出到页面上，然后后续再执行 JS 做进一步的动作，然后估计是使用了dangerouslySetInnerHTML，导致用户问题中的 JS 被执行，导致了XSS。

Vue.js 在 SSR 的时候，默认会转义用户输入，但是在样式中忘记处理了，导致了 XSS。见下面的 demo

var Vue = require('vue')
var app = new Vue({
  data () {
    return {
        xss: '"><script>alert(1)</script>'
    }
  },
  render: function (h) {
    return h('a', {style: {color: this.xss}}, 'foo')
  }
})
var renderer = require('vue-server-renderer').createRenderer()
renderer.renderToString(app, function (error, html) {
  if (error) throw error
  console.log(html)
})

FROM :strcpy.me | Author:strcpy