Mark out links securely with “noopener”

In the new pagespeed tool Google Lighthouse there is a hitherto unknown reference to a new attribute that seems to be important for Google. The tool advises to add the attribute rel=”noopener” to external links. Google classifies this in Lighthouse under the category “Best Practices”, because according to their information page there is a security problem, which can also affect the loading time if the attribute is not set.

In order for users to stay longer on a potentially important page, you usually want the visitor to not leave the existing page after clicking on a link.

A remedy for this is the attribute target=”_blank” in the HTML anchor tag. This causes a new tab to open in the browser as soon as a link is clicked.

So far so good. What many people don’t know, however, is that the new open page is allowed to execute JavaScript on the source page. This is where the security hole comes into play.

After clicking the above button, the HTML page rel-noopener.html is opened. This uses the JavaScript function window.opener.document to execute a script on the source page.

If everything worked correctly, this page should now have a red background.

Changing the background color on a source page is a harmless example. Possible scenarios that could also be executed include a redirect to a phishing page, a conversion of all links to another target page and much more…

It is important to know that this function will be executed even if the target page is on a different domain.

Now please reload the page once so that everything is back to normal. Reload Page

In this example we have added the attribute rel=”noopener” to this page (source page). It stops JavaScript from running on the source page.

As can be seen, the source page was not changed this time – although the same HTML file was called.

All external links that open the page in a new tab when clicked should have the rel=”noopener” attribute added.