Feature Policy

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. ݺΜͰ͍͖ͨͩ ͋Γ͕ͱ͏͍͟͝·͢ʂʂʂʂʂʂʂ

5. None
6. None

7. ँࣙʹࡌͤͯ΋Βͬͨʂʂ

8. HTTP

9. None

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