hapijsのcors設定

前回hapijsで画像生成サーバをたてました。
となると次はajaxでデータのやり取りができるようにしたいところです。
CORSの設定が必要になるのでやってみました。

hapijsの設定

設定は簡単で connection の呼び出しのときに routes.cors のしたに設定します。

• origin : 許可するアクセス元のリスト
• maxAge : preflightリクエストの有効期間
• headers: 許可するカスタムタグのリスト

server.connection({
    port: process.env.PORT || 3000,
    routes:{
        cors:{
            origin:["https://desolate-cove-15227.herokuapp.com"],
            maxAge: 10,
            headers:["x-api-key"]
        }
    }
});

次にRouteの設定ですが headers のvalidationは少し工夫が必要で Joi.object を使って設定します
そのまま渡すとValidationが通らなくなるので `.options({ allowUnknown: true }) が必要です。
詳しくは本家のissueを参照してください

validate: {
    params: {
        id: Joi.string()
            .regex(/^[a-zA-Z0-9]{3,20}$/)
            .default("test"),
    },
    headers: Joi.object().keys({
        "x-api-key": Joi.number().integer()
            .min(-1000).max(1000)
            .default(0)
    }).options({ allowUnknown: true })
}

これでアクセスする準備ができました。
実際に別ドメインからアクセスしてみたのがこちらになります
imgタグにアドレスを直接書き込む場合と、CORSのテストのためdataURLで取得する場合を試してます。

これでAPIサーバとしても使えるようになりました。

所感

hapijsの特徴を考えてみると Joi と Hoek です。
Joi はhapijs全体に型のような機能を提供し設定とレスポンスを Joi を通して使っています。
Hoek はObjectの取り扱いを補助するものでマージ、比較、平坦化などの操作を容易にしてくれます。
hapijsはサーバの機能をJoiで定義。ユーザーはhoekで必要な範囲を拡張して使う、意図しない動作が少ないサーバを作ることできます。
そのあたりexpressはずっと自由度の高く気軽に使える分、気を使わないと脆弱性を作り込みやすいので注意が必要ですね。
機能を提供するのはhapiで、静的なものはexpressをと使い分けると使い勝手が良さそうです。