fetchとCORSに潜む罠

Transcript

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

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

   AWS - UI/UX, Team Development

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

4. None

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

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

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

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

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

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

   { document.body.innerHTML = text; })

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

11. None
12. None

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

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

15. None

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

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

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

19. None

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

21. None
22. None

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

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

25. None
26. None

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

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

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

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

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

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

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

32. WE’RE HIRING! ❤

33. None