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
290
React and XSS
Yunosuke Yamada
October 16, 2022
Tweet
Share
More Decks by Yunosuke Yamada
See All by Yunosuke Yamada
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
130
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
0
200
ChatGPTのアルゴリズム
yunosukey
0
360
DB Tree Algorithms
yunosukey
0
96
Tests in Go
yunosukey
1
110
Bugless Code
yunosukey
0
130
圏論とコンピュータサイエンス / Category Theory and Theoretical Computer Science
yunosukey
0
260
Other Decks in Programming
See All in Programming
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
300
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
740
Lambda(Python)の リファクタリングが好きなんです
komakichi
3
190
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
150
AIコーディングワークフローの試行 〜AIエージェント×ワークフローでの自動化を目指して〜
rkaga
2
3.6k
AI Coding Agent Enablement - エージェントを自走させよう
yukukotani
14
6k
5年間継続して開発した自作OSSの記録
bebeji_nappa
0
200
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
110
Exit 8 for SwiftUI
ojun9
0
130
State of Namespace
tagomoris
4
1.4k
DataStoreをテストする
mkeeda
0
290
Making TCPSocket.new "Happy"!
coe401_
1
1.1k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Done Done
chrislema
183
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Fireside Chat
paigeccino
37
3.4k
Practical Orchestrator
shlominoach
186
10k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
344
40k
Gamification - CAS2011
davidbonilla
81
5.2k
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