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
'Securing Web Apps with Modern Platform Feature...
Search
sunecosuri
June 19, 2019
Programming
2
350
'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
Tweet
Share
More Decks by sunecosuri
See All by sunecosuri
Vue.js × TypeScript でclass style componentを廃止した話 / migrated-class-style-component -for-vuejs-and-typescrpit
sunecosuri
2
4.3k
Nuxt.js のbuid速度が早くなるオプションのいくつかについて / Increase-build-speed-for-Nuxt.js
sunecosuri
1
1.4k
about-vue-hooks.pdf
sunecosuri
1
720
Nuxt.js におけるCSPの連携について / content security policy for Nuxt.js
sunecosuri
0
2.5k
ロリポップマネージドクラウドでAlexaスキルを開発しよう / let's development alexa skill by lolipop managed cloud
sunecosuri
1
210
マネージドクラウドのリリース速度を上げるお話 / Increase release speed for managed cloud
sunecosuri
2
330
Reconsider Content Security Policy for WEB Application
sunecosuri
0
98
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
29k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.3k
Team operations that are not burdened by SRE
kazatohiei
1
310
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building Applications with DynamoDB
mza
95
6.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Become a Pro
speakerdeck
PRO
29
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How GitHub (no longer) Works
holman
314
140k
Statistics for Hackers
jakevdp
799
220k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
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ͳͲผͰ͖Δ
͓͠·͍