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