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

CORS_再入門.pdf

dach
February 27, 2020
560

 CORS_再入門.pdf

dach

February 27, 2020
Tweet

Transcript

  1. CORS 再入門 @dach

  2. Who is me? Job • 元SRE →まねーじめんと(実装したい) 所属 • EasyEasy運営 •

    TOPGATE • チキン南蛮を支える会(仮) 最近の主な出費 • 食費、嫁の時計
  3. None
  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 次の2つのケースで、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!