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
310
React and XSS
Yunosuke Yamada
October 16, 2022
Tweet
Share
More Decks by Yunosuke Yamada
See All by Yunosuke Yamada
AIエージェントのオブザーバビリティについて
yunosukey
1
670
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
560
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
280
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
1
250
ChatGPTのアルゴリズム
yunosukey
0
380
DB Tree Algorithms
yunosukey
0
100
Tests in Go
yunosukey
1
120
Bugless Code
yunosukey
0
140
圏論とコンピュータサイエンス / Category Theory and Theoretical Computer Science
yunosukey
0
290
Other Decks in Programming
See All in Programming
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
110
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
XP, Testing and ninja testing
m_seki
3
250
Hack Claude Code with Claude Code
choplin
5
2.3k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.4k
What's new in AppKit on macOS 26
1024jp
0
120
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
0
150
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
800
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
20
8.2k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Six Lessons from altMBA
skipperchong
28
3.9k
The Cult of Friendly URLs
andyhume
79
6.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
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