Tip #30: Make your external links secure with the rel attribute

  • — HTML

  • 1 min. read

  • — 2/24/2023

Did you know that your a carry inherit security risks? It's kinda weird but it's true, a naked a tag that doesn't define a rel attribute is considered "unsecure" by the Google Lighthouse audit and will be flagged by crawlers as unsafe.

The reasoning behind why is a little nuanced but it basically boils down to this: when you link (to an external website), that external website has access to your website's document object and can thus mess around with the content and scripts that your site is using without your users knowing what's going on.

To fix this, we're going to use an attribute available on anchor tags called rel (short for "relationship"). There are a lot of valid values that you can pass into rel that helps to describe the relationship between your website and the destination the a tag is linking to.

To make your external links secure, you want to add the following to rel:

<a href="..." rel="noopener noreferrer nofollow" target="_blank">

Each of these do a slighly different things:

  • noopener creates a new browsing context
  • noreferrer removes the Referer header
  • nofollow indicates that your website does not endorse or control the contents of the desintation website

That's all you need to add! The rest is sort of handled for you by the browser.

As a bonus tip, you should also add target="_blank" to your links so that external websites open in a new tab:

<a href="..." rel="noopener noreferrer nofollow" target="_blank">
Shaun Chander

hey (again), I'm shaun

I'm posting 3 tips on creative web development daily. Subscribe below to to get tips delivered straight into your inbox!