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
320
React and XSS
Yunosuke Yamada
October 16, 2022
Tweet
Share
More Decks by Yunosuke Yamada
See All by Yunosuke Yamada
Agent Development Kitで作るマルチエージェントアプリケーション(AIAgent勉強会)
yunosukey
4
880
Agent Development Kitで作るマルチエージェントアプリケーション(GCNT2025)
yunosukey
0
19
AIエージェントのオブザーバビリティについて
yunosukey
1
720
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
660
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
300
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
1
270
ChatGPTのアルゴリズム
yunosukey
0
380
DB Tree Algorithms
yunosukey
0
110
Tests in Go
yunosukey
1
120
Other Decks in Programming
See All in Programming
Constant integer division faster than compiler-generated code
herumi
2
670
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
640
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
100
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
250
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
2
480
JetBrainsのAI機能の紹介 #jjug
yusuke
0
210
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
180
新しいモバイルアプリ勉強会(仮)について
uetyo
1
260
Honoアップデート 2025年夏
yusukebe
1
820
ワープロって実は計算機で
pepepper
2
1.4k
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Automating Front-end Workflow
addyosmani
1370
200k
4 Signs Your Business is Dying
shpigford
184
22k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Code Reviewing Like a Champion
maltzj
525
40k
Making Projects Easy
brettharned
117
6.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Producing Creativity
orderedlist
PRO
347
40k
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