Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
'Securing Web Apps with Modern Platform Feature...
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
sunecosuri
June 19, 2019
Programming
410
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
'Securing Web Apps with Modern Platform Features' を意訳してみる / Translate Securing Web Apps with Modern Platform Features
https://mentaico-js.connpass.com/event/132416/
sunecosuri
June 19, 2019
More Decks by sunecosuri
See All by sunecosuri
New in Go 1.26 Implementing go fix in product development
sunecosuri
0
930
Vue.js × TypeScript でclass style componentを廃止した話 / migrated-class-style-component -for-vuejs-and-typescrpit
sunecosuri
2
4.5k
Nuxt.js のbuid速度が早くなるオプションのいくつかについて / Increase-build-speed-for-Nuxt.js
sunecosuri
1
1.4k
about-vue-hooks.pdf
sunecosuri
1
790
Nuxt.js におけるCSPの連携について / content security policy for Nuxt.js
sunecosuri
0
2.6k
ロリポップマネージドクラウドでAlexaスキルを開発しよう / let's development alexa skill by lolipop managed cloud
sunecosuri
1
250
マネージドクラウドのリリース速度を上げるお話 / Increase release speed for managed cloud
sunecosuri
2
370
Reconsider Content Security Policy for WEB Application
sunecosuri
0
130
Other Decks in Programming
See All in Programming
作れる、でも消せるか?──安全に「枯らして消す」機能削除術 / Drain, Then Delete
chobishiba
2
1.2k
Vue.jsで作る空間解析アプリとCapacitorプラグインのData Bridge
hal_spidernight
1
120
複雑なUIコンポーネントとの ⻑い付き合い⽅:波及するバグからテスト戦略を経て、安全な再設計へ
mixplace
0
480
クラウドエージェントは、 何がそんなに便利なのか / what makes cloud agents so useful
rkaga
3
600
個人開発者よ、Honoを使え(おじさんver)
tanahiro2010
2
280
【加筆修正版】Laravel のアプリケーションをどこにデプロイするか #phpcon_ehime
akase244
0
160
Kotlinize Is Not Just Converting to Kotlin
chigichan24
1
200
Groovy as a human and AI friendly programming language
paulk
0
120
TanStack Vue Query と Pinia Colada から学ぶ非同期状態の型設計
aoshi
0
340
contenteditable と日本語入力に向き合う
colorful12
0
230
プロジェクトコードをキレイキレイしよう!暗黙的な参照を読み解く静的解析
ostk0069
0
130
Spec-Driven Development - Why Vaadin Is the Perfect Fit
simas
PRO
0
140
Featured
See All Featured
The agentic SEO stack - context over prompts
schlessera
0
980
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
720
Thoughts on Productivity
jonyablonski
76
5.4k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
290
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
How to Talk to Developers About Accessibility
jct
2
590
Between Models and Reality
mayunak
4
520
The Spectacular Lies of Maps
axbom
PRO
1
1.1k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
800
Art, The Web, and Tiny UX
lynnandtonic
304
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
371
20k
Become a Pro
speakerdeck
PRO
31
6.3k
Transcript
Securing Web Apps with Modern Platform Features Securing Web Apps
with Modern Platform Features @sunecosuri Date: 2019-06-19 Google I/O’19 ͷWebΛ·ͱΊΔձ Λ·ͱΊͯΈΔ
Securing Web Apps with Modern Platform Features ҙ ·ͱΊͯΈΔɺͱॻ͍ͨͷͷ Ұ෦Λં͍ͬͯΔՕॴ͕͋ΔͨΊશͯ·ͱΊΒΕ͍ͯ·ͤΜ
ৄࡉݩͷಈըʹͳΔηογϣϯΛ͝ཡ͍ͩ͘͞ https://www.youtube.com/watch?v=DDtM9caQ97I
GMOϖύϘ ΤϯδχΞ ϗεςΟϯάࣄۀ෦ϗεςΟϯάάϧʔϓ ໐ւ ߂ً / @sunecosuri ϚωʔδυΫϥυνʔϜ
Overview Overview XSSCSRFͳͲͷ͋Γ͕ͪͳ੬ऑੑ͖ʹͬͯWebΛ·ͤɺ·ͨGoogleͷ Vulnerability Reward ProgramͰසൟʹใࠂ͞Ε͍ͯ·͢ɻ࠷৽ͷWebϓϥοτϑΥʔϜʹ ͓͚ΔηΩϡϦςΟͷΈΛֶΜͰɺ͋ͳͨͷαʔϏεΛΠϯδΣΫγϣϯ͔Β͍Ͱةݥͳ αΠτ͔Βִ͠·͠ΐ͏ɻ ·ͨɺWebͰͬͱηϯγςΟϒͳΞϓϦΛक͍ͬͯΔGoogleͷηΩϡϦςΟνʔϜͷܦݧ ʹΑͬͯಘΒΕͨϒϥβͷ৽ػೳʹΑͬͯɺ͋ͳͨͷΞϓϦέʔγϣϯΛकΔͨΊͷνΣοΫ
ϦετΛΓ·͠ΐ͏ɻ ͜ ͷ η ο γ ϣ ϯ ʹ ͭ ͍ ͯ
όάใࠂใ੍ۚͷڈͷׂ߹
Cross-site scripting Cross-site scripting (XSS) I n j e c
t i o n s 1. ϩάΠϯϢʔβʔ͕߈ܸऀͷϖʔδΛ๚ 2. ߈ܸऀ͕ϢʔβʔΛ੬ऑͳURLʹ༠ಋ͢Δ https://test.example/?query=<script src=“//evil/” > 3. εΫϦϓτ͕࣮ߦ͞Εɺ߈ܸऀ͕ϢʔβʔͷઃఆʹΞΫηε͢Δ
XSS is turai ͜ΕΒͷΠϯδΣΫγϣϯ߈ܸ ʹରͯ͠XSSۀքશମͰେ͖ ͳͱͳ͍ͬͯΔ
Let’s start CSP ·ͣɺίϯςϯπηΩϡϦςΟ ϙϦγʔ͔Β࢝Ί·͠ΐ͏
Content Security Policy Content Security Policy Level3 Ϧ ι ʔε
୯ Ґ Ͱ s c r i p t ͷ ࣮ ߦ Λ ੍ ޚ Ͱ ͖ Δ ػ ߏ ΞϓϦέʔγϣϯͷεΫϦϓτ࣮ߦʹؔ͢Δ͖Ίࡉ͔͘ ੍ޚ͢ΔΈΛಋೖͯ͠XSS͔Βޚ͢Δ scriptͷ࣮ߦϓϥάΠϯͷಡΈࠐΈΛίϯτϩʔϧ͢Δ ͜ͱ͕Ͱ͖Δ CSPɺదͳΤεέʔϓ·ͨXSSΛڐ༰͢ΔόάΛमਖ਼͢ΔͷͰ͋Γ·ͤΜ
How to implement Ͳ͏࣮ͬͯ͢Δͷ͔
Content Security Policy CSPHTTP Response Header Chrome dev tools ͷNetworkλϒ͔ΒͷΩϟϓνϟ
ࢦఆͨ͠Ϩεϙϯεʹؔ͢ΔϙϦγʔΛɺϒϥβଆͰ औಘ͠ɺࢦఆͨ͠ϙϦγʔΛಡΜͰ࣮ߦՄ൱Λ੍ޚ͢Δ
support for reports CSPϨϙʔτઐ༻Ϟʔυα ϙʔτ͍ͯ͠·͢
support for reports
Content Security Policy Nonce-Based CSP ͷߟ͑ํ ͜ͷΑ͏ʹCSPΛઃఆ͢Δͱ nonce ͳ͠ͷscriptϒϥβʹΑͬͯϒϩοΫ ༗ޮͳnonceΛ࣋ͭεΫϦϓτλάͰ͋Ε࣮ߦ
্هͷΑ͏ͳnonceΛϦΫΤετ͝ͱʹมߋ͢Ε߈ܸऀ༧ଌͰ͖ͳ͍
CDNͱ͔ͷଞͷॴͰ ϗετ͞Ε͍ͯΔJavaScript࣮ߦ ͞Εͳ͘ͳͬͯ͠·͏ͷͰ…ʁ
Content Security Policy ͦͷͨΊͷ ‘strict-dynamic’ strict-dynamic Λ༻͢Δͱɺ͢Ͱʹ৴པ͞Ε͍ͯΔεΫϦϓτΛڐՄ͢Δ͜ͱͰɺ nonceͷ͍ͭͨεΫϦϓτ͔Βੜ͞ΕͨεΫϦϓτ࣮ߦՄೳʹͳΔ ࣮ߦ͞ΕΔ
Content Security Policy ͲͷΑ͏ʹಋೖ͢Δ͔ 1. onclickhrefͰࢦఆ͞ΕΔΠϯϥΠϯΠϕϯτϋϯυϥʔΛͳ͘͢ 2.αʔόʔαΠυςϯϓϨʔτʹͯnonceΛࢦఆ͢Δ 3.ϨεϙϯεϔομʔͰCSPΛࢦఆ͢Δ
Trusted Types Trusted-types D o m ͷ ߋ ৽ ʹ
੍ Λ ઃ ͚ Δ ͜ ͱ ͕ Ͱ ͖ Δ ػ ߏ 1. ݸผʹఆٛͨ͠Trusted Type Policies͔Βੜ͞ΕΔ Trusted TypesΦϒδΣΫτͰͷΈɺDOMΛߋ৽Ͱ͖Δ 2.αχλΠζͷॲཧΛϙϦγʔΦϒδΣΫτʹूͰ͖Δ https://github.com/WICG/trusted-types ʹͯɺ શͯͷϒϥβͰػೳ͢Δ Polyfill ༻ҙ͞Ε͓ͯΓࢼͤΔΑ͏ʹͳ͍ͬͯΔ
1. validation ruleΛఆٛͨ͠ϙϦγʔΛ࡞͢Δ 2. ϙϦγʔΛ༻ͯ͠৴པͰ͖ΔܕͷΦϒδΣΫτΛ࡞͢Δ ͋
3. ࡞ͨ͠ ”samplePolicy” Λ CSPheader ʹՃ͢Δ͜ͱͰར༻Ͱ͖Δ Trusted Types Trusted-types D o m ͷ ߋ ৽ ʹ ੍ Λ ઃ ͚ Δ ͜ ͱ ͕ Ͱ ͖ Δ ػ ߏ
Trusted Types Default Policy String ͕ೖͬͨ࣌ͷ fallbackͱͯ͠ػೳ͢Δ 1. validation ruleΛఆٛͨ͠ϙϦγʔΛ࡞͢Δ
2. CSP headerʹՃ͢Δ
Trusted Types 1. ݸผʹఆٛͨ͠Trusted Type Policies͔Βੜ͞ΕΔTrusted TypesΦϒδΣΫτͰͷΈɺ DOMΛߋ৽Ͱ͖Δ 2. αχλΠζͷॲཧΛϙϦγʔΦϒδΣΫτʹूͰ͖Δ
ৄ͘͠ https://github.com/WICG/trusted-types ͳʹ͕خ͍͠ͷ͔ T r u s t e d T y p e s ͷ
cross-site request forgeries CSRFରࡦͷ
cross-site request forgeries • same-origin: ಉ͡εΩʔϚɺϗετɺϙʔτΛ࣋ͬͨαΠτಉ࢜ͷ͜ͱ - https://www.google.com/foo -
https://www.google.com/bar • same-site: ಉ͡εΩʔϚͱυϝΠϯΛ࣋ͬͨαΠτಉ࢜ͷ͜ͱ - https://mail.google.com - https://photos.google.com • cross-site: ͦͷଞ (https://www.youtube.com/, https://www.google.com/) Origin ͱ Site ͷҧ͍ʹ͍ͭͯ
Sec-Fetch-Site Sec-Fetch-Modeʹ͍ͭͯ কདྷతʹheaderͰಉҰorigin͔corsͳͲผͰ͖Δ
͓͠·͍