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
4.1k
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
720
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
How to achieve interoperable digital identity across Asian countries
fujie
0
150
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
100
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
2
600
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
720
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
180
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
410
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
80k
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.3k
三菱電機・ソニーグループ共同の「Agile Japan企業内サテライト」_2025
sony
0
140
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Context Engineering - Making Every Token Count
addyosmani
5
230
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Facilitating Awesome Meetings
lara
56
6.6k
A designer walks into a library…
pauljervisheath
209
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Optimizing for Happiness
mojombo
379
70k
Gamification - CAS2011
davidbonilla
81
5.5k
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