A Definition of Rel Noreferrer Link Attribute

Ask Browsers to Not Pass Referrer Information in HTML5

photo/illustration of weblinks

Photographer is my life./ Getty Images 

HTML5 added a lot of new features, and one of those is the new

keyword for the link rel attribute. This keyword tells the browser that it should not collect or store HTTP referer information when the associated link is followed. Note that the attribute is spelled norefe

er, with two rs unlike the HTTP header, which has only one r. (

).

This is a useful keyword for web designers so that you can control what links you pass your site referrer information to. In other words, readers can click on the links, but the destination site will not see that they came from your site.

Using the Noreferrer Keyword

To use the

keyword, you put it in the

attribute inside any

or

element.

As of 2018, the

keyword is supported in all browsers that can handle HTML 5. If your website has a critical need to block this information and your visitors are using out of date browsers, you should look at proxy servers and other solutions to block referrer information on your site.

Test Your Noreferrer Links

If you visit this page it should return a referrer of this web page. You can then add the noreferrer keyword to the link and test your browsers to see if they support it or not.

Here's the HTML to put on your web page to test referrer and noreferrer links:

When you click on the first link, you should get a reply like:

http://webdesign.lifewire.com/gi/o.htm?zi=1/XJ&zTi=1&sdn=webdesign&cdn=compute&tm=7&f=22&su=p284.13.342.ip_p504.6.342.ip_&tt=65&bt=3&bts=91&zu=http%3A//jenn.kyrnin.com/about/showreferer.html

And when you click on the second link you should get a reply like:

You came here directly, or no referer was sent.