@hint/hint-disown-opener

# 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][browser configuration] 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][security problem] When using `target="_blank"`, the page that was linked to gains access to the original page’s [`window.opener`][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][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][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"`][noreferrer chromium] 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][noopener 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][browser configuration] 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?`](#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][html5sec]. * In the future there may be a [CSP valueless property][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](#can-the-hint-be-configured), 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 ```html <a href="http://example1.com/example.html" target="_blank">example</a> ``` ```html <a href="https://en.example1.com" target="_blank">example</a> ``` ```html <a href="//example2.com" target="_blank">example</a> ``` ```html <a href="https://example2.com" target="_blank">example</a> ``` ```html <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 ```html <a href="/" target="_blank">example</a> ``` ```html <a href="example.html" target="_blank">example</a> ``` ```html <a href="https://example1.com/example.html" target="_blank">example</a> ``` ```html <a href="http://example1.com/example.html" target="_blank" rel="noopener noreferrer">example</a> ``` ```html <a href="https://en.example1.com/example.html" target="_blank" rel="noopener noreferrer">example</a> ``` ```html <a href="//example2.com" target="_blank" rel="noopener noreferrer">example</a> ``` ```html <a href="https://example2.com" target="_blank" rel="noopener noreferrer">example</a> ``` ```html <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> ``` ```html <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`][hintrc] file: ```json { "connector": {...}, "formatters": [...], "hints": { "disown-opener": ["error", { "includeSameOriginURLs": true }], ... }, ... } ``` Also, note that this hint takes into consideration the [targeted browsers][browser configuration], 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: ```bash npm install hint --save-dev ``` To use it, activate it via the [`.hintrc`][hintrc] configuration file: ```json { "connector": {...}, "formatters": [...], "hints": { "disown-opener": "error", ... }, "parsers": [...], ... } ``` **Note**: The recommended way of running webhint is as a `devDependency` of your project. ## Further Reading * [The security benefits of `rel="noopener"`][security problem] * [The performance benefits of `rel="noopener"`][performance problem] * [Bypassing `window.opener` protection of `rel="noreferrer"`][html5sec] * [Link type `"noopener"`](https://html.spec.whatwg.org/#link-type-noopener) * [Link type `"noreferrer"`](https://html.spec.whatwg.org/#link-type-noreferrer)  [csp valueless property]: https://github.com/w3c/webappsec/issues/139 [html5sec]: https://html5sec.org/#143 [noopener support]: http://caniuse.com/#feat=rel-noopener [noreferrer chromium]: https://blog.chromium.org/2009/12/links-that-open-in-new-processes.html [performance problem]: https://jakearchibald.com/2016/performance-benefits-of-rel-noopener/ [security problem]: https://mathiasbynens.github.io/rel-noopener/ [hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/ [tab nabbing]: http://www.azarask.in/blog/post/a-new-type-of-phishing-attack/ [window.opener]: https://developer.mozilla.org/en-US/docs/Web/API/Window/opener [browser configuration]: https://webhint.io/docs/user-guide/configuring-webhint/browser-context/