Feature Policy

Transcript

1. 1.

   Future HTTP 2018/10/12 @ Future Architect

2. 2.

   Twitter: @yosuke_furukawa Github: yosuke-furukawa

3. 3.

   ϦΫϧʔτςΫϊϩδʔζ ITE౷ׅ෦ϓϩμΫτΤϯδχΞϦϯά෦ASG ݹ઒ཅհʢϑϧΧϫϤ΢εέʣ 3 ▪໾৬ ࣗݾ঺հ Application Solution GroupͷάϧʔϓϚωʔδϟ γχΞιϑτ΢ΣΞΤϯδχΞ

   ͓ࣸਅ ໌Δ͍ද৘ͷ΋ͷ ϓϥΠϕʔτ΋Մ ▪GMͱͯ͠΍ͬͯΔ͜ͱ ιϑτ΢ΣΞΤϯδχΞମ੍ͮ͘Γ ࠾༻/ධՁ νʔϜϏϧσΟϯά/ίϯαϧςΟϯά ▪γχΞͱͯ͠΍ͬͯΔ͜ͱ R&D - React/Redux/Node.jsΛ࢖ͬͨϘΠϥʔϓϨʔτ - Consumer Driven Contract πʔϧ agreed࡞੒ ύϑΥʔϚϯενϡʔχϯά - ࣾ಺ISUCON։͍ͨΓ - ࣾ಺Web Page SpeedϋοΧιϯ։͍ͨΓ
4. 4.

   ݺΜͰ͍͖ͨͩ ͋Γ͕ͱ͏͍͟͝·͢ʂʂʂʂʂʂʂ

5. 5.

   None
6. 6.

   None
7. 7.

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

8. 8.

   HTTP

9. 9.

   None
10. 10.

    Future

11. 11.

    ϑϡʔνϟʔ

12. 12.

    ϑΟʔνϟʔ

13. 13.

    ϑΟʔνϟʔ… HTTP…

14. 14.

    ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹFeature Policy !!!!ɹʻ
 ʉY^Y^Y^Y^Y^Y^Y^Y^ʉ

15. 15.

    Webʹ͓͚Δ Permission໰୊

16. 16.

    Webʹ͓͚Δ legacy feature ໰୊

17. 17.

    Webʹ͓͚Δ legacy feature ໰୊ HTML Parser ͕࣮ߦதʹDOMΛ͍ͬͯ͡͠·͏. ࣮ߦதʹωοτϫʔΫΛࢭΊͯ͠·͏ɻ

18. 18.

    Webʹ͓͚Δ legacy feature ໰୊ const syncXhr = new XMLHttpRequest(); syncXhr.open("GET",

    "https://example.com/sample.txt", false); syncXhr.send(null);
19. 19.

    Webʹ͓͚Δ legacy feature ໰୊ const syncXhr = new XMLHttpRequest(); syncXhr.open("GET",

    "https://example.com/sample.txt", false); syncXhr.send(null); ࢖͏ͳʂʂʂҎ্
20. 20.

    Feature-Policy ϔομʔͰ ػೳͷPermissionΛ ઃఆͰ͖Δ Feature-Policy: sync-xhr 'self'; document- write 'none';

    geolocation 'example.com';
21. 21.

    DEMO 1:
 Sync XHR ͕Ͱ͖ͳ͍Α͏ʹ ͢Δɻ Feature-Policy: sync-xhr 'none';

22. 22.

    DEMO 2:
 document.write ͕Ͱ͖ͳ͍ Α͏ʹ͢Δɻ Feature-Policy: document- write 'none';

23. 23.

    DEMO 3:
 ϨΨγʔͳը૾ϑΥʔϚοτ ΛରԠ͠ͳ͍ɻ Feature-Policy: legacy- image-formats 'none’;

24. 24.

    ͜ͷଞʹ΋ɿ geolocation, getUserMedia,document.co okie, lazyload, animations, payment, webxr etc etc

25. 25.

    WebͷਐԽ͸͋Δ͕ɺਐԽͷ ҰํͰࠓ͸࢖ͬͯ΄͘͠ͳ͍ ػೳ΋͋Δɻ (document.write, sync-xhr)

26. 26.

    ·ͨٯʹڧྗ͗͢Δػೳʹର ੍ͯ͠ݶ͍ͨ͜͠ͱ΋͋Δ উखʹiframeͰදࣔ͞ΕͯΔ޿ࠂ͔ΒҐஔ৘ ใऔΒΕͨ͘ͳ͍౳

27. 27.

    WebͱPermissionͱ͍͏ͷ͸ ࠓ͸೤͍ྖҬɺͲ͏΍ͬͯ҆ શͰ༗Γଓ͚Δ͔ɺͲ͏΍ͬ ͯߴ଎ͳਐԽΛଓ͚Δ͔ͱ͍ ͏࿩ʹͳ͍ͬͯΔɻ

28. 28.

    ·ͱΊʂʂʂ • Feature Policy͸ Webͷະདྷʹॏཁͳػೳ • ஈ֊తʹػೳΛ༗ޮԽͤͭͭ͞ɺஈ֊తʹػ ೳΛແޮԽͤ͞Δ͜ͱ΋Ͱ͖Δ • ौ઒͞Μ΁

    • 2൛໨΋ँࣙ଴ͬͯ·͢ɻ
29. 29.

    ͋ɺͦ͏ͦ͏େࣄͳ͜ͱ

30. 30.

    feature-policyͷnode moduleΛ࡞ͬͨͷ Ͱ࢖ͬͯΈ͍ͯͩ͘͞ʂʂʂʂʂʂʂʂʂʂ $ npm install node-feature-policy

31. 31.

    Thank you