DEV Community

loading...
Cover image for CSS Lint for Target _blank, noopener and noreferrer

CSS Lint for Target _blank, noopener and noreferrer

jeffrainey profile image jeffrainey ・2 min read

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.

Read More About CSS Lint for _blank targets

Discussion (0)

pic
Editor guide