Chapter 43

security-helmet

kisihara.c
kisihara.c
2021.07.13に更新

Helmet

Helmetは、HTTPヘッダーを適切に設定する事で、よく知られたウェブの脆弱性からアプリケーションを保護してくれるものだ。一般的に言うと、Helmetはセキュリティ関連のHTTPヘッダを設定する14個の小さなミドルウェア関数が構成される(詳細)。

HINT
helmetをグローバルに適用or登録するには、app.use()app.useを呼ぶかもしれないセットアップ関数を呼び出す前に行わなければならない事に注意。これは基盤となるプラットフォーム(ExpressやFastify等)の仕組によるもので、ミドルウェアやルートが定義される順番は重要となる。ルートを定義した後にhelmetやcors等のミドルウェアを使用した場合、そのミドルウェアはそのルートには適用されず、ルートの後に定義されたミドルウェアのみに適用される(then that middleware will not apply to that route, it will only apply to middleware defined after the route. )。

Expressで使う(デフォルト)

まず必要なパッケージをインストールしよう。

$ npm i --save helmet

インストールが完了したら、グローバルミドルウェアとして適用する。

import * as helmet from 'helmet';
// 初期化ファイルのどこか
app.use(helmet());

HINT
HelmetをインポートしようとしてThis expression is not callableエラーが出た場合、tsconfig.json内でallowSyntheticDefaultImportsesModuleInteroptrueになっている可能性がある。その場合は代わりのインポート文としてimport helmet from 'helmet'としてほしい。

Fastifyを使う。

FastifyAdapterを使う場合、fastify-helmetをインストールしよう。

$ npm i --save fastify-helmet

fastify-helmetはミドルウェアとしてではなくFastifyのプラグインとして、つまりapp.register()を使って使用する。

import * as helmet from 'fastify-helmet';
// 初期化ファイルのどこか
app.register(helmet);

WARNING
apollo-server-fastifyfastify-helmetを使用している場合、GraphQL playgroundのCSPに問題が発生する可能性がある。

app.register(helmet, {
 contentSecurityPolicy: {
   directives: {
     defaultSrc: [`'self'`],
     styleSrc: [`'self'`, `'unsafe-inline'`, 'cdn.jsdelivr.net', 'fonts.googleapis.com'],
     fontSrc: [`'self'`, 'fonts.gstatic.com'],
     imgSrc: [`'self'`, 'data:', 'cdn.jsdelivr.net'],
     scriptSrc: [`'self'`, `https: 'unsafe-inline'`, `cdn.jsdelivr.net`],
   },
 },
});

// CSPを全く使用しない場合は、これを使える。
app.register(helmet, {
 contentSecurityPolicy: false,
});