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
640
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
500
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
270
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
1
240
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
290
Other Decks in Programming
See All in Programming
Datadog RUM 本番導入までの道
shinter61
1
300
無関心の谷
kanayannet
0
180
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
230
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
120
KotlinConf 2025 現地参加の土産話
n_takehata
0
100
FormFlow - Build Stunning Multistep Forms
yceruto
1
180
業務自動化をJavaとSeleniumとAWS Lambdaで実現した方法
greenflagproject
1
120
Gleamという選択肢
comamoca
6
740
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
800
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
580
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
1
330
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
3
2k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Code Reviewing Like a Champion
maltzj
524
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
190
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Building Applications with DynamoDB
mza
95
6.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
GitHub's CSS Performance
jonrohan
1031
460k
The Language of Interfaces
destraynor
158
25k
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