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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
sunecosuri
June 19, 2019
Programming
380
2
Share
'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
590
Vue.js × TypeScript でclass style componentを廃止した話 / migrated-class-style-component -for-vuejs-and-typescrpit
sunecosuri
2
4.4k
Nuxt.js のbuid速度が早くなるオプションのいくつかについて / Increase-build-speed-for-Nuxt.js
sunecosuri
1
1.4k
about-vue-hooks.pdf
sunecosuri
1
760
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
240
マネージドクラウドのリリース速度を上げるお話 / Increase release speed for managed cloud
sunecosuri
2
360
Reconsider Content Security Policy for WEB Application
sunecosuri
0
120
Other Decks in Programming
See All in Programming
セグメントとターゲットを意識するプロポーザルの書き方 〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜
m3m0r7
PRO
0
730
Firefoxにコントリビューションして得られた学び
ken7253
2
150
Don't Prompt Harder, Structure Better
kitasuke
0
800
Symfony AI in Action - SymfonyLive Berlin 2026
chr_hertel
1
110
Running Swift without an OS
kishikawakatsumi
0
870
AWSコミュニティ活動は顧客のクラウド推進に効くのか / Do AWS community activities help customers adopt the cloud?
seike460
PRO
0
160
書籍「ユーザーストーリーマッピング」が私のバイブル
asumikam
4
460
【26新卒研修資料】TDD実装演習
dip_tech
PRO
0
160
なぜあなたのコードには「コシ」がないのか?〜AI時代に問う、最後まで美味しい設計と戦略〜 #phpconkagawa / phpconkagawa2026
shogogg
0
110
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
kiichisugihara
1
250
tRPCの概要と少しだけパフォーマンス
misoton665
2
260
KMP × Kotlin 2.3 - How Android Got Slower While iOS Builds Improved by 47%
rio432
0
110
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
34k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
350
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.2k
Building Applications with DynamoDB
mza
96
7k
Raft: Consensus for Rubyists
vanstee
141
7.4k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
180
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Building the Perfect Custom Keyboard
takai
2
740
Side Projects
sachag
455
43k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.9k
Tell your own story through comics
letsgokoyo
1
910
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.1k
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ͳͲผͰ͖Δ
͓͠·͍