Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React and XSS
Search
Yunosuke Yamada
October 16, 2022
Programming
0
280
React and XSS
Yunosuke Yamada
October 16, 2022
Tweet
Share
More Decks by Yunosuke Yamada
See All by Yunosuke Yamada
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
0
190
ChatGPTのアルゴリズム
yunosukey
0
360
DB Tree Algorithms
yunosukey
0
93
Tests in Go
yunosukey
1
110
Bugless Code
yunosukey
0
120
圏論とコンピュータサイエンス / Category Theory and Theoretical Computer Science
yunosukey
0
260
Other Decks in Programming
See All in Programming
英語 × の私が、生成AIの力を借りて、OSSに初コントリビュートした話
personabb
0
180
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
140
Rollupのビルド時間高速化によるプレビュー表示速度改善とバンドラとASTを駆使したプロダクト開発の難しさ
plaidtech
PRO
1
160
5年間継続して開発した自作OSSの記録
bebeji_nappa
0
130
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
610
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
190
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
460
custom_lintで始めるチームルール管理
akaboshinit
0
200
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.1k
Do Dumb Things
mitsuhiko
0
410
DataStoreをテストする
mkeeda
0
280
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
140
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
640
Documentation Writing (for coders)
carmenintech
69
4.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
What's in a price? How to price your products and services
michaelherold
245
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
Side Projects
sachag
452
42k
Code Reviewing Like a Champion
maltzj
522
39k
Transcript
ReactとXSS 2021/07/15 山田悠之介
XSS (Cross-site scripting) 悪意のあるスクリプトを閲覧者のブラウザで実行すること 反射型 XSS、格納型 XSS、DOM Based XSS などの種類があるが
いずれも XSS するためには文字列として入力したスクリプトを 標的となるサイトで実行させなければならない 2
React React では XSS 対策として文字列はエスケープされる。 https://ja.reactjs.org/docs/jsx-in-depth.html#string-literals 3
生成される HTML export default function Home() { const script =
` <script> while (1) { alert('!'); } </script>`; return <main>{script}</main>; } ↓ <main><script> while (1) { alert('!'); } </script></main> 4
innerHTML 標準の JS や jQuery で HTML を動的に生成するときには innerHTML を使っていた。
React では... 5
dangerouslySetInnerHTML https://ja.reactjs.org/docs/dom- elements.html#dangerouslysetinnerhtml export default function Home() { const script
= ... const html = { __html: script }; return ( <main> <div dangerouslySetInnerHTML={html} />; </main> ); } 6
href, src export default function Home() { const script =
` javascript: while (1) { alert('!'); }`; return ( <main> <a href={script}>link</a> </main> ); } 7
"javascript:"は deprecated https://reactjs.org/blog/2019/08/08/react- v16.9.0.html#deprecating-javascript-urls 将来的にはエラーにする 8
その他 DOM 要素の取得 (findDOMNode, createRef) からの innerHTML createElement SSR +
Redux eval(React 関係ないけど) 9
回避するには ユーザの入力を無害化する DOMPurify 10
import DOMPurify from "isomorphic-dompurify"; export default function Home() { const
script = "<script>...</script>Hello"; const html = { __html: DOMPurify.sanitize(script) }; return ( <main> <div dangerouslySetInnerHTML={html} /> </main> ); } ↓ <main><div>Hello</div></main> 11
参考資料 https://zenn.dev/yuuhu04/books/xss-anti-pattern-of-react- and-vue 最初に読んだ https://pragmaticwebsecurity.com/articles/spasecurity/react -xss-part1.html part3 まである 網羅的 12
Thank you 13