fetchとCORSに潜む罠

20160621
Meguro.es @ Wantedly
http://meguroes.connpass.com/event/32167/

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 - ϞόΠϧΞϓϦ޲͚ ϚʔέςΟϯάπʔϧ
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. ΍Γ͔ͨͬͨ͜ͱ - ϝοηʔδ࡞੒ػೳͷ Ӿཡը໘Λ࡞Δ
13. - طଘͷ#editϖʔδ - fetchͰը૾Λऔಘ͠දࣔ - ৽͍͠#showϖʔδ - Rails͔Βը૾ϦϯΫΛؚΉ HTMLΛฦ͢
14. ৽͘͠࡞ͬͨ#showϖʔδΛ ϦϦʔεʂ
16. ͳ͔ͥؔ܎ͳ͍#editϖʔδͰ Կ΋දࣔ͞Εͳ͍ʂ
17. ରࡦ 1 fetchͷϔομΛม͑ͯΈΔ
18. fetch("/messages/1234", { headers: { "Accept": "application/json", "Content-Type": "application/json", } })
20. ରࡦ 2 CloudFront ͷCORSઃఆΛ͍͘͡Γ౗͢
23. ରࡦ 3 fetchͰCORSΛແޮʹ͢Δ
24. fetch("/messages/1234", { mode: "no-cors", })
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! ❤