DEV Community

Cover image for CSS Lint for Target _blank, noopener and noreferrer
jeffrainey
jeffrainey

Posted on

2

CSS Lint for Target _blank, noopener and noreferrer

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

Image of Quadratic

AI spreadsheet assistant for easy data analysis

Chat with your data and get insights in seconds with the all-in-one spreadsheet that connects to your data, supports code natively, and has built-in AI.

Try Quadratic free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay