$30 off During Our Annual Pro Sale. View Details »

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

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年にやっておきたい対応をお伝えします。

Kazunari Hara

March 24, 2022
Tweet

More Decks by Kazunari Hara

Other Decks in Technology

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