React and XSS

Transcript

1. ReactとXSS
   2021/07/15
   
   山田悠之介
   

   View Slide

2. XSS (Cross-site scripting)
   悪意のあるスクリプトを閲覧者のブラウザで実行すること
   反射型 XSS、格納型 XSS、DOM Based XSS などの種類があるが
   
   いずれも XSS するためには文字列として入力したスクリプトを
   
   標的となるサイトで実行させなければならない
   2
   

   View Slide

3. React
   React では XSS 対策として文字列はエスケープされる。
   https://ja.reactjs.org/docs/jsx-in-depth.html#string-literals
   3
   

   View Slide

4. 生成される HTML
   export default function Home() {
   const script = `
   
   <br/><br/>while (1) {<br/><br/>alert('!');<br/><br/>}<br/><br/>`;
   
   return {script};
   
   }
   
   ↓
   <script> while (1) { alert('!'); } </script>
   
   4
   

   View Slide

5. innerHTML
   標準の JS や jQuery で HTML を動的に生成するときには
   innerHTML を使っていた。
   React では...
   5
   

   View Slide

6. dangerouslySetInnerHTML
   https://ja.reactjs.org/docs/dom-
   elements.html#dangerouslysetinnerhtml
   export default function Home() {
   const script = ...
   const html = { __html: script };
   
   return (
   
   
   
   ;
   
   
   
   );
   }
   
   6
   

   View Slide

7. href, src
   export default function Home() {
   const script = `
   
   javascript:
   
   while (1) {
   
   alert('!');
   
   }`;
   
   return (
   
   
   
   link
   
   
   
   );
   }
   
   7
   

   View Slide

8. "javascript:"は deprecated
   https://reactjs.org/blog/2019/08/08/react-
   v16.9.0.html#deprecating-javascript-urls
   将来的にはエラーにする
   8
   

   View Slide

9. その他
   DOM 要素の取得 (findDOMNode, createRef) からの
   innerHTML
   createElement
   SSR + Redux
   eval（React 関係ないけど）
   9
   

   View Slide

10. 回避するには
    ユーザの入力を無害化する
    DOMPurify
    10
    

    View Slide

11. import DOMPurify from "isomorphic-dompurify";
    
    export default function Home() {
    const script = "...Hello";
    
    const html = { __html: DOMPurify.sanitize(script) };
    
    return (
    
    
    
    
    
    
    );
    }
    
    ↓
    Hello
    
    11
    

    View Slide

12. 参考資料
    https://zenn.dev/yuuhu04/books/xss-anti-pattern-of-react-
    and-vue
    最初に読んだ
    https://pragmaticwebsecurity.com/articles/spasecurity/react
    -xss-part1.html
    part3 まである
    網羅的
    12
    

    View Slide

13. Thank you
    13
    

    View Slide