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
330
React and XSS
Yunosuke Yamada
October 16, 2022
Tweet
Share
More Decks by Yunosuke Yamada
See All by Yunosuke Yamada
DevOps/MLOpsに学ぶエージェントの可観測性
yunosukey
1
420
Agent Development Kitで作るマルチエージェントアプリケーション(AIAgent勉強会)
yunosukey
4
1.2k
Agent Development Kitで作るマルチエージェントアプリケーション(GCNT2025)
yunosukey
0
36
AIエージェントのオブザーバビリティについて
yunosukey
1
750
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
720
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
340
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
1
280
ChatGPTのアルゴリズム
yunosukey
0
390
DB Tree Algorithms
yunosukey
0
110
Other Decks in Programming
See All in Programming
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
970
スマホから Youtube Shortsを見られないようにする
lemolatoon
17
17k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
140
Serena MCPのすすめ
wadakatu
4
960
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
280
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
150
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
660
CSC509 Lecture 04
javiergs
PRO
0
300
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
0
110
チームの境界をブチ抜いていけ
tokai235
0
150
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
The Language of Interfaces
destraynor
162
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Visualization
eitanlees
148
16k
Statistics for Hackers
jakevdp
799
220k
Producing Creativity
orderedlist
PRO
347
40k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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