X-Content-Type-Options header missing

What it means in plain English

X-Content-Type-Options has one value, nosniff. MDN says it "indicates that the MIME types advertised in the Content-Type headers should be respected and not changed," which turns off MIME type sniffing.

MDN describes two effects. For scripts and stylesheets, "the browser blocks the response if the MIME type doesn't match an expected type." For other responses, the browser "uses the supplied Content-Type as-is." MDN's example: a text/plain response with nosniff is not treated as HTML, which "prevents XSS-attacks where user-uploaded content is executed as an HTML document."

MDN also notes: "Site security testers usually expect this header to be set." That is why scanners list it.

Likely causes

• The host was never told to send the header.
• The header was added to the HTML page only, while scripts, styles, and uploads are served without it.

How to fix it, step by step

1. Add the header to every path, not just the HTML page:

X-Content-Type-Options: nosniff

2. Where to add a response header:

   • Vercel: the headers list in vercel.json, with a source pattern such as /(.*) and a list of key and value pairs.
   • Netlify: a plain text _headers file in the publish directory, or [[headers]] in netlify.toml. Netlify says custom headers don't apply to content handled by a function or edge function, such as a server-rendered page, or to proxied content. Those must return the header themselves.
   • Your own server: set it in the web server config. MDN's X-Frame-Options page shows Apache, Nginx, and IIS examples.

   Vercel's vercel.json example sets X-Content-Type-Options: nosniff on the /(.*) source.

3. Check the Content-Type of your scripts and stylesheets in the network panel. Scripts need a JavaScript MIME type and stylesheets need text/css, or nosniff blocks them.

4. If users can upload files, serve them with their real Content-Type.

5. Redeploy and reload the page with the network panel open.

How to check it worked

• Responses for the page, its scripts, and its stylesheets include X-Content-Type-Options: nosniff.
• The console shows no script or stylesheet blocked because of a MIME type mismatch.

For the other security headers, see Missing Content-Security-Policy, HSTS, or X-Frame-Options.

Questions people ask

What does X-Content-Type-Options nosniff do?

It tells the browser to use the declared Content-Type instead of guessing. MDN says it blocks scripts and stylesheets served with the wrong MIME type and stops the browser sniffing other responses.

Can X-Content-Type-Options nosniff break my site?

It can if a script is not served with a JavaScript MIME type or a stylesheet is not served as text/css. MDN says the browser then blocks that response.

Why do security scanners flag a missing X-Content-Type-Options header?

MDN says site security testers usually expect this header to be set, along with a correct Content-Type on every resource.

Sources

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/X-Content-Type-Options (opens in a new tab)
• https://vercel.com/docs/project-configuration/vercel-json (opens in a new tab)
• https://docs.netlify.com/manage/routing/headers/ (opens in a new tab)