自己紹介はせがわようすけネットエージェント株式会社株式会社セキュアスカイテクノロジー技術顧問 OWASP Kansai Chapter Leader OWASP Japan Chapter Advisory Board member

Size: px

Start display at page:

Download "自己紹介はせがわようすけネットエージェント株式会社株式会社セキュアスカイテクノロジー技術顧問 OWASP Kansai Chapter Leader OWASP Japan Chapter Advisory Board member"

ふさこみしま
9 years ago
Views:

1 HTML5 and Security Part 4 : DOM based XSS HTML5 セキュリティその 4 : DOM based XSS 編 Sep Yosuke HASEGAWA

2 自己紹介はせがわようすけネットエージェント株式会社株式会社セキュアスカイテクノロジー技術顧問 OWASP Kansai Chapter Leader OWASP Japan Chapter Advisory Board member

3 お知らせ Announcement

4 HTML5 Security Report English edition from JPCERT/CC

5 今日の話題 DOM based XSS Today's topic : DOM based XSS

6 DOM based XSS JavaScript で DOM を組み立てるときの XSS location.href = location.hash.substring(1); document.write( document.referrer ); div.innerhtml = xhr.responsetext; サーバ側のHTML 生成には問題なし JavaScriptの利用に合わせて発生も増加

7 DOM based XSS

8 DOM based XSS

9 DOM based XSS ブラウザの XSS フィルタを通過することが多い location.hash 内の実行コードはサーバ側にログが残らない // div.innerhtml = location.hash.substring(1); history.pushstate でアドレスバー書き換え技術のあるユーザでも XSS に気づきにくい

jp/#<script>alert(1)</script> div.innerhtml = location.

10 DOM based XSS DOM based XSS は増えている JavaScript の大規模化に伴い増加サーバ側での対策と原則は同じ HTML 生成時 ( レンダリング時 ) にエスケープ URL 生成時はhttp(s) のみライブラリの更新を忘れずに (jqueryとか) CSSやイベントハンドラの動的生成は避ける

11 DOM based XSS HTML 生成時にエスケープ div.innerhtml = s.replace( /&/g, "&" ).replace( /</g, "<" ).replace( />/g, ">" ).replace( /"/g, """ ).replace( /'/g, "'" ); むしろ textnode を使おう! div.appendchild( document.createtextelement( s ) );

12 DOM based XSS URL 生成時は http(s) のみ // bad code div.innerhtml = '<a href="' + url + '">' + url + '</a>'; if( url.match( /^https?: / // ) ){ var elm = docuement.createelement( "a" ); elm.appendchild( document.createtextnode( url ) ); elm.setattribute( "href", url ); div.appendchild( elm ); }

$match( /^https?: / // ) ){ var elm = docuement.createelement( "a" ); elm.$

13 DOM based XSS URL 生成時は http(s) のみリダイレクト時はオープンリダイレクタを発生させないよう同一ホストに制限 var base = location.origin + "/"; if( url.substring( 0, base.length ) == base ){ location.href = url; }

14 ここまで DOM based XSS の基本です Basics of DbXSS so far

15 Mutation-based XSS

16 Mutation-based XSS : mxss DOM based XSS の一種 innerhtml / outerhtml の参照により元の DOM 構造とは異なる HTML 文字列が返されることにより XSS が発生 element1.innerhtml = element2.innerhtml; HTMLElement innerhtml String innerhtml HTMLElement 異なる HTML

17 Mutation-based XSS : mxss DOM based XSS の一種 innerhtml / outerhtml の参照により元の DOM 構造とは異なる HTML 文字列が返されることにより XSS が発生 The innerhtml Apocalypse How mxss attacks change everything we believed to know so far mxss Attacks: Attacking well-secured Web-Applications by using innerhtml Mutations mxss The Spanner

18 Mutation-based XSS : mxss  <div id="div1"> <input type="text" value="``onmouseover=alert(1)"> </div> <div id="div2"></div>... div2.innerhtml = div1.innerhtml; <div id="div2"> <INPUT value=``onmouseover=alert(1) type=text> </div>

19 Mutation-based XSS : mxss <input type="text" value="``onmouseover=alert(1)"> <INPUT value=``onmouseover=alert(1) type=text> <listing><img src=1 onerror=alert(1)></listing> <LISTING><img src=1 onerror=alert(1)></listing> <style/></style><img src=1 onerror=alert(1)></style> <STYLE></style><img src=1 onerror=alert(1)></style> <title><img src=1 onerror=alert(1)></title> <TITLE><img src=1 onerror=alert(1)></title>

src=1 onerror=alert(1)></listing> <style/></style><img src=1 onerror=alert(1)></style>

20 Mutation-based XSS : mxss mxss innerhtml/outerhtml を参照したときに本来の DOM 構造とは異なる文字列が取得される IE 以外でも発生し得る (CDATA 要素の参照など ) 対策攻撃者がコントロール可能な要素の innerhtml / outerhtml を参照しない文字列ではなく DOM 操作で

21 ここまでのまとめ DOM based XSS JS 上で発生する XSS Mutation-based XSS JS 上で innerhtml/outerhtml を参照したときに発生する XSS 対策文字列操作ではなく DOM 操作で createelement / textcontent

22 DOM 操作めんどうくさい! Manipulating DOM is messy!

DOM 操作めんどうくさい ( 例 ) [ ] var xhr = new XMLHttpRequest(); xhr.open( "GET", "http://3rdparty.example.com/", true ); xhr.onload = function(){ }; "<a href='http://example.jp/foo'>2014.09.

23 DOM 操作めんどうくさい ( 例 ) [ ] var xhr = new XMLHttpRequest(); xhr.open( "GET", " true ); xhr.onload = function(){ }; "<a href=' 新製品 </a>", "<a href=' お知らせ </a>", "<img src=# onerror=alert(1)>" var items = JSON.parse( xhr.responsetext ); var elm = document.getelementbyid( "div" ); for( var i = 0; i < items.length; i++ ){ elm.innerhtml += "<div class='item'>" + items[ i ] + "</div>"; } ここ DOM 操作で作るのしんどい

24 DOM 操作めんどうくさい tostatichtml IE8+ 安全な HTML 文字列を返すお手軽 div.innerhtml = tostatichtml( s ); "<script>alert(1)</script>" "" "<img src=# onerror=alert(1)>" "<img src=#>" "<a href='javascript:alert(1)'>link</a>" "<a>link</a>"

25 DOM 操作めんどうくさい IE 以外はどうするか第 4 回次に, ブラウザ側の機能を使って HTML をパースする方法ですこれは createhtmldocument を使うとよいでしょう createhtmldocument は HTML5 仕様で標準化されており, 安定して使うことができます IE でも IE9 以降でサポートされています HTML パース処理を行い, 新たなドキュメントを作ったら, あとはすべての DOM ノードと Attribute を列挙して, 許可したタグと属性以外をすべて除去すれば完了です危険性が理解されにくいネイティブアプリ内 XSS(2): フロントエンド Web 戦略室 gihyo.jp 技術評論社

26 ブラウザの機能を使って HTML をパース DOMParser / createhtmldocument ブラウザ内蔵の HTML パーサ現在表示している document に影響を与えずに DOM ツリーを構築可能 Opera 12 を除く

27 ブラウザの機能を使って HTML をパース DOMParser var s = xhr.responsetext; var parser = new DOMParser(); var doc = parser.parsefromstring( s, "text/html" ); var elm = doc.body; createhtmldocument var s = xhr.responsetext; var elm = document.implementation.createhtmldocument("").body; elm.innerhtml = s; 文字列をパースし DOM ノードを構築可能 DOM ノードから必要な要素属性を切り出す

28 ブラウザの機能を使って HTML をパース DOMParser createhtmldocument は現在表示している document に影響を与えない var s = "<img src=# onerror=alert(1)>"; // 発火しない!! var parser = new DOMParser(); var doc = parser.parsefromstring( s, "text/html" );c createcontextualfragment はブラウザによって発火する

29 ノードから必要な要素属性を切り出す DOMParser createhtmldocument で HTMLElement を生成生成された HTMLElement の要素属性を列挙して安全なものだけを抽出 a div img class title href class class alt src

30 文字列と HTMLElement 作成した HTMLElement を文字列に変換しないこと // bad code. var parser = new DOMParser(); var doc = parser.parsefromstring( s, "text/html" ); div.innerhtml = doc.body.innerhtml; HTMLElement div. innerhtml String doc.body. innerhtml HTMLElement

31 文字列と HTMLElement HTMLElement から文字列への変換は mxss を引き起こす ( 可能性がある ) // bad code. IE では mxss となる var s = "<listing><img src=1 onerror=alert(1)></listing>"; var parser = new DOMParser(); var doc = parser.parsefromstring( s, "text/html" ); div.innerhtml = doc.body.innerhtml;

32 文字列と HTMLElement こういうコードはダメ // bad code. tostatichtml モトキを作りたい if( window.tostatichtml ){ return tostatichtml( s ); }else{ var parser = new Parser(); var doc = parser.parsefromstring( s, "text/html" ); var newnode = sanitize( doc.body ); return newnode.innerhtml; }

33 文字列と HTMLElement 書くならこういう感じ // tostatichtml モトキを作りたい if( window.tostatichtml ){ var div = document.createelement("div"); div.innerhtml = tostatichtml( s ); return div.childnodes; }else{ var parser = new Parser(); var doc = parser.parsefromstring( s, "text/html" ); var newnode = sanitize( doc.body ); return newnode.childnodes; // HTMLElement }

34 RickDOM

35 RickDOM 簡単かつ安全に使えるライブラリ var rickdom = new RickDOM(); var elms = rickdom.build( "<img src=# onerror=alert(1)>" ); for( var i = 0; i < elms.length; i++ ){ div.appendchild( elms[ i ] ); } 独自の許可ルールの設定も可能 var rickdom = new RickDOM(); rickdom.allowings = { img: { src: { pattern : "^https?: / /", flag: "i" } } }; var elms = rickdom.build( "<img src=# onerror=alert(1)>" );

36 よくわかんない不安だ Anxious

37 sandboxed iframe sandbox な iframe を応用 <iframe id="iframe" sandbox seamless style="border-width:0px"></iframe>... document.getelementbyid("iframe").srcdoc = xhr.responsetext; sandbox 属性により JS を禁止 (XSS を防ぐ )

38 sandboxed iframe sandbox な iframe を応用 <iframe id="iframe" sandbox seamless style="border-width:0px"></iframe>... document.getelementbyid("iframe").srcdoc = xhr.responsetext; sandbox 属性により JS を禁止 (XSS を防ぐ ) seamless 属性により親フレームの CSS を継承コンテンツは srcdoc 属性に直接設定 HTMLElement なら contentdocument 経由で

39 sandboxed iframe "/page" などのリンクの許可 <iframe id="iframe" sandbox="allow-top-navigation" seamless style="border-width:0px"></iframe>... document.getelementbyid( "iframe" ).srcdoc = '<base href=" target="_parent">' + '<a href="/page">next</a>'; allow-top-navigation で親 frame 内でのページ遷移を許可

40 まとめ DOM based XSS,mXSS 文字列で操作しない DOM 経由で操作リンクはhttp(s) のみ文字列から DOM の構築 DOMParser API が便利 sandboxed iframe DOM baed XSS の予防に便利

41 質問タイム Question?

42 Question? 質問 @hasegawayosuke

自己紹介長谷川陽介 ( はせがわようすけ ( 株 ) セキュアスカイテクノロジー常勤技術顧問セキュリティキャンプ講師 (2008 年 ~) OWASP Kansai チャプターリーダー OWASP Japan ボードメンバー CODE BLUE カンファレ

自己紹介長谷川陽介 ( はせがわようすけ ( 株 ) セキュアスカイテクノロジー常勤技術顧問セキュリティキャンプ講師 (2008 年 ~) OWASP Kansai チャプターリーダー OWASP Japan ボードメンバー CODE BLUE カンファレ PHP デベロッパーのための JavaScript セキュリティ入門 ( 株 ) セキュアスカイテクノロジー常勤技術顧問長谷川陽介 PHP カンファレンス福岡 2016 自己紹介長谷川陽介 ( はせがわようすけ / @hasegawayosuke) ( 株 ) セキュアスカイテクノロジー常勤技術顧問セキュリティキャンプ講師 (2008 年 ~) OWASP Kansai チャプターリーダー

自己紹介 はせがわようすけ ネットエージェント株式会社 株式会社セキュアスカイ テクノロジー技術顧問 OWASP Kansai Chapter Leader OWASP Japan Chapter Advisory Board member

自己紹介はせがわようすけネットエージェント株式会社株式会社セキュアスカイテクノロジー技術顧問 OWASP Kansai Chapter Leader OWASP Japan Chapter Advisory Board member