Safe JS, why links with target blank are dangerous, why write rel noopener

17.06.18 IT / JavaScript 9483

Clicking on links in browsers, email programs, and elsewhere may be unsafe. Many people are wary of links, and some users completely refuse to follow the links, thinking that there is certainly a virus. Here you need to maintain a balance, not be paranoid and at the same time not click on some links.

What are the dangers? Not so long ago, it became known about one vulnerability in browsers. Its essence lies in the fact that when clicked on the link , the page that the user visited can access the previous page using JavaScript, the window.opener object . This is most often dangerous when a new page is opened in a new tab, that is, if the user has followed a link with a target = "_blank" attribute .

What can happen after such a transition? On the site to which you are redirected, JavaScript code may be placed, which will turn to the open tab and change some data there, for example, change the page. The user, returning to such a tab, simply may not notice the substitution and continue to work with this page. For example, a page in the mail service was opened, the user will be prompted to enter a password to confirm any action - of course, this password will be immediately transmitted from the fake page to the attacker.

As you can see, the vulnerability is quite serious. The question arises, how to fix it ? Manufacturers of all modern browsers are already promptly releasing updates for all their products that no longer have this vulnerability. But what to do, because not all users update browsers immediately, and some may not update at all.

Already now, without waiting for updates, you can fix the vulnerability yourself. For this, it is important for each link, especially with the attribute target = "_blank" , to prescribe the rel attribute with the value noopener: rel = "noopener". What does it do? This attribute prohibits the target page from accessing the original one, so there will be no access and therefore nothing can be changed. That is why now you can often see links not only with nofollow, but also with the added noopener. Just now, the question was answered why write rel = "noopener" .

What if you need to combine two values ​​in one attribute? Just list them separated by a space, like this: rel = "nofollow noopener" . But that's not all, not all browsers understand noopener, so it's better to add noreferrer as well. As a result, a link with no indexing and protection against vulnerabilities for all browsers will look like this: rel = "nofollow noopener noreferrer" .

There is one more solution, global, which will allow protecting all links on the page without prescribing noopener. To do this, it is enough to set the window.opener object to zero in the JS file of your site, which is connected to all pages of the site until the page is fully loaded, as follows: write window.opener = null .

Not only does the noopener value improve security, it also improves performance. To put it simply, complex JavaScript is processed on one domain, but the load goes to the page from which the transition occurred. In the case of using rel = "noopener" , access to window.opener is prevented and access to cross-streams will not be possible either. This improves productivity. And the Google Chrome browser is optimized for this feature even more, it opens similar pages in its own process, so its performance is higher than other browsers.

Thus, you need to take care of the security of your projects now, apply the measures described in this article.