Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React and XSS

React and XSS

Yunosuke Yamada

October 16, 2022
Tweet

More Decks by Yunosuke Yamada

Other Decks in Programming

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