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
220
React and XSS
Yunosuke Yamada
October 16, 2022
Tweet
Share
More Decks by Yunosuke Yamada
See All by Yunosuke Yamada
ChatGPTのアルゴリズム
yunosukey
0
340
DB Tree Algorithms
yunosukey
0
84
Tests in Go
yunosukey
1
99
Bugless Code
yunosukey
0
110
圏論とコンピュータサイエンス / Category Theory and Theoretical Computer Science
yunosukey
0
210
Other Decks in Programming
See All in Programming
日付と正規化
megmogmog1965
0
140
生成AIをkintoneに連携してみた
hideg
0
230
ドメイン駆動設計の実践
masuda220
PRO
19
5.2k
CSC307 Lecture 12
javiergs
PRO
0
220
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
AHC035解説
terryu16
0
720
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
유연한 Composable 설계
l2hyunwoo
0
380
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Making Projects Easy
brettharned
111
5.7k
Designing with Data
zakiwarfel
96
5k
Designing the Hi-DPI Web
ddemaree
276
34k
Faster Mobile Websites
deanohume
303
30k
A Philosophy of Restraint
colly
200
16k
It's Worth the Effort
3n
181
27k
GraphQLとの向き合い方2022年版
quramy
36
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Writing Fast Ruby
sferik
623
60k
What the flash - Photography Introduction
edds
65
11k
Building an army of robots
kneath
301
42k
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