CORSがわからないからちゃんと勉強してみた

2024-01-28 2024-01-28 7分

コテツ

こんにちは！今日は、Web開発でよく聞くけど意外と理解しづらいCORS（Cross-Origin Resource Sharing）について、一緒に学んでいこうと思います。

Webの世界は複雑で、ちょっとしたことが大きな違いを生むんですよね。CORSもその一つ。

さあ、一緒にCORSを理解してきましょう〜

Contents

CORSって何？
なぜCORSが必要なの？
CORSの仕組み
- 簡単なCORSの例
- CORSをどう扱う？
設定方法
- 素のPHP
- Laravel
まとめ

CORSって何？

まず、CORSって何？って話から始めます。

CORSは、Webページが異なるオリジン（つまり、異なるドメイン、プロトコル、またはポート）のリソースにアクセスする際のセキュリティメカニズムです。

つまり、あなたのサイトが他のサイトのデータを安全に扱うためのルールのこと。これがないと、セキュリティリスクが高まります。


ホスト (Host)	インターネット上で情報やリソースを提供するコンピューターやサーバー。各ホストには独自のIPアドレスがあり、インターネット上で特定の位置を持つ。例：ウェブサイトをホストするサーバー
ドメイン (Domain)	インターネット上のアドレスの一部。ウェブサイトや電子メールアドレスを識別するために使われる。人間が理解しやすい形式でサーバーを識別するために用いられる。例：「example.com」
オリジン (Origin)	ウェブページの起源を示す概念。スキーム（プロトコル）、ホスト（ドメイン名）、ポートの組み合わせで定義される。例：「https://example.com:80」

なぜCORSが必要なの？

Webはオープンでつながっているけど、同時にセキュリティも重要です。

例えば、あなたがログインしているサイトAから、悪意のあるサイトBがデータを盗もうとするといったリスクがあります。

CORSは、このような不正なアクセスを防ぐために存在しているんです。
安全なWebのためには、必要不可欠なんですよ。

CORSの仕組み

CORSの基本は「信頼できるオリジンからのリクエストのみ許可する」ということ。

これは、サーバー側で設定され、ブラウザがこの設定に従います。

サーバーは、リクエストが来たときに「このオリジンからのリクエストはOKかな？」とチェック。

OKならリソースを提供し、ダメなら拒否。これで、安全にデータのやりとりができるようになります。

簡単なCORSの例

例えば、あなたのサイト（example.com）が、他のサイト（api.example.com）からデータを取得したい場合があるとします。

もし、api.example.comがCORSでexample.comを許可していれば、問題なくデータのやりとりができます。

でも、許可されていなければ、「CORSエラー」が発生してアクセスできないんです。

CORSをどう扱う？

開発者としては、CORSは頭痛の種になることも。

しかし、適切に設定することでセキュリティを確保しつつ、必要なデータ交換も可能になります。サーバーの設定を見直したり、必要に応じてオリジンを許可リストに追加することが大切です。

設定方法

素のPHP

※WEBサーバーにて設定することも可能ですが、今回はPHPでの実装を想定。

header("Access-Control-Allow-Origin: http://example.com");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, X-Requested-With");

/**
* - http://example.com からのアクセスを許可
* - 許可メソッドは GET, POST, PUT, DELETE
* - リクエスト中に許可されるHTTPヘッダー
*     - Content-Type（リソースのメディアタイプ
*     - X-Requested-With（通常、Ajaxリクエストを識別するために使用される）
*/

Laravel

※Laravel 7.x以降ではデフォルトでCORS設定が組み込まれているっぽい。

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://example.com'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,

    /**
     * - http://example.com からのアクセスを許可
     *   'allowed_origins' => ['http://example.com']
     *   この設定は、http://example.com からのリクエストを許可します。
     * 
     * - 許可されるHTTPメソッド
     *   'allowed_methods' => ['*']
     *   この設定は、すべてのHTTPメソッドを許可します。特定のメソッドのみを許可する場合は、
     *   ['GET', 'POST', 'PUT', 'DELETE'] のように配列を編集します。
     * 
     * - 許可されるHTTPヘッダー
     *   'allowed_headers' => ['*']
     *   この設定は、すべてのHTTPヘッダーを許可します。特定のヘッダーのみを許可する場合は、
     *   必要なヘッダーを配列に追加します。
     */
];