Target _blank, noopener, noreferrer and nofollow
If you have been developing websites for some time, you may know that adding a target of _blank to a link can have some unintended consequences. I sometimes find myself wondering which of these to add and and having to look them up.
Summary:
Use rel=”noreferrer noopener” at minimum. There is also a nofollow that you may want to use but this has less to do with security and more about passing “link juice” along to the site that you are linking to. When you do not use nofollow you are basically vouching for the site that you link to and this can also affect your SEO. So, just make sure to use nofollow when linking to sites that may not be as reputable.
Why are we doing this?
The threat associated is called Reverse Tabnabbing. The issue is the webpage that we are linking our existing page to gains a partial access to the linking page, or in other words, the target page or url gains a partial access to our parent page from where the user is redirected to a new url.
This happens through the window.opener object of Javascript. The attacker can change the window.opener.location to some malicious page and also the parent page. In case the parent page has the same look and feel of the user intended page, he might end up sharing credentials or secure information assuming that the webpage is secure.
Hackernoon – https://hackernoon.com/unsafe-use-of-target_blank-39413ycf
Warning Myself and Others When We Forget…
WordPress does a pretty good job with adding these in the editor and I can add a linting rule for my own code. But, sometimes there are places where code or content can be added by site admins or editors in places where this may not get caught. To help find these, I am playing with the idea of this CSS linting rule.
See the Pen Target Blank CSS Lint by Jeff Rainey (@rainey) on CodePen.
