fetchとCORSに潜む罠

Transcript

1. 1.

   fetchͱCORSʹજΉ᠘ EDWARD FOX @Meguro.es 2016/06/21

2. 2.

   Edward Fox - Developer @ Repro Inc. - RoR, Javascript,

   AWS - UI/UX, Team Development
3. 3.

   repro.io - ϞόΠϧΞϓϦ޲͚ ϚʔέςΟϯάπʔϧ

4. 4.

   None
5. 5.

   ࠓ೔࿩͢͜ͱ fetch APIͷར༻ͱCORSʢCloudFrontʣ ͰϋϚͬͨ᠘

6. 6.

   ࠓ೔࿩͞ͳ͍͜ͱ - fetch ͷৄ͍͠࢖͍ํ - CORS ͷৄࡉ - CloudFront ͷઃఆৄࡉ

7. 7.

   fetchͱ͸ 1 WHATWGʹΑΔఆٛ - Fetchඪ४͸ɺϦΫΤετ, Ԡ౴, ͓Αͼ ͜ͷ̎ͭΛଋറ͢Δॲཧ — fetching

   ʢϦιʔεऔಘ ॲཧʣ— Λఆٛ͢Δɻ - Fetchඪ४ʹΑΓJavascriptͷfetch() API ΋ఏڙ͞ΕΔ
8. 8.

   fetchͱ͸ 2-1 WHATWGͷఏڙ͢Δpolyfill࣮૷ - fetch APIͷ࢓༷ʹ४ڌ͢Δpolyfill ࣮૷ - https://github.com/github/fetch

9. 9.

   fetchͱ͸ 2-2 GET fetch("/articles") .then(function(response) { return response.text(); }) .then(function(text)

   { document.body.innerHTML = text; })
10. 10.

    ΍Γ͔ͨͬͨ͜ͱ - ϝοηʔδ࡞੒ػೳͷ Ӿཡը໘Λ࡞Δ

11. 11.

    None
12. 12.

    None
13. 13.

    - طଘͷ#editϖʔδ - fetchͰը૾Λऔಘ͠දࣔ - ৽͍͠#showϖʔδ - Rails͔Βը૾ϦϯΫΛؚΉ HTMLΛฦ͢

14. 14.

    ৽͘͠࡞ͬͨ#showϖʔδΛ ϦϦʔεʂ

15. 15.

    None
16. 16.

    ͳ͔ͥؔ܎ͳ͍#editϖʔδͰ Կ΋දࣔ͞Εͳ͍ʂ

17. 17.

    ରࡦ 1 fetchͷϔομΛม͑ͯΈΔ

18. 18.

    fetch("/messages/1234", { headers: { "Accept": "application/json", "Content-Type": "application/json", } })

19. 19.

    None
20. 20.

    ରࡦ 2 CloudFront ͷCORSઃఆΛ͍͘͡Γ౗͢

21. 21.

    None
22. 22.

    None
23. 23.

    ରࡦ 3 fetchͰCORSΛແޮʹ͢Δ

24. 24.

    fetch("/messages/1234", { mode: "no-cors", })

25. 25.

    None
26. 26.

    None
27. 27.

    ࣮ࡍʹى͖͍ͯͨ͜ͱ 1. #showͰΫϥΠΞϯτʹը૾͕Ωϟογϡ͞ΕΔ ͨͩ͠ɺAccess-Control-Allow-Originϔομ͸ͳ͠ 2. ಉ͡ը૾Λ#editͰऔಘ͠Α͏ͱ͢Δ ͢ͰʹϦιʔε͸Ωϟογϡ͞Ε͍ͯΔ fetchͷCORSʹඞཁͳϔομ͕Ϧιʔεʹͳ͍ͨΊɺ fetchϦΫΤετࣗମ͕தஅ͞ΕΔ 3.

    runtime error Ҏ߱ͷॲཧ͸͢΂ͯதஅ͞Εɺը૾ΛؚΉશͯͷίϯ ςϯπ͕දࣔ͞Εͳ͍
28. 28.

    ղܾࡦ fetchͷϔομʹ Λ௥Ճ pragma: “no-cache”

29. 29.

    ·ͱΊ ɾfetchΛ࢖ͬͯCORSͳϦιʔεΛ औಘ͢Δͱ͖͸ཁ஫ҙ ɾը໘ؒͰϦιʔεͷऔಘํ๏͕ ҟͳΔ͜ͱʹΑΔόά͕͋Δ͜ͱ Λ஌ͬͨ

30. 30.

    ٙ໰ ɾΩϟογϡ͞Ε͍ͯΔ΋ͷΛΘ ͟Θ͟ແޮʹ͢Δͷ͕ద੾ͳͷ͔ʁ ɾΫϥΠΞϯτͰͷΩϟογϡʹ ىҼ͢ΔόάΛૣظʹݟ͚ͭΔʹ ͸ʁ

31. 31.

    ࢀߟ: - Fetch Living Standard - Fetch API ղઆɺ·ͨ͸ Web

    ʹ͓͍ͯ "Fetch ͢Δ" ͱ͸Կ͔ʁ - ͓ർΕ͞·XMLHttpRequestɺ͜Μʹͪ͸fetch - [৽ػೳ] Amazon CloudFront͕CORSʹରԠ͠·ͨ͠ - fetch(), how do you make a non-cached request?
32. 32.

    WE’RE HIRING! ❤

33. 33.

    None