CORSについて分からないことがあります。教えて欲しいです。

Question

経緯と解決したいこと

APIを使ってみたいと思い勉強を始めましたが、FetchでAPIを叩こうとした際に同一オリジンポリシーの問題で、APIが叩けませんでした。

なのでCORSについて、詳細なことを調べてみたのですが、分からない箇所が複数あり、その分からない箇所について教えて欲しいです。

同一オリジンポリシーは何の為にあるのか？

クライアントがAというオリジンのウェブサイトを表示している時、そこからBというオリジンのサーバーにはセキュリティの保護上通信が行うことが出来ないというのが、同一オリジンポリシーだと解釈しています。

そこでセキュリティ上、どうして問題があるのかということが気になり調べてみました。すると二つの記事がヒットしたので、スクリーンショットを貼ります。

こちらの記事ではウェブサイトの情報が悪用されるのを防ぐ為に、つまり上の例でいうとBというオリジンが持つウェブサイトの情報を守る為に同一オリジンポリシーがあると書かれています。

こちらの記事ではクライアント側の個人情報を守る為と書かれています。

同一オリジンポリシーがセキュリティ上どうして必要なのか、他のサイトでも調べてみたのですが、説明がまちまちだったり、解説が今の私には難しいレベルだったりして、疑問の解決には至りませんでした。

同一オリジンポリシーは、クライアント側や別オリジンのサイトが持つ情報が悪用されない為、二つの役割があるということなのでしょうか。

教えて欲しいです。

APIがなぜか叩けた。

fetch('https://holidays-jp.github.io/api/v1/date.json')
  .then(response => response.text())
  .then(text => {
    console.log(text);
  });

ローカルに保存された、htmlからAPIを叩いたら、jsonが返ってきました。

私のブラウザはローカルに保存されたファイルを開いており、そのファイルから「https://holidays-jp.github.io/api/v1/date.json」
へと通信を行おうとすると、同一オリジンポリシーの問題で通信ができないはずです。

一体どうしてAPIを叩けたのでしょうか？

Answer 1

一体どうしてAPIを叩けたのでしょうか？

https://holidays-jp.github.io/api/v1/date.json への
リクエストに対するResponse Headerでaccess-control-allow-origin: *を返しているからです。

(developer.mozilla.org)Access-Control-Allow-Origin

あらゆるオリジンからのコードにリソースへのアクセスを許可するようブラウザーに指示するレスポンスには、次のような行を含めてください。

Access-Control-Allow-Origin: *

Comments

[chiba_kun]

なるほど。では違うapiを叩いた時CORSの問題で失敗したのは、api側がクロスドメインアクセスを認めていなかったということなのでしょうか？

[Y.H.]

はいそうなりますね

[Y.H.]

ブラウザの開発者ツール等でアクセスしてレスポンスヘッダーに何が返って来ていてるかを確認してみるといいですよ。

[chiba_kun]

回答ありがとうございます；；

そういうことだったんですね。すごくすっきりしました、本当にありがとうございます；；

ローカルファイルのhtmlからAPIを叩こうと頑張ってたんですが、そもそもAPI側がクロスドメイン許してなかったんで、どう頑張ってもそれは無理だったんですね。。。

APIがクロスドメインのアクセスを認めていなかった場合、これを回避するような方法はないのでしょうか？（jsonpってやつを使えば解決出来るんですかね。方法や代替案があったら教えて欲しいです！）

[chiba_kun]

>>ブラウザの開発者ツール等でアクセスしてレスポンスヘッダーに何が返って来ていてるかを確認してみるといいですよ。

わかりました。みてみます！

Answer 2

CORSはjsonpで解決できます
ただしAPIがきちんとコールバックにjsonデータをのせて返してくれる場合に限ります

Comments

[chiba_kun]

回答ありがとうございます！

CSSフレームワークやgoogleがホストしているJqueryが読み込めるように、同一オリジンポリシーが適用されない範囲があり、その性質を利用したのがJSONPなんですね！

「ただしAPIがきちんとコールバックにjsonデータをのせて返してくれる場合に限ります」

この点について分かりかねるのですが、この話はaccess-control-allow-originと関係のある話なのでしょうか？

[yambejp]

＞ access-control-allow-origin

jsonpは無条件でaccess-control-allow-originに左右されません
ただしjsonpは、たとえば
myFunc([1,2,3])
みたいな形式で返ってくる前提の技術だということです
ただしい形式で返ってこなければ実行もされません

[chiba_kun]

早い返信ありがとうございます。感謝です；；

なるほど、JSONPを使えば問題の解決ができそうですね！

「コールバックにjsonデータをのせて返してくれる場合に限ります」

ではこれは、APIから返ってくるデータがXML文書とかだと上手くいかないっていう話なのでしょうか？

私はface++というAPIを使ってみようと思い、CORSの問題に当たりました。

face++がコールバックにjsonデータをのせて返してくれるかどうかの確認はどのようにして行えばよいのでしょうか？

https://www.programmableweb.com/api/face

上記のウェブサイトにはサポートされる応答形式JSONと書かれています。応答形式がJSONであれば、問題なくJSONPが使えると思ってよいのでしょうか？

[yambejp]

> APIから返ってくるデータがXML文書とかだと上手くいかない

任意の関数が引数を取る形式以外はNGです
（jsonp対応のAPIはコールバックの名称も指定できるものが多い）

[chiba_kun]

返信ありがとうございます！

分かりました。使いたいAPIがjsonp対応かは分かりませんが、とりあえずjsonpを使ってみることにします！

[yambejp]

> 使いたいAPIがjsonp対応かは分かりません

ご自身がAPIを用意するという話でないなら、任意のサービスに
JSONPを期待するのは酷かもしれません
JSONPでインタフェースされるサービスは、基本的に外部からデータ参照されることを
前提としたもののはずなので、ハンドリングのしやすさから
Access-Control-Allow-Originの制限をはずしている可能性の方が高いと思います
CORSにかかるということは外部からの参照を是としないつまり
わざわざJSONP用のインタフェースも用意しない・・・という可能性もあるので
JSONPが一般的に用意されるものだという過度な期待は禁物です

[chiba_kun]

返信ありがとうございます！

なるほど。数日前少し似た質問をした時、「CORSの問題で、javascriptだけは出来ないことがあると知り、サーバー周りに手を出し始める人が多い」という回答がきました。

今その意味がようやく分かったような気がします。

API側でAccess-Control-Allow-Origin:*としておらずアクセスを制限している場合、どんなに工夫してもブラウザのJavaScript側でAPIを呼び出すのは難しいと考えてもよい、ということでしょうか？

[yambejp]

> どんなに工夫してもブラウザのJavaScript側でAPIを呼び出すのは難しい

そうですね。あとはサービス提供側のサーバーとは別のところにAccess-Control-Allow-Origin
回避用のサーバーを噛ませて処理することなら可能です
（いわゆるプロクシ処理に近いこと）

昔は、Google Feed APIやYQLなどのサービスがありましたが、いまはセキュリティの関係か
その手のサービスは衰退していますね
(jquery.xdomainajax.jsなどjQueryのライブラリもそういったサービスを利用していました)

[chiba_kun]

ありがとうございます！

丁寧な回答と返信のおかげで、APIやサーバーに対する理解が深まりました。とても感謝しています。回答ありがとうございました！！