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

実践エッジユースケース

 実践エッジユースケース

AWS Dev Day 2023 Tokyo
2023-06-22
Yusuke Wada
Developer Advocate @ Cloudflare

Yusuke Wada

June 22, 2023
Tweet

More Decks by Yusuke Wada

Other Decks in Programming

Transcript

  1. "84%FW%BZ5PLZP:VTVLF8BEB
    ࣮ફΤοδϢʔεέʔε
    $
    %FWFMPQFS"EWPDBUF!$MPVEGMBSF
    :VTVLF8BEB

    View full-size slide

  2. "84%FW%BZ5PLZP:VTVLF8BEB
    .F

    :VTVLF8BEB
    %FWFMPQFS"EWPDBUF!$MPVEGMBSF
    $SFBUPSPG)POP
    $PGPVOEFSPG#PLFUF

    View full-size slide

  3. "84%FW%BZ5PLZP:VTVLF8BEB
    ࣮ફΤοδϢʔεέʔε
    w ΤοδΠϯτϩμΫγϣϯ
    w )POPʹ͍ͭͯ
    w Τοδύλʔϯू
    w ·ͱΊ

    View full-size slide

  4. "84%FW%BZ5PLZP:VTVLF8BEB
    ΤοδΠϯτϩμΫγϣϯ

    View full-size slide

  5. "84%FW%BZ5PLZP:VTVLF8BEB
    Τοδͱ͸ͳʹ͔ʁ
    w ৗʹϢʔβʔͷۙ͘ʹ͋Δ͜ͱ
    w *P5ͷจ຺Ͱ࢖ΘΕΔ͜ͱ͕ଟ͍͕ͦΕ͚ͩͰ͸ͳ͍
    w ͋ΒΏΔσόΠε΁ͷϨΠςϯγʔͷ௿ݮ
    w ੈքதͷ101Ͱ࣮ߦ͞ΕΔ
    w $%/͕ͩʮΩϟογϡ໨తͷ$%/ʯ͚ͩͰ͸ͳ͍

    View full-size slide

  6. "84%FW%BZ5PLZP:VTVLF8BEB
    ΦϦδϯͱΤοδ
    w ΦϦδϯجຊͱͳΔαʔόʔ
    w ΤοδΦϦδϯͷίϯςϯπΛϢʔβʔͷۙ͘Ͱ഑৴͢Δ
    w ΦϦδϯ͕͋Δύλʔϯ Ϧόʔε
    ϓϩΩγύλʔϯ
    w Τοδ͚ͩͰશ͕ͯ׬݁ϑϧελοΫύλʔϯ
    ┌───────────┐ ┌───────┐ ┌───────────┐


    │ Users │ │ Edge │ │ Origins │


    └─────┬─────┘ └───┬───┘ └─────┬─────┘


    │ Network │ CDN │


    │<───────────────>│<───────────────>│


    └─────┴─────┘ └───┴───┘ └─────┴─────┘



    View full-size slide

  7. "84%FW%BZ5PLZP:VTVLF8BEB
    ΤοδͰ࣮ߦ͢Δܥ͕ొ৔
    w "NB[PO$MPVE'SPOU'VODUJPOT
    w "NB[PO-BNCEB!&EHF
    w $MPVEGMBSF8PSLFST
    w 'BTUMZ$PNQVUF!&EHF
    w %FOP%FQMPZ
    w 7FSDFM&EHF'VODUJPOT
    w /FUMJGZ'VODUJPOT

    View full-size slide

  8. "84%FW%BZ5PLZP:VTVLF8BEB
    'VODUJPO8PSLFS$PNQVUFʜ
    w ࠓճ͸'VODUJPOͰ౷Ұ
    w ʮ୹͍ʯɻεΫϦϓτ͕࣮ߦ͞ΕΔ࣌ؒ͸୹͍
    w ʮখ͍͞ʯɻεΫϦϓτ͸খ͘͞ͳ͍ͱ͍͚ͳ͍
    w ۃ୺ͳྫ"NB[PO$MPVE'SPOU'VODUJPOT͸,#Ҏ಺
    w ʮ଎͍ʯɻ$%/Ͱ࣮ߦ͞ΕΔɺ'VODUJPOͷ؀ڥ͕଎͍

    View full-size slide

  9. "84%FW%BZ5PLZP:VTVLF8BEB
    )POPʹ͍ͭͯ

    View full-size slide

  10. "84%FW%BZ5PLZP:VTVLF8BEB
    6MUSBGBTUXFCGSBNFXPSLGPSUIF&EHFT
    IUUQTIPOPEFW

    View full-size slide

  11. "84%FW%BZ5PLZP:VTVLF8BEB
    )POP
    w ΤοδͰಈ͘
    w খͯ͘͞γϯϓϧͰ଎͍8FCϑϨʔϜϫʔΫ
    w ؆୯͚ͩͲԞ͕ਂ͍
    w ͲͷΤοδͰ΋ಈ͘
    w )POPͷ࣮૷ͰશͯͷϓϥοτϑΥʔϜʹରԠͰ͖Δ
    w ࠓճ͸ϓϥοτϑΥʔϜʹґଘͨ͘͠ͳ͍ͷͰ࠷ద

    View full-size slide

  12. "84%FW%BZ5PLZP:VTVLF8BEB
    Ϣʔεέʔε
    w 8FC"1*ͷ࡞੒
    w ϦόʔεϓϩΩγ
    w $%/ͷϑϩϯτ
    w ΤοδͰಈ͘ΞϓϦ
    w ϥΠϒϥϦ಺ͷϕʔεαʔόʔ
    w ϑϧελοΫΞϓϦ

    View full-size slide

  13. "84%FW%BZ5PLZP:VTVLF8BEB
    ୭͕࢖͍ͬͯΔ͔ʁ
    w DEOKT"1*4FSWFS
    w 1PMZGJMMJP
    w 6MUSB
    w %FOP#FODINBSLT
    w $MPVEGMBSF#MPH
    w %SJWMZ
    w SFQFBUEFW

    View full-size slide

  14. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  15. "84%FW%BZ5PLZP:VTVLF8BEB
    )POPͷಛ௃
    w 6MUSBGBTU🚀5IFSPVUFS3FH&YQ3PVUFSJTSFBMMZGBTU/PUVTJOHMJOFBSMPPQT'BTU
    w -JHIUXFJHIU🪶5IFIPOPUJOZQSFTFUJTVOEFSL#)POPIBT[FSPEFQFOEFODJFTBOEVTFT
    POMZUIF8FC4UBOEBSE"1*
    w .VMUJSVOUJNF🌍8PSLTPO$MPVEGMBSF8PSLFST 'BTUMZ$PNQVUF!&EHF %FOP #VO -BHPO
    "84-BNCEB PS/PEFKT5IFTBNFDPEFSVOTPOBMMQMBUGPSNT
    w #BUUFSJFT*ODMVEFE🔋)POPIBTCVJMUJONJEEMFXBSF DVTUPNNJEEMFXBSF BOEUIJSEQBSUZ
    NJEEMFXBSF#BUUFSJFTJODMVEFE
    w %FMJHIUGVM%9🛠4VQFSDMFBO"1*T'JSTUDMBTT5ZQF4DSJQUTVQQPSU/PX XFWFHPU5ZQFT
    IUUQTIPOPEFW

    View full-size slide

  16. "84%FW%BZ5PLZP:VTVLF8BEB
    6MUBSBGBTU

    View full-size slide

  17. "84%FW%BZ5PLZP:VTVLF8BEB
    $MPVEGMBSF8PSLFSTͷଞͷϑϨʔϜϫʔΫϧʔλʔͱͷൺֱ
    Hono x 402,820 ops/sec ±4.78% (80 runs sampled)


    itty-router x 212,598 ops/sec ±3.11% (87 runs sampled)


    sunder x 297,036 ops/sec ±4.76% (77 runs sampled)


    worktop x 197,345 ops/sec ±2.40% (88 runs sampled)


    Fastest is Hono


    ✨ Done in 28.06s.

    View full-size slide

  18. "84%FW%BZ5PLZP:VTVLF8BEB
    3FH&YQ3PVUFS
    w #Z!VTVBMPNB
    w +BWB4DSJQUքͰҰ൪଎͍

    ϧʔλʔ
    IUUQTIPOPEFWDPODFQUTCFODINBSLT

    View full-size slide

  19. "84%FW%BZ5PLZP:VTVLF8BEB
    ϦχΞͳϧʔλʔ
    IUUQTIPOPEFWDPODFQUTSPVUFST

    View full-size slide

  20. "84%FW%BZ5PLZP:VTVLF8BEB
    3FH&YQ3PVUFSͻͱͭͷେ͖ͳਖ਼نදݱʹ͢Δ
    IUUQTIPOPEFWDPODFQUTSPVUFST

    View full-size slide

  21. "84%FW%BZ5PLZP:VTVLF8BEB
    5SJF3PVUFSҰ൪࠷ॳʹ࡞ΒΕͨ
    IUUQTIPOPEFWDPODFQUTSPVUFST

    View full-size slide

  22. "84%FW%BZ5PLZP:VTVLF8BEB
    -JOFBS3PVUFS
    w #Z!VTVBMPNBɺϧʔτͷొ࿥ΛؚΊͯ଎͍

    • GET /very/deeply/nested/route/hello/there


    ----------------------------------------------------- -----------------------------


    RegExpRouter 34.25 µs/iter (26.29 µs … 670.17 µs) 34.58 µs 49.13 µs 56.5 µs


    TrieRouter 9.05 µs/iter (8.91 µs … 9.2 µs) 9.09 µs 9.2 µs 9.2 µs


    LinearRouter 1.6 µs/iter (1.53 µs … 1.75 µs) 1.61 µs 1.75 µs 1.75 µs


    MedleyRouter 4.43 µs/iter (4.33 µs … 4.54 µs) 4.45 µs 4.54 µs 4.54 µs


    FindMyWay 62.36 µs/iter (46.25 µs … 1.69 ms) 61.79 µs 78.67 µs 87.42 µs


    KoaTreeRouter 3.69 µs/iter (3.53 µs … 3.9 µs) 3.72 µs 3.9 µs 3.9 µs


    TrekRouter 5.79 µs/iter (5.64 µs … 5.93 µs) 5.83 µs 5.93 µs 5.93 µs


    summary for GET /very/deeply/nested/route/hello/there


    LinearRouter


    2.31x faster than KoaTreeRouter


    2.77x faster than MedleyRouter


    3.63x faster than TrekRouter


    5.67x faster than TrieRouter


    21.46x faster than RegExpRouter


    39.08x faster than FindMyWay


    IUUQTHJUIVCDPNIPOPKTIPOPQVMM

    View full-size slide

  23. "84%FW%BZ5PLZP:VTVLF8BEB
    ϧʔλʔҎ֎ʹ଎͘͢Δ޻෉
    w ΫΤϦύϥϜͷύʔεɺϔομʔͷઃఆͷ࠷దԽ
    w εΫϥονͰॻ͘ΑΓ΋Α͍
    w ϓϩΩγͰ΋ੵۃతʹ࢖͍ͬͯͩ͘͞

    View full-size slide

  24. "84%FW%BZ5PLZP:VTVLF8BEB
    ϑϨʔϜϫʔΫΛ࢖Θͳ͍৔߹

    View full-size slide

  25. "84%FW%BZ5PLZP:VTVLF8BEB
    )POPͷ৔߹Ϋϥεੜ੒ͷΦʔόʔϔου͕ͳ͍

    View full-size slide

  26. "84%FW%BZ5PLZP:VTVLF8BEB
    -JHIUXFJHIU

    View full-size slide

  27. "84%FW%BZ5PLZP:VTVLF8BEB
    1BUUFSO3PVUFSͷΈΛ࢖͏ͱ,#
    &YQSFTT͸,#
    $ npx wrangler dev --minify ./src/index.ts


    ⛅ wrangler 2.20.0


    --------------------


    ⬣ Listening at http://0.0.0.0:8787


    - http://127.0.0.1:8787


    - http://192.168.128.165:8787


    Total Upload: 11.47 KiB / gzip: 4.34 KiB

    View full-size slide

  28. "84%FW%BZ5PLZP:VTVLF8BEB
    )POPͷ
    ϧʔλʔͱϓϦηοτ

    View full-size slide

  29. "84%FW%BZ5PLZP:VTVLF8BEB
    ͭͷϧʔλʔ
    w 3FH&YQ3PVUFS
    w 5SJF3PVUFS
    w 4NBSU3PVUFS
    w -JOFBS3PVUFS
    w 1BUUFSO3PVUFS
    4NBSU3PVUFS
    3FH&YQ3PVUFSΛ༏ઌ͢Δ͕αϙʔτ͠ͳ͍ύε͕͋Ε͹5SJF3PVUFSΛ࢖͏

    View full-size slide

  30. "84%FW%BZ5PLZP:VTVLF8BEB
    ͭͷϓϦηοτ
    w AIPOPA
    w AIPOPRVJDLA
    w AIPOPUJOZA

    View full-size slide

  31. "84%FW%BZ5PLZP:VTVLF8BEB
    AIPOPA

    View full-size slide

  32. "84%FW%BZ5PLZP:VTVLF8BEB
    AIPOPRVJDLA

    View full-size slide

  33. "84%FW%BZ5PLZP:VTVLF8BEB
    AIPOPUJOZA

    View full-size slide

  34. "84%FW%BZ5PLZP:VTVLF8BEB
    ͲͷϓϦηοτΛ࢖͑͹͍͍͔ʁ
    w AIPOPA
    w ΄ͱΜͲͷϢʔεέʔεʹ͓͢͢Ί
    w %FOPɺ#VOɺ/PEFKTͰߏங͞Εͨৗறܕͷαʔόʔʹ࠷ద
    w $MPVEGMBSF8PSLFSTɺ%FOP%FQMPZɺ-BHPOͳͲͷ؀ڥͰ΋ར༻ՄೳʢWΞΠιϨʔτΛར༻ʣ
    w ىಈޙͷύϑΥʔϚϯε͕ߴ͍
    w AIPOPRVJDLA
    w ϦΫΤετ͝ͱʹΞϓϦέʔγϣϯ͕ॳظԽ͞ΕΔ؀ڥ޲͚
    w 'BTUMZ$PNQVUF!&EHFͳͲͰਪ঑
    w "84-BNCEBͷίʔϧυελʔτʹ΋ద͍ͯ͠Δ
    w AIPOPUJOZA
    w Ϧιʔε͕ݶΒΕ͍ͯΔ؀ڥ޲͚
    w ࠷খͷϧʔλʔύοέʔδ

    View full-size slide

  35. "84%FW%BZ5PLZP:VTVLF8BEB
    .VMUJSVOUJNF

    View full-size slide

  36. "84%FW%BZ5PLZP:VTVLF8BEB
    +BWB4DSJQUͳΒͲ͜Ͱ΋ಈ͘
    w $MPVEGMBSF8PSLFST
    w 'BTUMZ$PNQVUF!&EHF
    w %FOP
    w #VO
    w -BHPO
    w /FYUKT!7FSDFM
    w /FYUKT!/PEFKT
    w "84-BNCEB
    w -BNCEB!&EHF
    w /PEFKT

    View full-size slide

  37. "84%FW%BZ5PLZP:VTVLF8BEB
    8FC4UBOEBSE"1*ͷ͓͔͛
    w 4FSWJDF8PSLFSͰಋೖ͞Εͨ
    w 'FUDI3FRVFTU3FTQPOTF63-63-4FBSDI1BSBNͳͲ
    w 8JOUFS$($MPVEGMBSF %FOP /PEFKT 4IPQJGZ #VO 'BTUMZͳͲ
    w )POP͕Ͳ͜Ͱ΋ಈ͘ͷ͸8FC4UBOEBSEͷ͓͔͛

    View full-size slide

  38. "84%FW%BZ5PLZP:VTVLF8BEB
    3FRVFTU63-3FTQPOTF

    )POP͸͜ΕΛԠ༻
    ֎෦ͷϥΠϒϥϦʹ͸ґଘ͍ͯ͠ͳ͍

    View full-size slide

  39. "84%FW%BZ5PLZP:VTVLF8BEB
    ͢΂ͯͷϥϯλΠϜϓϥοτϑΥʔϜͰ
    ΄΅ಉ͡ίʔυ͕ಈ͘

    View full-size slide

  40. "84%FW%BZ5PLZP:VTVLF8BEB
    XPSLFSE#VO

    View full-size slide

  41. "84%FW%BZ5PLZP:VTVLF8BEB
    'BTUMZ$PNQVUF!&EHF

    View full-size slide

  42. "84%FW%BZ5PLZP:VTVLF8BEB
    -BHPO

    View full-size slide

  43. "84%FW%BZ5PLZP:VTVLF8BEB
    %FOP

    View full-size slide

  44. "84%FW%BZ5PLZP:VTVLF8BEB
    /PEFKT

    View full-size slide

  45. "84%FW%BZ5PLZP:VTVLF8BEB
    "84-BNCEB

    View full-size slide

  46. "84%FW%BZ5PLZP:VTVLF8BEB
    $MPVEGMBSF1BHFT

    View full-size slide

  47. "84%FW%BZ5PLZP:VTVLF8BEB
    /FYUKT

    View full-size slide

  48. "84%FW%BZ5PLZP:VTVLF8BEB
    Ͳ͜Ͱ΋ಈ͘ҙຯ
    w ϓϥοτϑΥʔϜґଘ͕ͳ͍૬ޓӡ༻Մೳ
    w ͻͱͭͷ͜ͱΛ֮͑Ε͹Α͍
    w ଟ͘ͷϢʔβʔ͕࢖͏͜ͱʹͳΔ)POPࣗମͷ඼্࣭͕͕Δ

    View full-size slide

  49. "84%FW%BZ5PLZP:VTVLF8BEB
    #BUUFSJFT*ODMVEFE

    View full-size slide

  50. "84%FW%BZ5PLZP:VTVLF8BEB
    ϛυϧ΢ΣΞ
    w ϏϧτΠϯɾϛυϧ΢ΣΞ
    w SEQBSUZɾϛυϧ΢ΣΞ
    w ΧελϜɾϛυϧ΢ΣΞ

    View full-size slide

  51. "84%FW%BZ5PLZP:VTVLF8BEB
    ϏϧτΠϯɾϛυϧ΢ΣΞ
    w #BTJD"VUIFOUJDBUJPO
    w #FBSFS"VUIFOUJDBUJPO
    w $BDIF
    w $PNQSFTT
    w $PPLJF
    w $034
    w &5BH
    w IUNM
    w +49
    w +85"VUIFOUJDBUJPO
    w -PHHFS
    w 1SFUUZ+40/
    &5BHϛυϧ΢ΣΞͱϩΨʔΛશͯͷύεʹదԠ͢Δ

    View full-size slide

  52. "84%FW%BZ5PLZP:VTVLF8BEB
    SEQBSUZɾϛυϧ΢ΣΞ
    w 'JSFCBTF"VUI
    w (SBQI2-4FSWFS
    w 2XJL$JUZ
    w 4FOUSZ
    w U31$4FSWFS
    w 5ZQF#PY7BMJEBUPS
    w ;PE7BMJEBUPS
    4FOUSZϛυϧ΢ΣΞΛ࢖͏

    View full-size slide

  53. "84%FW%BZ5PLZP:VTVLF8BEB
    ΧελϜɾϛυϧ΢ΣΞ
    Ϣʔβʔ͕ࣗ਎Ͱϛυϧ΢ΣΞΛ࡞ΕΔ

    View full-size slide

  54. "84%FW%BZ5PLZP:VTVLF8BEB
    ΦχΦϯετϥΫνϟ

    View full-size slide

  55. "84%FW%BZ5PLZP:VTVLF8BEB
    ϛυϧ΢ΣΞͰϓϩΩγΛ࣮૷͢Δ
    w ϛυϧ΢ΣΞ͸ϦΫΤετͱϨεϙϯεͷલޙΛѻ͑Δ
    w ΦϦδϯ΁ͷϦΫΤετϨεϙϯεͷલޙ

    View full-size slide

  56. "84%FW%BZ5PLZP:VTVLF8BEB
    ϛυϧ΢ΣΞͷҖྗ
    w ඞཁͳ࣌ʹJNQPSU͢ΔόϯυϧαΠζΛখ͘͞อͭ
    w ೉͍͜͠ͱΛ؆୯ʹ
    w Α͘ςετ͞Εͨϛυϧ΢ΣΞΛ࢖͑Δ
    w ࠶ར༻Մೳ
    w ϛυϧ΢ΣΞΛଋͶΔ͜ͱͰ༷ʑͳػೳΛ࣮ݱ͢Δ

    View full-size slide

  57. "84%FW%BZ5PLZP:VTVLF8BEB
    %FMJHIUGVM%9

    View full-size slide

  58. "84%FW%BZ5PLZP:VTVLF8BEB
    5ZQF4DSJQU

    View full-size slide

  59. "84%FW%BZ5PLZP:VTVLF8BEB
    31$

    View full-size slide

  60. "84%FW%BZ5PLZP:VTVLF8BEB
    )POP·ͱΊ
    w ଎͍
    w খ͍͞
    w Ͳ͜Ͱ΋ಈ͘
    w ϛυϧ΢ΣΞ
    w ։ൃମݧ͕Α͍

    View full-size slide

  61. "84%FW%BZ5PLZP:VTVLF8BEB
    Τοδύλʔϯू

    View full-size slide

  62. "84%FW%BZ5PLZP:VTVLF8BEB
    Τοδ׆༻ͷϢʔεέʔεͱ࣮૷
    w ࣮૷ʹ͸)POPΛ࢖༻ͲͷϓϥοτϑΥʔϜͰ΋ϩδοΫ͸ಉ͡
    w ࠓճ͸ΦϦδϯ͕͋ΔϦόʔεϓϩΩγΛத৺ʹ
    w ΦϦδϯΛ׆͔͢
    w ϑϧελοΫͩͱయܕతͳΞϓϦέʔγϣϯߏஙͷ࿩ʹͳΔ
    w ΦϦδϯ͸υϝΠϯͷ࣮૷ʹूத͢Δ
    w ແବͳΞΫηε͔ΒɺΦϦδϯ͔ΒΛԕ͚͟Δ
    w $PEFPWFSDPOGJHVSBUJPOઃఆΑΓίʔυ
    w ؅ཧը໘ɺ7$-Ͱ΍͍ͬͯ͜ͱΛ'VODUJPOͰ΍Δ

    View full-size slide

  63. "84%FW%BZ5PLZP:VTVLF8BEB
    ϓϩΩγͷ࣮૷
    ϦΫΤετ͕དྷΔ
    c
    W
    'VODUJPOT͕ϦΫΤετΛॲཧ͢Δ
    c
    W
    ΦϦδϯΛGFUDI͢Δ
    c
    W
    'VODUJPOT͕ϨεϙϯεΛॲཧ͢Δ
    c
    W
    ϨεϙϯεΛฦ͢

    View full-size slide

  64. "84%FW%BZ5PLZP:VTVLF8BEB
    8FC4UBOEBSEʹΑΔ࣮૷

    8FC4UBOEBSEͰ࣮૷Ͱ͖Δ
    )POPͷ಺෦Ͱ΍͍ͬͯΔ͜ͱ

    View full-size slide

  65. "84%FW%BZ5PLZP:VTVLF8BEB
    Ϩεϙϯεϔομͷ௥Ճ࡟আ
    w A91PXFSFE#ZA
    w A93FTQPOTF5JNFA
    w ηΩϡϦςΟʹؔ܎͢Δϔομ
    - Content-Security-Policy: A powerful allow-list of what can happen on your page which mitigates many attacks


    - Cross-Origin-Opener-Policy: Helps process-isolate your page


    - Cross-Origin-Resource-Policy: Blocks others from loading your resources cross-origin


    - Origin-Agent-Cluster: Changes process isolation to be origin-based


    - Referrer-Policy: Controls the Referer header


    - Strict-Transport-Security: Tells browsers to prefer HTTPS


    - X-Content-Type-Options: Avoids MIME sniffing


    - X-DNS-Prefetch-Control: Controls DNS prefetching


    - X-Download-Options: Forces downloads to be saved (Internet Explorer only)


    - X-Frame-Options: Legacy header that mitigates clickjacking attacks


    - X-Permitted-Cross-Domain-Policies: Controls cross-domain behavior for Adobe products, like Acrobat


    - X-Powered-By: Info about the web server. Removed because it could be used in simple attacks


    - X-XSS-Protection: Legacy header that tries to mitigate XSS attacks, but makes things worse, so Helmet disables it



    View full-size slide

  66. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  67. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  68. "84%FW%BZ5PLZP:VTVLF8BEB
    $034
    w $SPTT0SJHJO3FTPVSDF4IBSJOH
    w αʔόʔଆͷ࣮૷
    CORS: Cross-Origin Resource Sharing


    1. ҟͳΔΦϦδϯؒ௨৴ΛՄೳʹ͢Δ


    2. ϒϥ΢βͷಉҰΦϦδϯϙϦγʔ੍໿Λ؇࿨͢Δ


    3. CORS͸αʔόʔଆͰઃఆ͠ରԠ͢Δ


    4. ϦΫΤετ͸ڐՄ͞ΕͨΦϦδϯ͔ΒͷΈૹ৴͢Δ


    5. αΠτؒεΫϦϓτ߈ܸ͔Βอޢ͢Δ

    View full-size slide

  69. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  70. "84%FW%BZ5PLZP:VTVLF8BEB
    ೝূ
    w #BTJDೝূ
    w #FBSFSೝূ
    w +85ೝূ

    View full-size slide

  71. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  72. "84%FW%BZ5PLZP:VTVLF8BEB
    &5BHͷ௥Ճ
    &5BH&OUJUZ5BH
    ϨεϙϯεͷόʔδϣϯΛࣝผ͢Δ
    σʔλมߋ࣌ʹ৽͍͠&5BHΛੜ੒͢Δ
    Ωϟογϡ੍ޚΛॿ͚ɺଳҬ෯Λઅ໿͢Δ
    ڧ͍ͱऑ͍ͷͭͷܗ͕ࣜଘࡏ͢Δ
    ৚݅෇͖ϦΫΤετͰ࢖༻͞ΕΔ

    View full-size slide

  73. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  74. "84%FW%BZ5PLZP:VTVLF8BEB
    ϦμΠϨΫτ

    w ΦϦδϯ͕ඞཁͳ͍

    View full-size slide

  75. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  76. "84%FW%BZ5PLZP:VTVLF8BEB
    ΦϦδϯͷৼΓ෼͚
    http://example.com/assets/images/foo.png => http://imagehost/foo.png


    http://example.com/assets/fonts/bar.woff => http://fonthost/bar.woff
    w ΞηοτΛϝΠϯͷΦϦδϯͱ͸ผͷετϨʔδʹอଘ
    w ը૾ͱϑΥϯτͰϗετ͕ҧ͏
    w ಉ͡υϝΠϯͷύεͰද͍ࣔͨ͠

    View full-size slide

  77. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  78. "84%FW%BZ5PLZP:VTVLF8BEB
    Ωϟογϡ
    w $BDIF"1*XPSLFSE%FOPͰαϙʔτ
    w Ωϟογϡͷ੍ޚ͕೉͍͠ޙड़
    w جຊతʹ͸55-શඈ͹͠ͰରԠ

    View full-size slide

  79. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  80. "84%FW%BZ5PLZP:VTVLF8BEB
    σόΠεผͷΩϟογϡ
    w 1$ͱϞόΠϧͰϖʔδͷग़͠෼͚Λͯ͠ΔΞϓϦʹΩϟογϡΛೖΕΔ
    ΩϟογϡΩʔ͕ҰͭʹͳΔ
    w εϚϗͰΞΫηεͯ͠Δͷʹ1$ͷϖʔδ͕ग़Δ
    w ΩϟογϡΩʔΛʮ63-σόΠε໊ʯʹ͢Δ

    View full-size slide

  81. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  82. "84%FW%BZ5PLZP:VTVLF8BEB
    )5.-λάͷஔ׵
    w ྫAPMEIPTUA͔ΒAOFXIPTUA΁Ҿͬӽͨ͠
    w ϦϯΫΛॻ͖׵͍͑ͨɺJNHTSDΛॻ͖׵͍͑ͨ
    w ྫJOࠃࡍԽରԠ
    w )5.-3FXSJUFS΍ਖ਼نදݱͳͲ

    View full-size slide

  83. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  84. "84%FW%BZ5PLZP:VTVLF8BEB
    ϗοτϦϯΫېࢭϦϑΝϥฤ
    w ௚ϦϯΫϗοτϦϯΫېࢭ
    w ϦϑΝϥΛ࢖ͬͨྫ
    w ϦϑΝϥ͕ࣗαΠτҎ֎ͩͬͨΒΛฦ͢
    w ϒϥ΢βͰϦϑΝϥͷૹग़ΛΦϑʹ͍ͯͨ͠ΒݟΕͳ͍

    View full-size slide

  85. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  86. "84%FW%BZ5PLZP:VTVLF8BEB
    ϗοτϦϯΫېࢭ4JHOFE3FRVFTUฤ
    w ༗ޮظݶ෇͖ͷ63-Λੜ੒ɺݕূ͢Δ
    w ੜ੒ଆ
    ੜ੒ͱݕূͰγʔΫϨοτΩʔΛڞ༗͢Δɻ
    63-ύεͱ༗ޮظݶΛσʔλͱ͠ɺγʔΫϨοτΩʔͰΩʔΛੜ੒͢Δɻ
    63-ʹΩʔͱ༗ޮظݶΛΫΤϦύϥϝʔλͱͯ͠௥Ճ͢Δɻ
    w ݕূଆ
    63-ΫΤϦύϥϝʔλ͔ΒΩʔͱ༗ޮظݶΛऔΓग़͢ɻ
    ΩʔΛγʔΫϨοτΩʔΛݩʹݕূ͢Δɻ
    ༗ޮظݶΛݕূ͢Δɻ
    ༗ޮͰ͋Ε͹ɺϓϩΩγ͢Δɻ

    View full-size slide

  87. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  88. "84%FW%BZ5PLZP:VTVLF8BEB
    ಈతίϯςϯπͷΩϟογϡ
    w Ξηοτ΍ߋ৽ස౓ͷগͳ͍)5.-͸55-ͱ໌ࣔతͳύʔδ
    w ߋ৽ස౓ͷߴ͍)5.-΍"1*͸Ωϟογϡ͠ʹ͍͘
    w ύʔδͷλΠϛϯάɺ৔ॴ͕೺Ѳ͠ʹ͍͘
    w σʔλੜ੒ʹ͕͔͔࣌ؒΔ৔߹٧Ή5IVOEFSJOH)FSE໰୊
    w Ωϟογϡ͕ͳ͍ঢ়ଶͰΞΫηε͕དྷͯɺେྔͷϖʔδੜ੒͕૸Δ

    View full-size slide

  89. "84%FW%BZ5PLZP:VTVLF8BEB
    4UBMF8IJMF3FWBMJEBUF483
    w Ωϟογϡ͕੾ΕͨΒɺόοΫάϥ΢ϯυͰΩϟογϡΛ໰͍߹Θͤͭͭ
    ʢWBMJEBUFʣɺͦͷؒ͸ݹ͍ΩϟογϡʢTUBMFʣΛฦͯ͠ɺίϯςϯπ͕
    ฦ͖ͬͯͨΒΩϟογϡΛߋ৽͢Δ
    w ͜ΕΛΤοδͰͷ'VODUJPOͰ࣮ݱ͢Δ
    w ύʔδͷλΠϛϯά͸55-͔ߋ৽ܥ͕૸ͬͨ࣌ʹߦͬͯ΋Α͍

    View full-size slide

  90. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  91. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  92. "84%FW%BZ5PLZP:VTVLF8BEB
    ΤοδϢʔεέʔεͦͷଞ
    w 63-ਖ਼نԽ
    w ϘοτϓϩςΫγϣϯ
    w ϩάͷऩू
    w 0(1ͷ࡞੒ɺ഑৴
    w &BSMZ)JOUT഑৴
    w ϨʔτϦϛοτ
    w ϑϧελοΫΞϓϦ

    View full-size slide

  93. "84%FW%BZ5PLZP:VTVLF8BEB
    ςετʹ͍ͭͯ
    w 3FRVFTU3FTQPOTFΛ࠶ݱͯ͠ςετͰ͖Δ
    w ݁ߏ͜ΕͰे෼
    w ΦϦδϯࠐΈͷςετ͕՝୊
    w ΦϯϥΠϯͰςετ
    w ΦϦδϯΛϞοΫ͢Δ

    View full-size slide

  94. "84%FW%BZ5PLZP:VTVLF8BEB

    View full-size slide

  95. "84%FW%BZ5PLZP:VTVLF8BEB
    ΤοδͰϦόʔεϓϩΩγΛ΍Δҙຯ
    w $PEFPWFSDPOGJHVSBUJPOίʔυͰ؅ཧͰ͖Δ
    w ςετ͕͠΍͍͢
    w ࠶ར༻ੑ͕͋Δϛυϧ΢ΣΞ
    w ઃఆͰ͸Ͱ͖ͳ͍͜ͱ͕Ͱ͖Δ
    w ࡉ͔͍Ωϟογϡͷ੍ޚɺ)5.-ͷॻ͖׵͑FUD
    w ͱ͖ͬͭ΍͍͢/PU7$-৬ਓ

    View full-size slide

  96. "84%FW%BZ5PLZP:VTVLF8BEB
    ·ͱΊ

    View full-size slide

  97. "84%FW%BZ5PLZP:VTVLF8BEB
    ࣮ફΤοδϢʔεέʔε
    w Τοδͷಛ௃
    w খ͍͞'VODUJPO͕୹͍࣌ؒɺߴ଎ʹಈ͘
    w )POPͷ঺հ
    w ύϑΥʔϚϯεͷ޲্ɺϛυϧ΢ΣΞͷར༻
    w ֤ϓϥοτϑΥʔϜͷࠩҟΛຒΊΔ
    w Τοδύλʔϯ
    w ΦϦδϯΛ׆͔͢

    View full-size slide

  98. "84%FW%BZ5PLZP:VTVLF8BEB
    ͓͠·͍

    View full-size slide