hint for media types (f.k.a. MIME types) related best practices
npm install @hint/hint-content-typeContent-Type header (content-type)content-type warns against not serving resources with theContent-Type HTTP response header with a value containing
the appropriate media type and charset for the response.
Even though browsers sometimes [ignore][server configs] the value of
the Content-Type header and try to [sniff the content][mime sniffing
spec] (see also: [X-Content-Type-Options hint][x content type options]),
it’s indicated to always send the appropriate media type and
charset for the response as, among other:
* the media type defines both the data format and how that data is intended
to be processed by browsers
* not sending the appropriate charset, where appropriate, may
[prevent things from being rendered correctly][incorrect rendering]
thus creating a bad user experience (see also:
[meta-charset-utf-8 hint][meta charset hint])
* javascript resources served with the wrong media type [may be blocked][blocked
resources]
The hint checks if responses include the Content-Type HTTP response
header and its value contains the appropriate media type and charset
for the response.
This hint recommends using a Content-Type of text/javascript for
JavaScript resources as [noted in the HTML standard][html js mime].
However this hint also allows application/javascript because that
value was previously recommended by the IETF in [RFC 4329][rfc 4329].
RFC 4329 has [an active draft proposed][ietf js mime draft] to also
recommend text/javascript in the future.
See the section
Can the hint be configured below for an
example of how to require a specific Content-Type value for
JavaScript resources if desired.
Content-Type response header is not sent:
``text
HTTP/... 200 OK
...
`
Content-Type response header is sent with an invalid value:
`text
HTTP/... 200 OK
...
Content-Type: invalid
`
`text
HTTP/... 200 OK
...
Content-Type: text/html;;;
`
Content-Type response header is sent with the wrong media type:
For /example.png
`text
HTTP/... 200 OK
...
Content-Type: font/woff2
`
Content-Type response header is sent with an unofficial media type:
For /example.js
`text
HTTP/... 200 OK
...
Content-Type: application/x-javascript; charset=utf-8
`
Content-Type response header is sent without the charset parameter
for response that should have it:
For /example.html
`text
HTTP/... 200 OK
...
Content-Type: text/html
`
For /example.png
`text
HTTP/... 200 OK
...
Content-Type: image/png
`
For /example.js
`text
HTTP/... 200 OK
...
Content-Type: text/javascript; charset=utf-8
`
How to configure Apache
By default Apache [maps certain filename extensions to specific media
types][mime.types file], but depending on the Apache version that is
used, some mappings may be outdated or missing.
Fortunately, Apache provides a way to overwrite and add to the existing
media types mappings using the [AddType directive][addtype]. For.webmanifest
example, to configure Apache to serve files with theapplication/manifest+json media type, the following can be used:
`apache`
AddType application/manifest+json webmanifest
The same goes for mapping certain filename extensions to specific
charsets, which can be done using the [AddDefaultCharset][adddefaultcharset]AddCharset
and [][addcharset] directives.
If you don't want to start from scratch, below is a generic starter
snippet that contains the necessary mappings to ensure that commonly
used file types are served with the appropriate Content-Type response
header, and thus, make your web site/app pass this hint.
`apacheServe resources with the proper media types (f.k.a. MIME types).
https://www.iana.org/assignments/media-types/media-types.xhtml
# Data interchange
# 2.2.x+
AddType text/xml xml
# 2.2.x - 2.4.x
AddType application/json json
AddType application/rss+xml rss
# 2.4.x+
AddType application/json map
# JavaScript
# 2.2.x+
# See: https://html.spec.whatwg.org/multipage/scripting.html#scriptingLanguages.
AddType text/javascript js mjs
# Manifest files
# 2.2.x+
AddType application/manifest+json webmanifest
AddType text/cache-manifest appcache
# Media files
# 2.2.x - 2.4.x
AddType audio/mp4 f4a f4b m4a
AddType audio/ogg oga ogg spx
AddType video/mp4 mp4 mp4v mpg4
AddType video/ogg ogv
AddType video/webm webm
AddType video/x-flv flv
# 2.2.x+
AddType image/svg+xml svgz
AddType image/x-icon cur
# 2.4.x+
AddType image/webp webp
# Web fonts
# 2.2.x - 2.4.x
AddType application/vnd.ms-fontobject eot
# 2.2.x+
AddType font/woff woff
AddType font/woff2 woff2
AddType font/ttf ttf
AddType font/collection ttc
AddType font/otf otf
# Other
# 2.2.x+
AddType text/vtt vtt
or text/plain parameter set to utf-8.AddDefaultCharset utf-8
.
AddCharset utf-8 .appcache \
.atom \
.css \
.js \
.json \
.manifest \
.map \
.mjs \
.rdf \
.rss \
.vtt \
.webmanifest \
.xml
`
Note that:
* The above snippet works with Apache v2.2.0+, but you need to havemod_mime
[][mod_mime] [enabled][how to enable apache modules]
in order for it to take effect.
* If you have access to the [main Apache configuration file][main
apache conf file] (usually called httpd.conf), you should add
the logic in, for example, a [][apache directory].htaccess
section in that file. This is usually the recommended way as
[using files slows down][htaccess is slow] Apache!
If you don't have access to the main configuration file (quite
common with hosting services), add the snippets in a .htaccess
file in the root of the web site/app.
For the complete set of configurations, not just for this rule, see
the [Apache server configuration related documentation][apache config].
How to configure IIS
By default IIS [maps certain filename extensions to specific media
types][mime.types iis], but depending on the IIS version that is
used, some mappings may be outdated or missing.
Fortunately, IIS provides a way to overwrite and add to the existing
media types mappings using the [ element under .webmanifest
For example, to configure IIS to serve files with theapplication/manifest+json media type, the following can be used:
`xml`
The same element can be used to specify the charset. Continuing withutf-8
the example above, if we want to use it should be as follows:
`xml`
If you don't want to start from scratch, below is a generic starter
snippet that contains the necessary mappings to ensure that commonly
used file types are served with the appropriate Content-Type response
header, and thus, make your web site/app pass this hint.
Note: the remove element is used to make sure we don't use IIS defaults
for the given extension.
`xml
`
Note that:
* The above snippet works with IIS 7+.
* You should use the above snippet in the web.config of your
application.
For the complete set of configurations, not just for this rule,
see the [IIS server configuration related documentation][iis config].
You can overwrite the defaults by specifying custom values for the
Content-Type header and the regular expressions that match the URLs
for which those values should be required.
E.g. The following hint configuration will make webhint require.*\.js
that all resources requested from a URL that matches the regular
expression be served with a Content-Type header with theapplication/javascript; charset=utf-8
value of .
In the [.hintrc][hintrc] file:
`json`
{
"connector": {...},
"formatters": [...],
"hints": {
"content-type": ["error", {
".*\\.js": "application/javascript; charset=utf-8"
}],
...
},
...
}
Note: You can also use the [ignoredUrls][ignoring domains].hintrc
property from the file to exclude domains you don’t control
(e.g.: CDNs) from these checks.
This package is installed automatically by webhint:
`bash`
npm install hint --save-dev
To use it, activate it via the [.hintrc][hintrc] configuration file:
`json`
{
"connector": {...},
"formatters": [...],
"hints": {
"content-type": "error",
...
},
"parsers": [...],
...
}
Note: The recommended way of running webhint is as a devDependency` of
your project.
* Setting the HTTP charset parameter
[blocked resources]: https://www.fxsitecompat.com/en-CA/docs/2016/javascript-served-with-wrong-mime-type-will-be-blocked/
[html js mime]: https://html.spec.whatwg.org/multipage/infrastructure.html#dependencies:mime-type
[ietf js mime draft]: https://tools.ietf.org/html/draft-ietf-dispatch-javascript-mjs
[incorrect rendering]: https://www.w3.org/International/questions/qa-what-is-encoding
[mime sniffing spec]: https://mimesniff.spec.whatwg.org/
[rfc 4329]: https://tools.ietf.org/html/rfc4329
[server configs]: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[addcharset]: https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset
[adddefaultcharset]: https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset
[addtype]: https://httpd.apache.org/docs/current/mod/mod_mime.html#addtype
[apache config]: https://webhint.io/docs/user-guide/server-configurations/apache/
[apache directory]: https://httpd.apache.org/docs/current/mod/core.html#directory
[how to enable apache modules]: https://github.com/h5bp/server-configs-apache/tree/7eb30da6a06ec4fc24daf33c75b7bd86f9ad1f68#enable-apache-httpd-modules
[htaccess is slow]: https://httpd.apache.org/docs/current/howto/htaccess.html#when
[main apache conf file]: https://httpd.apache.org/docs/current/configuring.html#main
[mime.types file]: https://github.com/apache/httpd/blob/trunk/docs/conf/mime.types
[mod_mime]: https://httpd.apache.org/docs/current/mod/mod_mime.html
[iis config]: https://webhint.io/docs/user-guide/server-configurations/iis/
[mime.types iis]: https://support.microsoft.com/en-us/help/936496/description-of-the-default-settings-for-the-mimemap-property-and-for-t
[mimeMap]: https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap
[x content type options]: https://webhint.io/docs/user-guide/hints/hint-x-content-type-options/
[meta charset hint]: https://webhint.io/docs/user-guide/hints/hint-meta-charset-utf-8/
[ignoring domains]: https://webhint.io/docs/user-guide/configuring-webhint/ignoring-domains/