ReactとXSS2021/07/15山田悠之介
View Slide
XSS (Cross-site scripting)悪意のあるスクリプトを閲覧者のブラウザで実行すること反射型 XSS、格納型 XSS、DOM Based XSS などの種類があるがいずれも XSS するためには文字列として入力したスクリプトを標的となるサイトで実行させなければならない2
ReactReact では XSS 対策として文字列はエスケープされる。https://ja.reactjs.org/docs/jsx-in-depth.html#string-literals3
生成される HTMLexport default function Home() {const script = `<br/><br/>while (1) {<br/><br/>alert('!');<br/><br/>}<br/><br/>`;return {script};}↓<script> while (1) { alert('!'); } </script>4
innerHTML標準の JS や jQuery で HTML を動的に生成するときにはinnerHTML を使っていた。React では...5
dangerouslySetInnerHTMLhttps://ja.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtmlexport default function Home() {const script = ...const html = { __html: script };return (;);}6
href, srcexport default function Home() {const script = `javascript:while (1) {alert('!');}`;return (link);}7
"javascript:"は deprecatedhttps://reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-javascript-urls将来的にはエラーにする8
その他DOM 要素の取得 (findDOMNode, createRef) からのinnerHTMLcreateElementSSR + Reduxeval(React 関係ないけど)9
回避するにはユーザの入力を無害化するDOMPurify10
import DOMPurify from "isomorphic-dompurify";export default function Home() {const script = "...Hello";const html = { __html: DOMPurify.sanitize(script) };return ();}↓Hello11
参考資料https://zenn.dev/yuuhu04/books/xss-anti-pattern-of-react-and-vue最初に読んだhttps://pragmaticwebsecurity.com/articles/spasecurity/react-xss-part1.htmlpart3 まである網羅的12
Thank you13