2022年、知っておきたいWebのこと ~パフォーマンス & セキュリティ~

Webパフォーマンス領域のDeveloper Expertsを務める原です。本セッションでは、2022年に知っておきたいWebにまつわる新技術やトピックを、パフォーマンス・セキュリティ領域からピックアップして紹介します。当日は各分野のエキスパートである@sisidovski、@kumagi、@agektmrをお招きして該当トピックの理解を深めます。それに加えサイバーエージェントでのユースケースを紹介し、実サービスでどのように適用できるのかお伝えします。

WebパフォーマンスではAmebaブログがAMPをやめるに至った経緯やその対応方法、Core Web Vitals、ローディングパフォーマンスを改善する機能、パフォーマンスモニタリングツールとしてのSearch Concoleの使い方を紹介します。セキュリティではSame-Origin PolicyやSpectreの脅威をおさらいしその対策となるSecurity Headersの紹介、またUser Agent Reductionの概要とスケジュールを通し、2022年にやっておきたい対応をお伝えします。

Transcript

1. View Slide

2. View Slide

3. ݪҰ੒
   גࣜձࣾαΠόʔΤʔδΣϯτ
   8FC%FWFMPQFS$ZCFS"HFOU%FWFMPQFS&YQFSU
   Ϩʔε؍ઓ όλʔνΩϯΧϨʔ ໊ΤϯδχΞͱύγϟϦ
   

   View Slide

4. ࣡ށढ़࠸
   8FC&DPTZTUFN$POTVMUBOU
   Թઘɾα΢φ ᰤࢠ ໘ന͍5γϟπ
   

   View Slide

5. ۽࡚޺थ
   4PGUXBSF&OHJOFFS
   5XJUUFS ΢Ϛ່ ່
   

   View Slide

6. ͑ʔ͡
   %FWFMPQFS"EWPDBUF
   ఱ௡؁܀ Ξϯσϧηϯͷ͘ΔΈύϯ Ұའ
   

   View Slide

7. 8FC2VJ[
   wΫΠζͱΞϯέʔτ
   w ೥ͷ8FCʹ͍ͭͯ஌͓͖͍ͬͯͨ͜ͱΛ͓͞Β͍
   w 8FCʹؔ͢ΔϑΟʔυόοΫΛ͓د͍ͤͩ͘͞
   IUUQTGPSNTHMF.1P#'L8T'[;44R
   

   View Slide

8. 8FC2VJ[
   wΫΠζͱΞϯέʔτ
   w ೥ͷ8FCʹ͍ͭͯ஌͓͖͍ͬͯͨ͜ͱΛ͓͞Β͍
   w 8FCʹؔ͢ΔϑΟʔυόοΫΛ͓د͍ͤͩ͘͞
   IUUQTGPSNTHMF.1P#'L8T'[;44R
   μΠφιʔάοζ
   

   View Slide

9. 8FCύϑΥʔϚϯε
   

   View Slide

10. "NFCBϒϩά".1΍ΊΔͬͯʂʁ
    ग़యɿIUUQTBNFCMPKQDBTFPFOUSZIUNMɹ
    

    View Slide

11. "NFCBϒϩάɺ".1ऴྃ·Ͱͷաఔ
    w✅$PSF8FC7JUBMTͷ஋͕ྑ޷Ͱ͋Δ
    w✅ݕࡧྲྀೖ͕ܶతʹݮগ͠ͳ͍
    w✅க໋తͳ޿ࠂӨڹ͕ͳ͍
    w✅ݕࡧ݁ՌͰϓϦϑΣονͰ͖Δ
    νΣοΫϦετ
    

    View Slide

12. 4JHOFE&YDIBOHF 49(
    ΍1SJWBUF1SFGFUDI1SPYZͰϓϦϑΣον
    4JHOFE&YDIBOHFͷ৔߹
    55'#㲈
    1SJWBUF1SFGFUDI1SPYZͷ৔߹
    ࣄલʹΩϟογϡ
    ϓϩΩγܦ༝Ͱ
    ౎౓ϓϦϑΣον
    

    View Slide

13. ϩʔσΟϯάύϑΥʔϚϯεΛվળ͢Δ
    ग़యɿIUUQTTQFBLFSEFDLDPNIFSBCMPHDPSFXFCWJUBMTJOQSBDUJDF TMJEFɹ
    1SFSFOEFSJOH
    &BSMZ)JOUT 1SJPSJUZ)JOUT
    MJOLSFMlQSFMPBEz 1SJWBUF1SFGFUDI1SPYZ
    49(
    

    View Slide

14. ը૾දࣔͰ೥ʹͰ͖Δ͜ͱ
    ग़యɿIUUQTTQFBLFSEFDLDPNIFSBCMPHDPSFXFCWJUBMTJOQSBDUJDF TMJEFɹ
    QJDUVSF
    TPVSDFTSDTFUJNBHFKYMUZQFJNBHFKYM
    TPVSDFNFEJBTSDTFUJNBHFBWJGUZQFJNBHFBWJG
    TPVSDFNFEJBTSDTFUJNBHFXFCQUZQFlJNBHFXFCQ
    JNHBMUTSDJNBHFKQH
    EFDPEJOHBTZODMPBEJOHlMB[Z
    IFJHIUXJEUI
    GFUDIQSJPSJUZMPX
    QJDUVSF
    ৽ܗࣜ
    ॲཧͷ஗Ԇ
    ΞεϖΫτൺͷࢦఆ
    ॏཁ౓ͷώϯτ
    

    View Slide

15. 4FBSDI$POTPMFΛ࢖͏
    

    View Slide

16. -JHIUIPVTF -BC
    ͱ$S69 'JFME
    
    ग़యɿIUUQTTQFBLFSEFDLDPNIFSBCMPHDPSFXFCWJUBMTJOQSBDUJDF TMJEF
    

    View Slide

17. $S6963-ͷάϧʔϐϯά
    

    View Slide

18. $S6963-ͷάϧʔϐϯά
    

    View Slide

19. 8FCηΩϡϦςΟ
    

    View Slide

20. 4FDVSJUZ)FBEFST
    ग़యɿIUUQTCMPHBHFLUNSDPNCSPXTFSTFDVSJUZIUNMɹ
    

    View Slide

21. ग़యɿIUUQTCMPHBHFLUNSDPNCSPXTFSTFDVSJUZIUNM IUUQT[FOOEFWBHFLUNSBSUJDMFTGEDEBD
    4BNF0SJHJO1PMJDZ
    

    View Slide

22. ग़యɿIUUQTKBXJLJQFEJBPSHXJLJ4QFDUSFɹ
    4QFDUSF εϖΫλʔ
    ͷڴҖ
    (PPHMFͷ[FSPEBZ߈ܸݚڀͷϓϩδΣΫτ
    1SPKFDU;FSPͱ҉߸ֶऀͷϙʔϧɾίοϑΣϧ͕
    த৺ͱͳͬͨݚڀνʔϜ͕ผʑʹൃݟ͠ɺ
    .FMUEPXOͷνʔϜͱͷڞಉ࡞ۀͱͳΓɺ
    ೥݄೔ʹൃද͞Εͨɻ
    ʮ4QFDUSFʯʢ༓ྶʣͱ໋໊ͨ͠ཧ༝͸ɺ౤ػత
    ࣮ߦ TQFDVMBUJWFFYFDVUJPO
    ʹ༝དྷ͓ͯ͠
    Γɺम෮͕ࠔ೉ͳ͜ͱ͔Βɺ૬౰ͷ͍͋ͩ༓ྶͷ
    Α͏ʹզʑʹऔΓጪͩ͘Ζ͏ͱઆ໌͞Ε͍ͯΔɻ
    

    View Slide

23. ग़యɿIUUQTCMPHBHFLUNSDPNCSPXTFSTFDVSJUZIUNMɹ
    4QFDUSF εϖΫλʔ
    ͷڴҖ
    

    View Slide

24. ௥Ճ͞Εͨ4FDVSJUZ)FBEFST
    9'SBNF0QUJPOTPS$41GSBNFBODFTUPST
    $SPTT0SJHJO0QFOFS1PMJDZ $001
    
    wJGSBNFͷಡΈࠐΈΛ੍ޚ͢Δ
    w 9'SBNF0QUJPOT%&/:4".&03*(*/
    w $POUFOU4FDVSJUZ1PMJDZGSBNFBODFTUPSTTFMG
    IUUQTXXXFYBNQMFDPN
    w8JOEPXؒͷίϛϡχέʔγϣϯΛ੍ޚ
    w $SPTT0SJHJO0QFOFS1PMJDZTBNFPSJHJOTBNF
    PSJHJOBMMPXQPQVQTVOTBGFOPOF
    

    View Slide

25. ௥Ճ͞Εͨ4FDVSJUZ)FBEFST
    $SPTT0SJHJO3FTPVSDF1PMJDZ $031
    
    wϦιʔεͷຒΊࠐΈΛ੍ޚ
    w $SPTT0SJHJO3FTPVSDF1PMJDZTBNFPSJHJO
    TBNFTJUFDSPTTPSJHJO
    w 4BNF4JUF$PPLJFΛ/POFʹ͍ͯ͠ͳ͚Ε͹ೝূࡁΈͷ
    ίϯςϯπ͸࿙Ӯ͠ͳ͍
    

    View Slide

26. ઃఆ͢΂͖4FDVSJUZ)FBEFST
    "NFCBͰͷެ։ίϯςϯπͷྫ
    ग़యɿIUUQTXFCEFWTFDVSJUZIFBEFSTɹ
    4USJDU5SBOTQPSU4FDVSJUZNBYBHF
    9$POUFOU5ZQF0QUJPOTOPTOJ
    ff
    
    99441SPUFDUJPONPEFCMPDL
    9'SBNF0QUJPOT%&/:
    $POUFOU4FDVSJUZ1PMJDZEFGBVMUTSDTFMGJNHTSD
    EBUBTUZMFTSDTFMGVOTBGFJOMJOFGSBNFBODFTUPSTOPOF
    $SPTT0SJHJO0QFOFS1PMJDZTBNFPSJHJO
    $SPTT0SJHJO3FTPVSDF1PMJDZTBNFPSJHJO
    

    View Slide

27. ઃఆ͢΂͖4FDVSJUZ)FBEFST
    ηϯγςΟϒͳσʔλΛѻ͏αΠτͰઃఆ͢΂͖
    w$POUFOU4FDVSJUZ1PMJDZ $41
    
    w5SVTUFE5ZQFT
    ग़యɿIUUQTXFCEFWTFDVSJUZIFBEFSTɹ
    

    View Slide

28. $SPTTPSJHJOJTPMBUJPOͰ4IBSFE"SSBZ#V
    ff
    FSΛ࢖͏࣌
    w$SPTT0SJHJO0QFOFS1PMJDZ $001
    
    w$SPTT0SJHJO&NCFEEFS1PMJDZ $0&1
    
    w ࿙Εͯ΋໰୊ͳ͍ɺ΋͘͠͸໌ࣔతʹΦϓτΠϯ͍ͯ͠
    ΔϦιʔεҎ֎͸ϒϩοΫ͢Δ
    ग़యɿIUUQTXFCEFWTFDVSJUZIFBEFSTɹ
    ઃఆ͢΂͖4FDVSJUZ)FBEFST
    

    View Slide

29. 6TFS"HFOU3FEVDUJPO
    ग़యɿIUUQTXXXDISPNJVNPSHVQEBUFTVBSFEVDUJPOɹ
    

    View Slide

30. .P[JMMB 8JOEPXT/58JOY
    "QQMF8FC,JU ,)5.- MJLF(FDLP
    $ISPNF4BGBSJ
    .P[JMMB 8JOEPXT/58JOY
    "QQMF8FC,JU ,)5.- MJLF(FDLP
    $ISPNF4BGBSJ
    .P[JMMB -JOVY"OESPJE4."6
    "QQMF8FC,JU ,)5.- MJLF(FDLP
    $ISPNF.PCJMF4BGBSJ
    .P[JMMB -JOVY"OESPJE,
    "QQMF8FC,JU ,)5.- MJLF(FDLP
    $ISPNF.PCJMF4BGBSJ
    ग़యɿIUUQTXXXDISPNJVNPSHVQEBUFTVBSFEVDUJPOɹ
    ࡟আ͞ΕΔ6TFS"HFOU
    σεΫτοϓ
    "OESPJE
    04όʔδϣϯ͸ݻఆ ϝδϟʔόʔδϣϯͷΈՄม
    ୺຤Ϟσϧ͸ݻఆ
    ʮ"OESPJEʯ͸࢒Δ
    

    View Slide

31. 6TFS"HFOU3FEVDUJPOͷλΠϜϥΠϯ
    6"࡟ݮ׬ྃ
    
    
    $ISPNF
    
    σϓϦέʔγϣϯτϥΠΞϧ
    
    $ISPNFόʔδϣϯ࡟ݮ
    
    
    σεΫτοϓద༻ "OESPJEద༻
    
    ग़యɿIUUQTEFWFMPQFSTKQHPPHMFCMPHDPNDISPNFVTFSBHFOUIUNMɹ
    🌸 🎃 👺
    🎍
    

    View Slide

32. 5IBOLZPV
    wΫΠζͱΞϯέʔτ
    w ೥ͷ8FCʹ͍ͭͯ஌͓͖͍ͬͯͨ͜ͱΛ͓͞Β͍
    w 8FCʹؔ͢ΔϑΟʔυόοΫΛ͓د͍ͤͩ͘͞
    IUUQTGPSNTHMF.1P#'L8T'[;44R
    μΠφιʔάοζ
    

    View Slide