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
300
React and XSS
Yunosuke Yamada
October 16, 2022
Tweet
Share
More Decks by Yunosuke Yamada
See All by Yunosuke Yamada
AIエージェントのオブザーバビリティについて
yunosukey
1
550
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
380
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
250
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
1
230
ChatGPTのアルゴリズム
yunosukey
0
370
DB Tree Algorithms
yunosukey
0
99
Tests in Go
yunosukey
1
110
Bugless Code
yunosukey
0
140
圏論とコンピュータサイエンス / Category Theory and Theoretical Computer Science
yunosukey
0
280
Other Decks in Programming
See All in Programming
コードに語らせよう――自己ドキュメント化が内包する楽しさについて / Let the Code Speak
nrslib
5
810
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.5k
tsconfigのオプションで変わる型世界
keisukeikeda
1
120
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
PRO
2
730
Duke on CRaC with Jakarta EE
ivargrimstad
1
690
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.4k
テスト分析入門/Test Analysis Tutorial
goyoki
11
2.7k
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
180
Agent Rules as Domain Parser
yodakeisuke
1
290
がんばりすぎないコーディングルール運用術
tsukakei
1
170
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
700
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
52
7.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
GitHub's CSS Performance
jonrohan
1031
460k
A designer walks into a library…
pauljervisheath
205
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
105
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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