田んぼ

主に近況について書いていきます

CORSに関して

GW明けから仕事でWeb開発を行うことになりそうなので、リハビリを兼ねてお勉強しました。
テーマはタイトルの通りです。

CORSとは

オリジン1をまたいでリソースをAPIなどを通して共有する仕組みをCross-Origin Resource Sharing（以下CORS）と呼びます。
オリジンをまたいだ通信のことを クロスオリジン と呼びます。
簡単に説明すると、クライアントからサーバにアクセスする前の権限確認プロトコルです。

CORSにより、CSRF2を防ぐことができるようです3。

アクセス制御フローに関して

単純なリクエストと、プリフライトリクエスト（後述）を送信するリクエストがあります。

単純リクエスト

以下の条件を満たすリクエストです。

  • メソッドがGET、HEAD、POSTのどれか
  • ヘッダーがAccept、Accept-Language、Content-Language、Content-Type以外含まない
  • Content-Typeを含む場合、その値は以下のどれか
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

単純リクエストの場合、Fetch API（HTTPリクエストを発行するAPI）にcorsフラグを立てることよって通信可能になります。

レスポンスヘッダーでは、 Access-Control-Allow-Origin を返信しています。
これを設定することによって、リソースの制限をかけることができます。

プリフライトリクエスト

上記以外のリクエストでは、 プリフライトリクエスト が必要になります。
プリフライトリクエストとは、OPTIONSメソッドを用いて、送信先が安全かどうか確かめるためのリクエストです。

プリフライトリクエストのレスポンスとして、以下のものが含まれている必要があります。

  • Access-Control-Request-Method
  • Access-Control-Request-Headers
  • Origin

サーバは、プリフライトリクエストを受けて、サーバが許可する通信内容をクライアント側に伝えます。

  • Access-Control-Allow-Origin
  • Access-Control-Allow-Methods
  • Access-Control-Allow-Headers
  • Access-Control-Allow-Credentials
    • Cookieなどの資格情報をサーバが受け取ることができる場合のみ付与される
  • Access-Control-Expose-Headers
    • レスポンスの一部として、どのヘッダーを公開するか列挙されている

プリフライトリクエストは通信するたびに毎回送信されるわけではなく、 Access-Control-Max-Age で一定期間キャッシュすることによって省略できます。

Cookieの取り扱いについて

クロスオリジンの通信では、デフォルトではCookieの送受信はしません。
Cookieの送受信を可能にするには以下2つの条件が必要になります。

  1. クライアントで送信することが設定されている
  2. Cookieの送受信をサーバが許可している

まとめ

CORSは、クロスオリジンの通信を安全（？）にするための仕組みです。
リクエストによっては、プリフライトリクエストを事前に送信する必要があります。
実際に設定する場合は、クライアントサイド（何を許可してもらいたいか）とサーバサイド（何を許可しているか）の設定が必要です。

出典

[1] オリジン間リソース共有（CORS） （MDN Web Docs）
[2] なんとなく CORS がわかる...はもう終わりにする。（Qiita）
[3] ”Real World HTTP”（第2版）（オライリー・ジャパン）

  1. URLのプロトコル、ホスト、ポートによって定義され、これらがすべて一致したときに、同じオリジンと呼ばれる。↩

  2. ユーザを騙し、意図しないリクエストをサーバに送信させる。リクエスト送信先で対策をしていない場合、サーバが意図しない処理を実行してしまう。↩

  3. このような記事もあり、なるほどなぁと↩

Rails 6.0をDockerを使って動かしてみた

久しぶりにWebプログラミングをしたくなったのでやってみました

こちらの記事を参考にしました

qiita.com

しかしこれだけでは動かず、ちょっと修正する必要があったのでメモ

では早速書いていきます

作業ディレクトリ名は blog-app です

./blog-app/docker-compose.yml

version: '3'

services:
    db:
        image: mysql:5.7
        environment:
            MYSQL_ROOT_PASSWORD: password
            MYSQL_DATABASE: root
        volumes:
            - db_data:/var/lib/mysql
        ports:
            - "3306"
    app:
        build:
            context: .
            dockerfile: ./containers/app/Dockerfile
        command: bundle exec rails s -p 3000 -b '0.0.0.0'
        volumes:
            - .:/blog-app
            - ruby_gems:/usr/local/bundle
        ports:
            - "3000:3000"
        links:
            - db
volumes:
    db_data:
    ruby_gems:

./blog-app/containers/app/Dockerfile

FROM ruby:2.5.3
ENV LANG C.UTF-8

RUN apt-get update -qq && \
    apt-get install -y build-essential \ 
                       libpq-dev        

# install nodejs LTS Release ver
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install -y nodejs

# install yarn
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update && apt-get install yarn

RUN mkdir /blog-app

ENV APP_ROOT /blog-app
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install
ADD . $APP_ROOT

まずRails 6.0を動かすためにはRuby 2.5以上が必要なので、2.5以上のイメージを取得します

加えてwebpackerが標準でインストールされるため、新し目のnodejsとyarnもインストールします

残りの設定や起動方法は@azul915さんの記事を参考にすればできました

f:id:PochecoPachico:20190712055141p:plain
いつもの

備忘録でした…