MIME Type (Media Type)

TL;DR: A MIME type (officially a media type) is the type/subtype label in the Content-Type header, such as text/html or application/json. Browsers trust it more than the file extension.

A MIME type, called a media type in RFC 9110, is a two-part identifier of the form type/subtype, optionally followed by parameters, that tells the receiver how to interpret a message body. It is carried in Content-Type on responses and on requests with bodies, and the registry of valid values is maintained by IANA.

Anatomy

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
X-Content-Type-Options: nosniff

• text is the top-level type; html is the subtype; charset=utf-8 is a parameter.
• Suffixes such as application/ld+json and image/svg+xml mean “this is JSON-LD” and “this is XML-based”.
• application/json defines no charset parameter, because JSON is always UTF-8.

The errors this causes

With nosniff set, Chrome refuses wrongly typed scripts and stylesheets:

Refused to execute script from 'https://example.com/app.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Module scripts are checked even without nosniff. In both cases the actual cause is almost always a 404 that the server replaced with index.html, often after a deploy removed an old hashed asset.

Non-obvious facts

• Browsers sniff when the type is missing or wrong, which is why X-Content-Type-Options: nosniff exists. It also prevents a user-uploaded file from being interpreted as HTML or script.
• text/plain is not a safe default for uploads. Serve user content with an explicit type and Content-Disposition: attachment where possible.
• Requests have media types too. Sending JSON with Content-Type: text/plain or form encoding to a JSON parser yields a 415 Unsupported Media Type or an empty body in frameworks like Express.
• The Accept header is the other half. The client lists types it can handle; the server picks one and labels it in Content-Type.

Go deeper

• Content-Type header
• X-Content-Type-Options
• Accept header
• 415 Unsupported Media Type