Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Thank you 13