Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Feature Policy

Feature Policy

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa
PRO

October 18, 2018
Tweet

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