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
310
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
0
47
Agent Development Kitで作るマルチエージェントアプリケーション(GCNT2025)
yunosukey
0
11
AIエージェントのオブザーバビリティについて
yunosukey
1
700
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
620
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
300
フロントエンドオブザーバビリティ on Google Cloud
yunosukey
1
260
ChatGPTのアルゴリズム
yunosukey
0
380
DB Tree Algorithms
yunosukey
0
110
Tests in Go
yunosukey
1
120
Other Decks in Programming
See All in Programming
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
2
460
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
780
TypeScriptでDXを上げろ! Hono編
yusukebe
4
930
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
270
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
520
DataformでPythonする / dataform-de-python
snhryt
0
150
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
190
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
6
1.6k
Jakarta EE Meets AI
ivargrimstad
0
570
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
510
構文解析器入門
ydah
7
2k
AIのメモリー
watany
12
1.2k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Navigating Team Friction
lara
188
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
BBQ
matthewcrist
89
9.8k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Fireside Chat
paigeccino
38
3.6k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Agile that works and the tools we love
rasmusluckow
329
21k
Automating Front-end Workflow
addyosmani
1370
200k
Building Applications with DynamoDB
mza
95
6.5k
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