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
940
Agent Development Kitで作るマルチエージェントアプリケーション(GCNT2025)
yunosukey
0
20
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
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
コンテキストエンジニアリング Cursor編
kinopeee
1
710
実践!App Intents対応
yuukiw00w
1
350
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
AIコーディングAgentとの向き合い方
eycjur
0
230
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
130
MLH State of the League: 2026 Season
theycallmeswift
0
160
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
210
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
Understanding Ruby Grammar Through Conflicts
yui_knk
1
130
Rancher と Terraform
fufuhu
0
110
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Invisible Side of Design
smashingmag
301
51k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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