npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hint/hint-x-content-type-options

v4.0.22

Published

hint for best practices related to the usage of the X-Content-Type-Options response header.

Downloads

66,403

Readme

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

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.

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