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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
640
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
770
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
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
pyama86
3
1.7k
[BalkanRuby 2026] Drop your app/services!
palkan
3
700
バックエンドにElysiaJSを採用して気付いた、良い点・悪い点
wanko_it
1
180
~ 秘伝のタレ化した『神スプシ』と戦う ~ 関数型パラダイムで壊れない仕組みへ
h0r15h0
1
130
iOS26時代の新規アプリ開発
yuukiw00w
0
210
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
kuranuki
1
260
Swiftのレキシカルスコープ管理
kntkymt
0
200
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
2
410
ECR拡張スキャンでSBOMを収集して サプライチェーン攻撃の影響調査を 爆速で終わらせてみた
akihisaikeda
2
200
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
izumin5210
2
850
次世代リンターで探る、tsgo 時代における型認識カスタムルールの現実解
ytakahashii
3
1.1k
不変条件と整合性境界—ビジネスが決める設計判断と実現パターン / Invariants and Consistency Boundaries
nrslib
10
2.7k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
6.1k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Google's AI Overviews - The New Search
badams
0
1k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
70
39k
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
190
Balancing Empowerment & Direction
lara
6
1.1k
The agentic SEO stack - context over prompts
schlessera
0
790
Information Architects: The Missing Link in Design Systems
soysaucechin
0
940
Building a Modern Day E-commerce SEO Strategy
aleyda
45
9.1k
Prompt Engineering for Job Search
mfonobong
0
320
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
55k
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ͳͲผͰ͖Δ
͓͠·͍