23. CORS と Helmet

ブラウザには同一オリジンポリシーという制約があり、あるオリジン(例: https://app.example.com)で読み込んだページから別オリジンの API を呼ぶことは既定で制限されます。フロントエンドと API のドメインが異なる構成では、API 側が「このオリジンからのアクセスを許可する」と明示する必要があり、これが CORS です。NestJS では main.ts で app.enableCors() を呼ぶだけで有効になり、許可するオリジンを指定できます。

Helmet は、レスポンスにセキュリティ関連の HTTP ヘッダをまとめて付与するミドルウェアです。helmet パッケージを app.use(helmet()) で適用すると、クリックジャッキングや MIME スニッフィングを防ぐヘッダなどが自動で設定されます。実務ではこの2つを本番公開前のチェックリストに入れておくのが定番です。

つまずきポイントは、CORS をブラウザ以外でも効くアクセス制御だと誤解することです。CORS はあくまでブラウザが課す制約で、curl やサーバー間通信には効きません。本当のアクセス制御は前のレッスンで学んだ認証・認可で行い、CORS は「どのフロントから呼ばれてよいか」を制御するもの、と役割を切り分けて理解しましょう。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// main.ts — CORS と Helmet をアプリ全体に適用
import { NestFactory } from "@nestjs/core";
import helmet from "helmet";
import { AppModule } from "./app.module";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // 許可するオリジンを明示(ブラウザからの別オリジンアクセス制御)
  app.enableCors({ origin: "https://app.example.com" });

  // セキュリティ関連の HTTP ヘッダをまとめて付与
  app.use(helmet());

  await app.listen(3000);
}
bootstrap();

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗