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ϋοΧιϯ։͍ͨΓ

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

No content

No content

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

HTTP

No content

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