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
Feature Policy
Search
Yosuke Furukawa
PRO
October 18, 2018
Programming
1
150
Feature Policy
Yosuke Furukawa
PRO
October 18, 2018
Tweet
Share
More Decks by Yosuke Furukawa
See All by Yosuke Furukawa
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
9
3.7k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
1
4.1k
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
230
Removing Corepack
yosuke_furukawa
PRO
9
1.6k
JavaScript Runtime とはなにか
yosuke_furukawa
PRO
15
2.8k
Strip Types と Storage
yosuke_furukawa
PRO
4
410
Module Harmony について
yosuke_furukawa
PRO
3
1.7k
LTのやり方
yosuke_furukawa
PRO
16
2.6k
AppRouter Panel Talk
yosuke_furukawa
PRO
3
810
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
180
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
240
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
470
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
360
Is Xcode slowly dying out in 2025?
uetyo
1
190
Java on Azure で LangGraph!
kohei3110
0
170
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
エラーって何種類あるの?
kajitack
5
310
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
850
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Producing Creativity
orderedlist
PRO
346
40k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Navigating Team Friction
lara
187
15k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Raft: Consensus for Rubyists
vanstee
140
7k
For a Future-Friendly Web
brad_frost
179
9.8k
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