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

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

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

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

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ヘッダーを許可します。特定のヘッダーのみを許可する場合は、
     *   必要なヘッダーを配列に追加します。
     */
];

 

まとめ

CORSは、Webの安全性を保つための重要なメカニズム。最初は複雑に感じるかもしれませんが、基本を理解すれば、より安全で効果的なWebアプリケーション開発が可能になります。

これにてCORSの基本を何となく理解!

Twitterでフォローしよう

読んでみーな
おすすめの記事