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-disown-opener

v4.0.22

Published

hint that that checks if external links disown the opener

Downloads

71,748

Readme

External links disown opener (disown-opener)

disown-opener checks if the rel attribute is specified with both the noopener and noreferrer values (or only noopener if all the targeted browsers support it) on a and area elements that have target="_blank" and link to other origins.

Why is this important?

Links that have target="_blank", such as <a href="https://example.com" target="_blank"> constitute:

  • a security problem

    When using target="_blank", the page that was linked to gains access to the original page’s window.opener. This allows it to redirect the original page to whatever it wants, a technique frequently used for malicious attacks on the user. For example, the user could be redirected to a phishing page designed to look like the expected page and then asking for login credentials (see also: tab nabbing).

    By adding rel="noopener" (and noreferrer for older browsers) the window.opener reference won’t be set, removing the ability for the page that was linked to from redirecting the original one.

  • a performance problem

    Most modern browsers are multi-process. However, in most browsers, due to the synchronous cross-window access the DOM allows via window.opener, pages launched via target="_blank" end up in the same process as the origin page, and that can lead to the pages experiencing jank.

    In Chromium based browsers, using rel="noopener" (or rel="noreferrer" for older versions), and thus, preventing the window.opener reference from being set, allows new pages to be opened in their own process.

    Edge is not affected by this.

Notes:

  • Not all browsers support rel="noopener", so to ensure that things work as expected in as many browsers as possible, by default, the hint requires both the noopener and noreferrer values to be specified. However, if all the targeted browsers support noopener, only noopener will be required.

  • The reason why the hint does not check the same origin links by default is because:

    • Security isn’t really a problem here.
    • When it comes to performance, making same origin links open in their own process works against optimizations that some browsers do to keep multiple same origin tabs within the same process (e.g. share the same event loop).

    Check Can the hint be configured? section to see how the hint can be made to also check same origin links.

  • noopener and noreferrer only work for a and area elements.

  • In the future there may be a CSP valueless property that will prevent the window.opener reference from being set.

What does the hint check?

By default, the hint checks if the rel attribute was specified with both the noopener and noreferrer values on a and area elements that have target="_blank" and link to other origins.

If the targeted browsers are specified, based on their support, the hint might only require the noopener value.

Let’s presume the original page is https://example1.com.

Examples that trigger the hint

<a href="http://example1.com/example.html" target="_blank">example</a>
<a href="https://en.example1.com" target="_blank">example</a>
<a href="//example2.com" target="_blank">example</a>
<a href="https://example2.com" target="_blank">example</a>
<img src="example.png" width="10" height="10" usemap="#example">
<map name="example">
    <area shape="rect" coords="0,0,5,5" href="http://example3.com/example.html" target="_blank">
</map>

Examples that pass the hint

<a href="/" target="_blank">example</a>
<a href="example.html" target="_blank">example</a>
<a href="https://example1.com/example.html" target="_blank">example</a>
<a href="http://example1.com/example.html" target="_blank" rel="noopener noreferrer">example</a>
<a href="https://en.example1.com/example.html" target="_blank" rel="noopener noreferrer">example</a>
<a href="//example2.com" target="_blank" rel="noopener noreferrer">example</a>
<a href="https://example2.com" target="_blank" rel="noopener noreferrer">example</a>
<img src="example.png" width="10" height="10" usemap="#example">
<map name="example">
    <area shape="rect" coords="0,0,5,5" href="example.html" target="_blank">
</map>
<img src="example.png" width="10" height="10" usemap="#example">
<map name="example">
    <area shape="rect" coords="0,0,5,5" href="http://example3.com/example.html" target="_blank" rel="noopener noreferrer">
</map>

Can the hint be configured?

includeSameOriginURLs can be used to specify that same origin URLs should also include rel="noopener noreferrer".

In the .hintrc file:

{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "disown-opener": ["error", {
            "includeSameOriginURLs": true
        }],
        ...
    },
    ...
}

Also, note that this hint takes into consideration the targeted browsers, and if all of them support the noopener value, the hint won’t require the noreferrer value.

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": {
        "disown-opener": "error",
        ...
    },
    "parsers": [...],
    ...
}

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

Further Reading