React.js に XSS 対策を求めるのは間違っているだろうか

1. React.js に XSS 対策を求めるのは間違っているだろうか #edomaesec 2015 5/30 LT

2. @clariroid

3. くらりど

4. React.js

5. React.js

6. React.js 青い紐

7. React.js • UI を構築する JavaScript ライブラリ

8. React.js • UI を構築する JavaScript ライブラリ • Virtual DOM

9. React.js • UI を構築する JavaScript ライブラリ • Virtual DOM • Component Composable

10. React.js • UI を構築する JavaScript ライブラリ • Virtual DOM • Component Composable • Server-side Rendering • etc ...

11. React.js • UI を構築する JavaScript ライブラリ • (省略）

12. React.js • UI を構築する JavaScript ライブラリ • XML like な JavaScript – JSX で記述

13. React.js – JSX var str = "Hello, React!"; React.render( {str}, document.body );

14. React.js – JSX var str = "Hello, React!"; React.render( {str}, // js 式は { } で括る document.body );

15. React.js – JSX • JSX Transformer •  JSX を生の JavaScript に変換

16. React.js – JSX var str = "Hello, React!"; React.render( React.createElement("span", null, str), document.body );

17. React.js – JSX • 結果として生成される HTML

18. React.js – JSX <body> Hello, React! </body>

19. React.js • エスケープは自動でしてくれる • が、React.js が XSS 対策にどこまで責任を負うかは議論となっている • Issue #3473 “How Much XSS Vulnerability Protection is React Responsible For?”

20. React.js • ユーザが入力した文字列から生成した新しい DOM node を挿入したい • Ex.) Markdown から変換された文字列

21. React.js ```Markdown ** edomaesec! ** ```HTML edomaesec!

22. React.js • 直に innerHTML を叩くと怒られる • React 版 innerHTML •  dangerouslySetInnerHTML API の利用

23. dangerouslySetInnerHTML

24. dangerouslySetInnerHTML • 公式の Tutorial でも Backdoor な API として使っている • こんな風に使う

25. dangerouslySetInnerHTML var str = "edomaesec!"; var obj = { __html: str }; React.render( , document.body );

27. dangerouslySetInnerHTML • 公式の docs より抜粋・翻訳 -- 不安を感じる言葉で意図的に名付けました。 -- プロパティ値はサニタイズされたデータを示す -- ために使われることでしょう。

28. dangerouslySetInnerHTML • どれほど dangerously なのか分からない • ソースコードを追ってみた • react.js v0.13.3 ( 全19602行 ) • デバッガ使いましょう

30. dangerouslySetInnerHTML var str = "edomaesec!"; var obj = { __html: str }; React.render( React.createElement( "span", {dangerouslySetInnerHTML: obj} ), document.body );

31. dangerouslySetInnerHTML • L: 9928 ReactElement { key: “span”, _store: { props: { dangerouslySetInnerHTML: { __html: str } } } }

32. dangerouslySetInnerHTML • ( DOM更新のトランザクションを開くコードが永遠と続くので中略)

33. dangerouslySetInnerHTML • L: 7641 mountComponent return _createOpenTagMarkupAndPutListeners + _createContentMarkup + closeTag

34. dangerouslySetInnerHTML • L: 7641 mountComponent return _createOpenTagMarkupAndPutListeners + _createContentMarkup +

35. dangerouslySetInnerHTML • L: 7664 _createOpenTagMarkupAndPut… return + _createContentMarkup +

36. dangerouslySetInnerHTML • L: 7641 return + _createContentMarkup +

37. dangerouslySetInnerHTML • L: 7711 _createContentMarkup var innerHTML = props.dangerouslySetInnerHTML; return "" + innerHTML.__html; • __html の内容について何も確認なし

38. dangerouslySetInnerHTML • L: 7641 return + edomaesec! +

39. dangerouslySetInnerHTML • L: 18971 setInnerHTML node.innerHTML = html; // html  先程 return された文字列

40. Demo • str = "<input autofocus onfocus=alert(1)>" を代入してみる

41. まとめ • React.js の dangerouslySetInnerHTML API は通常の innerHTML 挿入と等価である • 使わないようにリスク回避で設計したい • dangerouslySetInnerHTML を利用する際はエスケープ（場合によってはサニタイズ）した文字列を代入させる

42. まとめサニタイズって簡単に言うけれども… • RickDOM の使用 • marked.js の sanitize parameter を true にする ( Markdown のみ） • HTML5 sandboxed iframe で wrap しておく ( js の実行を抑制 )

43. 参考資料 • Dangerously Set innerHTML | React – e10s https://facebook.github.io/react/tips/dangero usly-set-inner-html.html • Yosuke Hasegawa『文字列から HTML を組み立てる話』@Shibuya.XSS techtalk #5 http://utf-8.jp/public/20140807/shibuyaxss.pdf

React.js に XSS 対策を求めるのは間違っているだろうか

Ryo Kato

Transcript