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
680
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
570
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
290
フロントエンドオブザーバビリティ 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
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
220
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
15k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
3.8k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.1k
20250708_JAWS_opscdk
takuyay0ne
2
130
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
AIともっと楽するE2Eテスト
myohei
8
3k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
Goで作る、開発・CI環境
sin392
0
260
GPUを計算資源として使おう!
primenumber
1
250
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Featured
See All Featured
Scaling GitHub
holman
460
140k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Producing Creativity
orderedlist
PRO
346
40k
A designer walks into a library…
pauljervisheath
207
24k
How to Ace a Technical Interview
jacobian
278
23k
Speed Design
sergeychernyshev
32
1k
Side Projects
sachag
455
42k
Faster Mobile Websites
deanohume
308
31k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Navigating Team Friction
lara
187
15k
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