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
Future HTTP
Search
Recruit Technologies
October 12, 2018
Technology
0
4k
Future HTTP
2018/10/12 フューチャーアーキテクトとのLTバトルでの、古川(@yosuke_furukawa)の講演資料になります
Recruit Technologies
October 12, 2018
Tweet
Share
More Decks by Recruit Technologies
See All by Recruit Technologies
障害はチャンスだ! 障害を前向きに捉える
rtechkouhou
1
700
Flutter移行の苦労と、乗り越えた先に得られたもの
rtechkouhou
3
12k
ここ数年間のタウンワークiOSアプリのエンジニアのチャレンジ
rtechkouhou
1
1.5k
大規模環境をAWS Transit Gatewayで設計/移行する前に考える3つのポイントと移行への挑戦
rtechkouhou
1
1.9k
【61期 新人BootCamp】TOC入門
rtechkouhou
3
42k
【RTC新人研修 】 TPS
rtechkouhou
1
41k
Android Boot Camp 2020
rtechkouhou
0
41k
HTML/CSS
rtechkouhou
10
51k
TypeScript Bootcamp 2020
rtechkouhou
9
46k
Other Decks in Technology
See All in Technology
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
PO初心者が考えた ”POらしさ”
nb_rady
0
210
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
360
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Side Projects
sachag
455
42k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
Future HTTP 2018/10/12 @ Future Architect
Twitter: @yosuke_furukawa Github: yosuke-furukawa
ϦΫϧʔτςΫϊϩδʔζ ITE౷ׅ෦ϓϩμΫτΤϯδχΞϦϯά෦ASG ݹཅհʢϑϧΧϫϤεέʣ 3 ▪৬ ࣗݾհ Application Solution GroupͷάϧʔϓϚωʔδϟ γχΞιϑτΣΞΤϯδχΞ
͓ࣸਅ ໌Δ͍දͷͷ ϓϥΠϕʔτՄ ▪GMͱͯͬͯ͠Δ͜ͱ ιϑτΣΞΤϯδχΞମ੍ͮ͘Γ ࠾༻/ධՁ νʔϜϏϧσΟϯά/ίϯαϧςΟϯά ▪γχΞͱͯͬͯ͠Δ͜ͱ R&D - React/Redux/Node.jsΛͬͨϘΠϥʔϓϨʔτ - Consumer Driven Contract πʔϧ agreed࡞ ύϑΥʔϚϯενϡʔχϯά - ࣾISUCON։͍ͨΓ - ࣾWeb Page SpeedϋοΧιϯ։͍ͨΓ
ݺΜͰ͍͖ͨͩ ͋Γ͕ͱ͏͍͟͝·͢ʂʂʂʂʂʂʂ
None
None
ँࣙʹࡌͤͯΒͬͨʂʂ
HTTP
None
Future
ϑϡʔνϟʔ
ϑΟʔνϟʔ
ϑΟʔνϟʔ… HTTP…
ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹFeature Policy !!!!ɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^ʉ
Webʹ͓͚Δ Permission
Webʹ͓͚Δ legacy feature
Webʹ͓͚Δ legacy feature HTML Parser ͕࣮ߦதʹDOMΛ͍ͬͯ͡͠·͏. ࣮ߦதʹωοτϫʔΫΛࢭΊͯ͠·͏ɻ
Webʹ͓͚Δ legacy feature const syncXhr = new XMLHttpRequest(); syncXhr.open("GET",
"https://example.com/sample.txt", false); syncXhr.send(null);
Webʹ͓͚Δ legacy feature const syncXhr = new XMLHttpRequest(); syncXhr.open("GET",
"https://example.com/sample.txt", false); syncXhr.send(null); ͏ͳʂʂʂҎ্
Feature-Policy ϔομʔͰ ػೳͷPermissionΛ ઃఆͰ͖Δ Feature-Policy: sync-xhr 'self'; document- write 'none';
geolocation 'example.com';
DEMO 1: Sync XHR ͕Ͱ͖ͳ͍Α͏ʹ ͢Δɻ Feature-Policy: sync-xhr 'none';
DEMO 2: document.write ͕Ͱ͖ͳ͍ Α͏ʹ͢Δɻ Feature-Policy: document- write 'none';
DEMO 3: ϨΨγʔͳը૾ϑΥʔϚοτ ΛରԠ͠ͳ͍ɻ Feature-Policy: legacy- image-formats 'none’;
͜ͷଞʹɿ geolocation, getUserMedia,document.co okie, lazyload, animations, payment, webxr etc etc
WebͷਐԽ͋Δ͕ɺਐԽͷ ҰํͰࠓͬͯ΄͘͠ͳ͍ ػೳ͋Δɻ (document.write, sync-xhr)
·ͨٯʹڧྗ͗͢Δػೳʹର ੍ͯ͠ݶ͍ͨ͜͠ͱ͋Δ উखʹiframeͰදࣔ͞ΕͯΔࠂ͔ΒҐஔ ใऔΒΕͨ͘ͳ͍
WebͱPermissionͱ͍͏ͷ ࠓ͍ྖҬɺͲ͏ͬͯ҆ શͰ༗Γଓ͚Δ͔ɺͲ͏ͬ ͯߴͳਐԽΛଓ͚Δ͔ͱ͍ ͏ʹͳ͍ͬͯΔɻ
·ͱΊʂʂʂ • Feature Policy Webͷະདྷʹॏཁͳػೳ • ஈ֊తʹػೳΛ༗ޮԽͤͭͭ͞ɺஈ֊తʹػ ೳΛແޮԽͤ͞Δ͜ͱͰ͖Δ • ौ͞Μ
• 2൛ँࣙͬͯ·͢ɻ
͋ɺͦ͏ͦ͏େࣄͳ͜ͱ
feature-policyͷnode moduleΛ࡞ͬͨͷ ͰͬͯΈ͍ͯͩ͘͞ʂʂʂʂʂʂʂʂʂʂ $ npm install node-feature-policy
Thank you