CORS_再入門.pdf

Transcript

1. CORS 再入門 @dach
2. Who is me? Job • 元SRE　→まねーじめんと（実装したい） 所属 • EasyEasy運営 • TOPGATE • チキン南蛮を支える会（仮） 最近の主な出費 • 食費、嫁の時計
4. Why speak CORS?
5. Former me 完全に理解したわ
6. The other day... @dach CORS問題を解消するために、 API 側でも改修入れました。 これで localhost で CORS が出てたのも解消されました。
7. あれ？ CORSって ClientServer側の話 じゃないの？
8. What’s CORS?
9. CORS (オリジン間リソース共有) 追加の HTTP ヘッダーを使用して、あるオリ ジンで動作しているウェブアプリケーションに、 異なるオリジンにある選択されたリソースへの アクセス権を与えるようブラウザーに指示する ための仕組みです。 （「MDN web docs」より引用） https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
10. Question 次の２つのケースで、CORS制約で怒られるケースはどれで しょう
11. In this case: 1 front-end Container API Contaner domain: default-dot-app domain: api-dot-app
12. In this case: 2 front-end Container API Contaner port:443 network:A port:8080 network:A localhost
13. Answer どちらも
14. なぜCase2でも怒ら れるのだろうか？
15. Answer ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番 号) にあるリソースをリクエストするとき、 オリジン間 HTTP リクエストを実行します。 （「MDN web docs」より引用）
16. PlayBack @dach CORS問題を解消するために、 API 側でも改修入れました。 これで localhost で CORS が出てたのも解消されました。
17. 手を加えるところって フロントじゃないの？
18. CORS in detail const xhr = new XMLHttpRequest(); const url = 'https://bar.other/resources/public-data/'; xhr.open('GET', url); xhr.onreadystatechange = someHandler; xhr.send();
19. CORS in detail const xhr = new XMLHttpRequest(); const url = 'https://bar.other/resources/public-data/'; xhr.open('GET', url); xhr.onreadystatechange = someHandler; xhr.send(); 誰が呼び出したか
20. CORS in detail if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { header('Access-Control-Allow-Origin: http://arunranga.com'); header('Access-Control-Allow-Methods: GET, OPTIONS'); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Max-Age: 1728000'); header("Content-Length: 0"); header("Content-Type: text/plain"); } else { header("HTTP/1.1 403 Access Forbidden"); header("Content-Type: text/plain"); echo "You cannot repeat this request"; }
21. CORS in detail if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { header('Access-Control-Allow-Origin: http://arunranga.com'); header('Access-Control-Allow-Methods: GET, OPTIONS'); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Max-Age: 1728000'); header("Content-Length: 0"); header("Content-Type: text/plain"); } else { header("HTTP/1.1 403 Access Forbidden"); header("Content-Type: text/plain"); echo "You cannot repeat this request"; } 誰からのアクセス を許可しているか
22. CORS in detail if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { header('Access-Control-Allow-Origin: http://arunranga.com'); header('Access-Control-Allow-Methods: GET, OPTIONS'); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Max-Age: 1728000'); header("Content-Length: 0"); header("Content-Type: text/plain"); } else { header("HTTP/1.1 403 Access Forbidden"); header("Content-Type: text/plain"); echo "You cannot repeat this request"; } 誰からのアクセス を許可しているか 結果
23. CORS in detail const xhr = new XMLHttpRequest(); const url = 'https://bar.other/resources/public-data/'; xhr.open('GET', url); xhr.onreadystatechange = someHandler; xhr.send(); 誰が呼び出したか 誰からのアクセス を許可しているか if($_SERVER['HTTP_ORIGIN'] == "http://arunranga.com") { header('Access-Control-Allow-Origin: http://arunranga.com'); header('Access-Control-Allow-Methods: GET, OPTIONS'); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Max-Age: 1728000'); header("Content-Length: 0"); header("Content-Type: text/plain"); } else { header("HTTP/1.1 403 Access Forbidden"); header("Content-Type: text/plain"); echo "You cannot repeat this request"; }
24. Answer 「Access-Comntrol-Allow-Origin」で対象のリソースにアクセスできるオリジンは 誰かを指定する必要がある ＝ API側の修正が必要だった
25. Conclusion
26. Conclusion • origin（ドメイン、プロトコル、ポート番号） • 異なるoriginにあるリソースに対してアクセスするときには 「レスポンス側」に設定が必要
27. Thanks!