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

No protocol-relative URLs

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