見出し画像

"CORS"ってなに?

みなさん こんにちは!

あるでぃ(@aldy_verymaccho)です。

最近コーディング力は結構ついてきたのかなと思っていますが、
コードがかけるだけのエンジニアではなくて、その先へ行きたいと最近色々考えていて色々インプットしています。その1つとして、ネットワークやセキュリティについても最近勉強しています。

そこで、最近インプットした CORS について書いて行きたいと思います。

流れはこんな感じ。ちょっと短いですね。

CORSとは
実装例
まとめ


CORSとは

Cross Origin Resource Sharing」の略で、異なるドメイン(クロスオリジン)にアクセスしたときの規制ルールのことです。

「クロスオリジンにアクセスってどんな時?」って思うかもしれませんが、XMLHttpRequest(Ajax)やFetchAPIでの非同期通信する時って読み替えてもらって構いません。

その時、CORSは許可されていないクロスオリジンからのアクセスを禁止しています。

CORSってなんのためにあるかというと、アクセスされるサーバーを守るためなんですよね。アクセスしていいクライアントを設定することで悪意のあるアクセスを規制するんです。

なので、クライアント側(js)で設定することはなくて、サーバー側でアクセスしてくるオリジンを許可するだけです。

実装例

先ほど言ったようにサーバー側でオリジンを許可して行きます。
今回は僕がメインで使ってるCakePHPとJQueryを使っていきますね。

こんな感じでAjaxでアクセスするとします。

$.ajax({
    type:'post',
    url:"example.com/users",
    dataType: 'json',
    error:function(){
        alert('表示できませんでした。');
    },
    success:function(res){
        console.log(res)
    }
});

サーバーサイドはこんな感じです。User情報を全件取得して、jsonで返してます。

public function  index(){
    $this->autoRender = false;
    $this->response->type('application/json');
    $users = $this->Users->find('all');
    $this->response->body(json_encode($users, JSON_UNESCAPED_UNICODE));
}


このままだとCORSに許可されていないのでコンソールにこんなエラーメッセージが出てしまいます。「許可されてないですよ」ってことですね。

なんちゃら~ has been blocked by CORS policy  ~ かんちゃら


それではレスポンスヘッダーに許可するオリジンを設定します。先頭にこれを追加するだけです。

$this->response->header("Access-Control-Allow-Origin:*");


超短いですね。でもこれだと「*」このワイルドカードで全部のオリジンを許可してしまってます。hogehoge.comからのアクセスだけを許可にしたい場合はこんな感じで明示的に指定してあげます。

$this->response->header("Access-Control-Allow-Origin:hogehoge.com");

全体だとこんな感じです。

public function  index(){
    $this->response->header("Access-Control-Allow-Origin:hogehoge.com");
    $this->autoRender = false;
    $this->response->type('application/json');
    $users = $this->Users->find('all');
    $this->response->body(json_encode($users, JSON_UNESCAPED_UNICODE));
}

終了です。


コードから何してるかわかる人もいると思うんですが、
レスポンスに Access-Control-Allow-Originヘッダーを追加しているだけです。これだけ覚えてください。

ですが、Access-Control-Allow-Originヘッダー以外のヘッダーを追加しないといけない場合もあります。
それがどんなときなのかは今後の記事に期待してください。(まだインプットできてません。勉強します)

まとめ

Ajaxとか使う時ってよくよく考えてみるとクロスオリジンにアクセスすることって少ないし、API叩いてもCORSで弾かれることもなかなかないので、意識したことない人もいるのではないでしょうか。僕も意識したことなかったから、恥ずかしながら「CORS」って言葉でさえ聞いたことありませんでしたし、困ることもありませんでした。

でも、サービスが大きくなって、自社のAPIを作るとなるとCORSを理解して、クロスオリジンからのアクセスを許可しなくてはいけません。なので、知っといて損はないかも知れませんね。


PS. これで勉強しています。おすすめです。


#startup #noinoi #エンジニア #インターン #スタートアップ #http #駆け出しエンジニアと繋がりたい


この記事が気に入ったらサポートをしてみませんか?