This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
An OpenJS Foundation Project

Use `X-Content-Type-Options` header

Use X-Content-Type-Options header (x-content-type-options)

x-content-type-options requires that all resources are served with the X-Content-Type-Options: nosniff HTTP response header.

Why is this important?

Sometimes the metadata browsers need to know how to interpret the content of a resource is either incorrect, not reliable, or absent. In those cases, browsers use contextual clues that inspect the bytes of the response to detect the file format. This is known as MIME sniffing and it is done regardless of the specified Content-Type HTTP header sent by servers.

For example, if a browser requests a script, but that script is served with an incorrect media type (e.g. x/x), the browser will still detect the script and execute it.

While content sniffing can be beneficial, it can also expose the web site/app to attacks based on MIME-type confusion leading to security problems, especially in the case of servers hosting untrusted content.

Fortunately, browsers provide a way to opt-out of MIME sniffing by using the X-Content-Type-Options: nosniff HTTP response header.

Going back to the previous example, if the X-Content-Type-Options: nosniff header is sent for the script and the browser detects that it’s a script and it wasn’t served with one of the JavaScript media types, the script will be blocked.

While modern browsers respect the header mainly for scripts and stylesheets, Chromium uses this response header on other resources for Cross-Origin Read Blocking.

What does the hint check?

The hint checks if all resources are served with the X-Content-Type-Options HTTP headers with the value of nosniff.

Examples that trigger the hint

Resource is not served with the X-Content-Type-Options HTTP header.

HTTP/... 200 OK

...

Content-Type: image/png

Script is served with the X-Content-Type-Options HTTP header with the invalid value of no-sniff.

HTTP/... 200 OK

...
Content-Type: text/javascript; charset=utf-8
X-Content-Type-Options: no-sniff

Examples that pass the hint

Script is served with the X-Content-Type-Options HTTP header with the valid value of nosniff.

HTTP/... 200 OK

...
Content-Type: text/javascript; charset=utf-8
X-Content-Type-Options: nosniff

How to configure the server to pass this hint

How to configure Apache

Apache can be configured to add headers using the Header directive.

<IfModule mod_headers.c>
    Header always set X-Content-Type-Options nosniff
</IfModule>

Note that:

  • The above snippet works with Apache v2.2.0+, but you need to have mod_headers enabled for it to take effect.

  • If you have access to the main Apache configuration file (usually called httpd.conf), you should add the logic in, for example, a <Directory> section in that file. This is usually the recommended way as using .htaccess files slows down 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.

How to configure IIS

You can add this header unconditionally to all responses.

<configuration>
     <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="X-Content-Type-Options" value="nosniff" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

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.

How to use this hint?

This package is installed automatically by webhint:

npm install hint --save-dev

To use it, activate it via the .hintrc configuration file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "x-content-type-options": "error",
        ...
    },
    "parsers": [...],
    ...
}

Note: The recommended way of running webhint is as a devDependency of your project.

Further Reading