Laravel学習中にCORSに触れることがありました。
「CORSってなんだ？」という状態から調べたことをまとめてみます。
私と同じような方のご参考になれば嬉しいです。
CORSとは
= Cross-Origin Resource Sharingを省略したもので、
オリジンが違うプログラム同士のデータ通信のことをCORSといいます。
これだけ言ってもなんのことやら分からないと思います(私は最初頭の中がハテナでいっぱいでした。)。
オリジンってなに？
CORSの説明にでてきたオリジンとは、ウェブコンテンツにアクセスするために使われるURLのスキーム(プロトコル)＋ホスト(ドメイン)＋ポート番号で構成される組み合わせのことです。
http://example.com:80を例に分けてみると、以下のようになります。
| スキーム(プロトコル) | ホスト(ドメイン) | ポート番号 |
|---|---|---|
| http:// | example.com | :80 |
スキーム、ホスト、ポート番号が全て一致 ＝ 同一オリジン
スキーム、ホスト、ポート番号が1つでも違うものがある ＝ クロスオリジン
とされます。
アクセスする先と、アクセス元のオリジンについて、
・オリジンが同じ場合、内容にかかわらず通信が成功する
・オリジンが異なる場合(＝クロスオリジン)、同一オリジンポリシーという制約が発生する
という決まりがあります。
同一オリジンポリシーとは
セキュリティの仕組み。簡単に言うと、
「同一オリジンであれば、リソースへのアクセスは出来るけど、クロスオリジンであればアクセスできる方法を制限するよ」
というもの。これにより、悪意あるアクセスを防ぐことができます。
このようなセキュリティの為の仕組みを調整して、クロスオリジンにアクセスできるように設定することをCORS対策と言います。
簡単にいうと
「いろんな便利なサービスを、他のところでも共有できるようにしよう!」
ということです。
実際どうやって設定するの？
私が学習に使用していた、Laravel Framework 10.39.0での話になります。
おそらく「Laravel CORS」とかで検索すると、
composer require fruitcake/laravel-cors
でインストールする方法などが出てくると思うのですが、
Laravel 7.0以降であれば初期状態で既にインストールされています！！
なので、config/cors.phpを使用してCORS対策をすればOK。
cors.phpのデフォルトの状態はこんな感じ。CORSヘッダーを出力するパスのパターンapi/*, sanctum/csrf-cookieのみを許可する設定になっている。
<?php
return [
/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,
];
それぞれの意味について
'paths' => ['api/*', 'sanctum/csrf-cookie']
CORSヘッダーを出力するパスのパターン、任意でワイルドカード()が利用OK。空だと一切のルートで機能しない。
・APIを対象にする場合: ['api/']
・全てのルートを対象にする場合: ['*']
'allowed_methods' => ['*']
マッチするHTTPメソッド。['*']だと全てのメソッドを許可。
・GET,POST,PUT,DELETE のみ許可する：['GET', 'POST', 'PUT', 'DELETE']
'allowed_origins' => ['*']
許可するリクエストオリジンの設定。*かオリジンに完全一致、またはワイルドカードが利用可。
まとめ
CORSはオリジンが違うプログラム同士のデータ通信であり、これが安全に行われる為にCORS対策が必要です。
どこまで許可するかは、セキュリティや利便性など様々な視点から設定する必要があります。