Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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