昔話 👹

はるか昔 🐉 XMLHttpRequest (以降 XHR という) により私達は非同期通信を手に入れました。

この便利機能は その強力さ故に 同一生成元ポリシー というセキュリティ機構で守られていました。

実は XHR には 規格みたいなものがあって、 XHR Level2 と呼ばれる新規格がでるまで、 初期の XHR では クロスオリジン通信が行えませんでした 🙅‍

この間、クロスオリジンの通信として用いられていたのが JSONP と呼ばれる JavaScriptの読み込みをうまく利用した非同期通信です。 これは厳密には JSON でもなければ XHR でもなく、 <script> タグを動的に挿入することで データを JavaScript ファイルとして読み込み、 呼び出し側が指定したコールバック関数を実行することにより読み込んだデータを 変数に格納するという、いわばハックです😎

一時期 WebAPI に &callback=_ みたいなパラメータ指定してたじゃないですか。あれがJSONPです。 あの頃はみんな jQueryで使ってたんじゃないかな(どうでもいい)

とはいえ、JSONデータではなく、JavaScriptのコードが問答無用で実行されてしまうので信頼できるサーバとしか通信できないなど セキュリティ的にはあまりよろしくありませんでした

この状況を解消すべく登場したのが XHR Level2 です。 こいつを使うことで サーバ側が許可したオリジンからのみ リクエストを受け付けることが可能となりました。やったー👼 (どうやってやるかは後述)

その後の2014年に Level2 は Level1 と統合される形で消滅しました 💥

そして、今では Fetch API と呼ばれる新規格が登場し、 XHR はもう引退の時期です。

Fetch API は XHR の精神を引き継いでいるので、どちら を使っても同じことですが、 厳密にはこれらは別物なので混同しないようにしましょう。

同一生成元ポリシー

同一生成元ポリシーは オリジン、つまり「スキーム」「ホスト」「ポート」がすべて一致することです。

平たく言えば 「対象URLのパスより前の部分」 が 「現在アクセスしているサイト」と一致していることです。 このサイトであれば http://note.crohaco.net/ と前方一致するURLが同一生成元ポリシーを満たします。 もちろんこのサイトの記事はすべて 制約を満たしています🌝 (アレ？簡単になってないかも)

しかし、例えば https://note.crohaco.net は一見アクセスしても良さそうですが、 スキーム(https)とポート(443)が違うので 同一生成元ポリシーは 満たされません🌚

上では非同期通信のセキュリティとして同一生成元ポリシーがあると言いましたが localStorage(sessionStorage) や iframe もこの制限が適用されます。

今みなさんがご覧になっているこのサイトは ご覧の通り http で運用していて、 記事毎の読了率(どこまで読んだか)を localStorage と呼ばれるブラウザの内部領域に 保存しています。

もし今後、サイトのドメインが変わったり https に移行するようなことがあれば、この読了率がリセットされます

これが Webアプリであれば全ユーザの認証が一旦すべて切断されるという自体にもなりえます🙀

オリジン間リソース共有 (CORS)

上記の 同一生成元ポリシー を超えて クロスオリジン通信を行うことを オリジン間リソース共有(以下 CORS) といいます👻

先程ちらっと言いましたが、通信の可否を左右するのが 以下のレスポンスのヘッダです。

• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

これらのヘッダの値をもとに ブラウザが 通信の可否を判断します。

一般的にサーバ側は CORS に関しては設定によって決められたレスポンスヘッダを返すだけで、 通信内容を判断し失敗させたりはしません。(中にはやってるところもあるかもしれませんが)

ブラウザが判断する上で肝となるのが Access-Control-Allow-Origin です。 その他のものは必要に応じて後述します。

Access-Control-Allow-Origin には 通信を許可する 送信元オリジン を指定し、 送信元のオリジンがこれに該当するようであれば、クロスオリジンであってもブラウザは通信を許可するというわけです。

指定可能な値は以下です。

• * (すべて許可)
• オリジン
  • 複数の場合は ' ' (スペース)区切りで指定する
  • *.example.com のようなサブドメイン指定は不可能。
    • Nginx では サブドメイン等の条件を判定して、 アクセス元のオリジン ($http_origin) をそのまま返却するという方法がよく取られるようです。
      • CORS with Wildcard Subdomains Using Nginx
• null (使わない💩)

おわりに

非同期通信は今日のWeb技術を支える大切な技術です。

CORSをきちんと理解して、便利で安全なWebを一緒に作っていきましょう🐍

今回検証で使ったサーバープログラムは bottle で以下のように作りました。

bottle==0.12.16

from bottle import hook, response, route, run, app


@hook('after_request')
def enable_cors():
    response.headers.update({
        # 'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Origin': 'http://note.crohaco.net',
        'Access-Control-Allow-Credentials': 'true',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers': 'accept, accept-language, content-language, content-type',
        'Access-Control-Max-Age': 10,
    })


@route('<any:path>', method='OPTIONS')
def response_for_options(**kwargs):
    return {}


@route('/', method='GET')
def get():
    return ''


@route('/', method='PUT')
def put():
    return ''


@route('/', method='DELETE')
def delete():
    return ''


@route('/a', method='PUT')
def put2():
    return ''


run()

bottle をインストールして python3 server.py とすると localhost:8080 上でサーバが動くので、ブラウザのコンソールから fetch('http://localhost:8080/', {method: 'get'}) みたいにいろいろ試せます。