Future HTTP

2018/10/12 フューチャーアーキテクトとのLTバトルでの、古川（@yosuke_furukawa）の講演資料になります

Transcript

1. Future HTTP 2018/10/12 @ Future Architect
2. Twitter: @yosuke_furukawa Github: yosuke-furukawa
3. ϦΫϧʔτςΫϊϩδʔζ ITE౷ׅ෦ϓϩμΫτΤϯδχΞϦϯά෦ASG ݹ઒ཅհʢϑϧΧϫϤ΢εέʣ 3 ▪໾৬ ࣗݾ঺հ Application Solution GroupͷάϧʔϓϚωʔδϟ γχΞιϑτ΢ΣΞΤϯδχΞ ͓ࣸਅ ໌Δ͍ද৘ͷ΋ͷ ϓϥΠϕʔτ΋Մ ▪GMͱͯ͠΍ͬͯΔ͜ͱ ιϑτ΢ΣΞΤϯδχΞମ੍ͮ͘Γ ࠾༻/ධՁ νʔϜϏϧσΟϯά/ίϯαϧςΟϯά ▪γχΞͱͯ͠΍ͬͯΔ͜ͱ R&D - React/Redux/Node.jsΛ࢖ͬͨϘΠϥʔϓϨʔτ - Consumer Driven Contract πʔϧ agreed࡞੒ ύϑΥʔϚϯενϡʔχϯά - ࣾ಺ISUCON։͍ͨΓ - ࣾ಺Web Page SpeedϋοΧιϯ։͍ͨΓ
4. ݺΜͰ͍͖ͨͩ ͋Γ͕ͱ͏͍͟͝·͢ʂʂʂʂʂʂʂ
7. ँࣙʹࡌͤͯ΋Βͬͨʂʂ
8. HTTP
10. Future
11. ϑϡʔνϟʔ
12. ϑΟʔνϟʔ
13. ϑΟʔνϟʔ… HTTP…
14. ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹFeature Policy !!!!ɹʻ
 ʉY^Y^Y^Y^Y^Y^Y^Y^ʉ
15. Webʹ͓͚Δ Permission໰୊
16. Webʹ͓͚Δ legacy feature ໰୊
17. Webʹ͓͚Δ legacy feature ໰୊ HTML Parser ͕࣮ߦதʹDOMΛ͍ͬͯ͡͠·͏. ࣮ߦதʹωοτϫʔΫΛࢭΊͯ͠·͏ɻ
18. Webʹ͓͚Δ legacy feature ໰୊ const syncXhr = new XMLHttpRequest(); syncXhr.open("GET", "https://example.com/sample.txt", false); syncXhr.send(null);
19. Webʹ͓͚Δ legacy feature ໰୊ const syncXhr = new XMLHttpRequest(); syncXhr.open("GET", "https://example.com/sample.txt", false); syncXhr.send(null); ࢖͏ͳʂʂʂҎ্
20. Feature-Policy ϔομʔͰ ػೳͷPermissionΛ ઃఆͰ͖Δ Feature-Policy: sync-xhr 'self'; document- write 'none'; geolocation 'example.com';
21. DEMO 1:
 Sync XHR ͕Ͱ͖ͳ͍Α͏ʹ ͢Δɻ Feature-Policy: sync-xhr 'none';
22. DEMO 2:
 document.write ͕Ͱ͖ͳ͍ Α͏ʹ͢Δɻ Feature-Policy: document- write 'none';
23. DEMO 3:
 ϨΨγʔͳը૾ϑΥʔϚοτ ΛରԠ͠ͳ͍ɻ Feature-Policy: legacy- image-formats 'none’;
24. ͜ͷଞʹ΋ɿ geolocation, getUserMedia,document.co okie, lazyload, animations, payment, webxr etc etc
25. WebͷਐԽ͸͋Δ͕ɺਐԽͷ ҰํͰࠓ͸࢖ͬͯ΄͘͠ͳ͍ ػೳ΋͋Δɻ (document.write, sync-xhr)
26. ·ͨٯʹڧྗ͗͢Δػೳʹର ੍ͯ͠ݶ͍ͨ͜͠ͱ΋͋Δ উखʹiframeͰදࣔ͞ΕͯΔ޿ࠂ͔ΒҐஔ৘ ใऔΒΕͨ͘ͳ͍౳
27. WebͱPermissionͱ͍͏ͷ͸ ࠓ͸೤͍ྖҬɺͲ͏΍ͬͯ҆ શͰ༗Γଓ͚Δ͔ɺͲ͏΍ͬ ͯߴ଎ͳਐԽΛଓ͚Δ͔ͱ͍ ͏࿩ʹͳ͍ͬͯΔɻ
28. ·ͱΊʂʂʂ • Feature Policy͸ Webͷະདྷʹॏཁͳػೳ • ஈ֊తʹػೳΛ༗ޮԽͤͭͭ͞ɺஈ֊తʹػ ೳΛແޮԽͤ͞Δ͜ͱ΋Ͱ͖Δ • ौ઒͞Μ΁ • 2൛໨΋ँࣙ଴ͬͯ·͢ɻ
29. ͋ɺͦ͏ͦ͏େࣄͳ͜ͱ
30. feature-policyͷnode moduleΛ࡞ͬͨͷ Ͱ࢖ͬͯΈ͍ͯͩ͘͞ʂʂʂʂʂʂʂʂʂʂ $ npm install node-feature-policy
31. Thank you