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 browsersbrowser configuration support it) on
a
and area
elements that have target="_blank"
and link to other
origins.Why is this important?
Links that havetarget="_blank"
, such as
<a href="https://example.com" target="_blank">
constitute: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 nabbingtab 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.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 supportnoopener support
rel="noopener"
,
noopener
and noreferrer
values to be specified. However,
if all the targeted browsersbrowser configuration
support noopener
, only noopener
will be required.- The reason why the hint does not check the same origin links by
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.elementshtml5sec.
- In the future there may be a CSP valueless propertycsp valueless
window.opener
reference
from being set.What does the hint check?
By default, the hint checks if therel
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
hintrc file:{
"connector": {...},
"formatters": [...],
"hints": {
"disown-opener": ["error", {
"includeSameOriginURLs": true
}],
...
},
...
}
Also, note that this hint takes into consideration the targeted browsersbrowser 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:npm install hint --save-dev
To use it, activate it via the
.hintrc
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
- The security benefits of
rel="noopener"
security problem - The performance benefits of
rel="noopener"
performance problem - Bypassing
window.opener
protection ofrel="noreferrer"
html5sec - Link type
"noopener"
- Link type
"noreferrer"