📌

CrossOriginResourceSharingのヘッダ制御をブラウザだけでテストする

に公開
CORS
tech

特定のWEBサイトにアクセスしてブラウザ経由で別サイトのAPIを参照する場合など、
Cross-Origin Resource Sharingを制御するレスポンスヘッダを返す必要があります。

ApacheなどWEBサーバのソフトウェアで設定を入れたり、クラウド上のリソースでレスポンスヘッダを入れますが、設定後のテストが手間だと思ってます。

アプリとWEBサーバの設定を1つのチームで対応できれば良いですが、WEBサーバの設定は別チームが管理している、という場合は先行して対応を入れていただき、後からアプリを動かして確認する、という順番になります。そうした場合、WEBサーバ側に不備があると、緊急対応してもらったり、計画を延伸することになります。

テストを簡単に実施できたら良いのに、、、と思っていましたが、ブラウザ(Chrome)の開発者ツールを使って検証できることを知りました。

手順

  • Chromeで検証したいWEBサイトに遷移する
  • 開発者ツールを起動してコンソールでJavaScriptを入力する

やってみます

検証サイトに遷移

開発者ツールを開いてコンソールにJavaScriptを入力

fetch('https://www.yahoo.co.jp/', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  credentials: 'include'
})

最初はJavaScriptを注入して問題ないか？実施するなら allow pasting と入力しろ、と警告が出ます。入力する。

リクエストを送る

送付先からCORSを許容するヘッダが返ってきていないのでCORSエラーとなる。(CORSを検証するリクエストが送れている)

コンソールの表示

ネットワークの表示
preflightリクエストが200で返ってきて、その次のGETリクエストがCORSerrorとなっている。

ブラウザ単体で検証できた

以前は検証用のHTMLを準備して環境の置くなど、検証するまでに必要な作業が多かったけど、ブラウザだけあれば検証できます。これで大幅に間接コストと、検証が遅れることのリスクを減らせます。利用する機会は少ないけどしっかり検証していきたい。

Discussion