@hint/hint-no-protocol-relative-urls

hint that that checks if protocol relative URLs are used

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
3,156302Jun 19, 2021Feb 16, 2017Minified + gzip package size for @hint/hint-no-protocol-relative-urls in KB

Readme

No protocol-relative URLs (no-protocol-relative-urls)

no-protocol-relative-urls warns against using scheme-relative URLs (commonly known as protocol-relative URLs).

Why is this important?

A shorthand way of specifying URLs is to remove the protocol and let the browser determine the relative protocol based on the current connection to the resource.

As the web moves towards HTTPS everywhere, the use of protocol-relative URLs has become an anti-pattern, exposing some sites to man in the middle compromises and is therefore best avoided.

Particularly for web sites/apps served over HTTP, other drawbacks when using protocol relative URLs include:

  • Performance

  • Security

    If protocol-relative URLs are used for CDN links, their domain is not in the browser’s HSTS preload list, and the first request is not made over HTTP, there is a high risk of man-in-the-middle attacks.

    Of course, if the web site/app is served over HTTP it is already exposed to those types of attacks, but in general CDNs constitute a high-value target, and therefore, are much more likely to be attacked than most of the individual sites that use them.

What does the hint check?

The hint checks for protocol-relative URLs.

Note: Currently the hint does not check for protocol-relative URLs inside of stylesheets and scripts.

Let’s presume example1.com does not support HTTPS and example2.com does.

Examples that trigger the hint

<link rel="stylesheet" href="//example1.com/style.css">
<script src="//example2.com/script.js"></script>

Examples that pass the hint

<link rel="stylesheet" href="http://example1.com/style.css">
<script src="https://example2.com/script.js"></script>

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": {
        "no-protocol-relative-urls": "error",
        ...
    },
    "parsers": [...],
    ...
}

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

Further Reading

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.