MIME 스니핑과 X-Content-Type-Options: nosniff 설명

next.config.js에서 X-Content-Type-Options: nosniff를 설정하여 API 라우트와 정적 파일 라우트를 포함한 모든 응답에 적용되도록 합니다.

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          { key: "X-Content-Type-Options", value: "nosniff" },
        ],
      },
    ];
  },
};

server 블록에 디렉티브를 추가하여 nginx를 통해 프록시되는 모든 응답에 적용되도록 합니다.

add_header X-Content-Type-Options "nosniff" always;

nosniff는 각 응답에 정확한 Content-Type 헤더가 있을 때 가장 효과적입니다. 사용자 업로드 파일은 적절한 타입으로 제공하고 앱과 동일한 오리진이 아닌 별도의 오리진이나 스토리지 도메인에서 제공하여, 파일이 실행되더라도 사용자의 세션 쿠키에 접근할 수 없도록 합니다.

확장자 검사는 우회될 수 있습니다. file-type(npm) 같은 라이브러리를 사용하여 서버 측에서 파일의 매직 바이트를 검사하고, 허용된 안전한 타입 목록과 일치하지 않는 것은 스토리지 레이어에 도달하기 전에 거부합니다.

import { fileTypeFromBuffer } from "file-type";

const ALLOWED = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);

async function validateUpload(buffer: Buffer): Promise<void> {
  const type = await fileTypeFromBuffer(buffer);
  if (!type || !ALLOWED.has(type.mime)) {
    throw new Error("Upload rejected: unsupported file type");
  }
}