Web Security: add rel=noopener to external links

Don't touch my tabs! (rel=noopener) is a Firefox add-on that adds rel="noopener" to external links on sites open in Firefox automatically. Noopener_by_default is a userscript that does the same for links.

Did you know that sites that you load by clicking on links may manipulate the page the link was posted on?

Imagine two HTML pages: index.html the first page with a link pointing to omg.html. When you click on the omg.html page on index.html, that page gets open in the browser in a new tab if the target blank attribute is added to the link (the latter is a requirement for this to work).

The page omg.html may use the window.opener property to manipulate content on index.html. Since this happens in the background, it often happens without the user noticing a thing about it.

In worst case, this may be used to display a fake login page on the source web page to phish user data.

The link attribute rel="noopener" will set the window.opener property to null, so that target sites won't be able to manipulate the originating page.

You are probably wondering why browsers are not simply adding rel="noopener" to all links that open in new tabs and be done with it. Browser makers state that this will break certain sites and services on the Internet.

You can test it for yourself on this web page. Click on the first or second link on the page to get started. It opens a new page in a new tab. When you go back afterwards to the originating page, you will see that it has been modified by the target page.

Solutions

There are a couple of solutions that prevent this type of manipulation:

1. Middle-click on links to open them instead of left-clicking on them.
2. Install the Firefox add-on Don't touch my tabs! (rel=noopener). It adds the rel="noopener" attribute to all external links, but not same-origin links. Please note that this works from Firefox 52 on only, as this will be the version of Firefox that supports rel="noopener).
3. The userscript noopener_by_default adds rel="noopener" to any link that uses target="_blank".

The rel="noopener" attribute works only if the browser supports it. Chrome, Opera, Vivaldi and Safari do already, Firefox will with the release of Firefox 52 on March 7, 2017.

Middle-clicking on links works regardless of that.

Side note: We add rel="noopener" to links here on Ghacks so that you are safe from this when clicking on links here on the site.