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
180
React and XSS
Yunosuke Yamada
October 16, 2022
Tweet
Share
More Decks by Yunosuke Yamada
See All by Yunosuke Yamada
ChatGPTのアルゴリズム
yunosukey
0
320
DB Tree Algorithms
yunosukey
0
81
Tests in Go
yunosukey
1
86
Bugless Code
yunosukey
0
110
圏論とコンピュータサイエンス / Category Theory and Theoretical Computer Science
yunosukey
0
190
Other Decks in Programming
See All in Programming
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
ログラスを支える設計標準について / loglass-design-standards
urmot
10
2.1k
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
7.8k
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
230
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
330
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
18
4.8k
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
100
Featured
See All Featured
Building Adaptive Systems
keathley
30
1.8k
It's Worth the Effort
3n
180
27k
Building Applications with DynamoDB
mza
88
5.6k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Designing for humans not robots
tammielis
247
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Visualization
eitanlees
135
14k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
The Cult of Friendly URLs
andyhume
74
5.7k
A Modern Web Designer's Workflow
chriscoyier
688
190k
Docker and Python
trallard
33
2.7k
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