MIME sniffing and X-Content-Type-Options: nosniff explained

Set X-Content-Type-Options: nosniff in next.config.js so it applies to every response, including API routes and static file routes.

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

Add the directive to your server block so it applies to all responses proxied through nginx.

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

nosniff is most effective when every response also carries a correct Content-Type header. For user-uploaded files, serve them with an appropriate type (e.g. image/png for PNG files) and from a separate origin or storage domain — not the same origin as your app — so that even if a file executes, it can't access your users' session cookies.

Extension checks can be bypassed. Use a library such as file-type (npm) to inspect the actual file magic bytes server-side, and reject anything that doesn't match an allowlist of safe types before it ever reaches your storage layer.

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");
  }
}