In this section, we will learn what referrerpolicy attribute is and how it works.

What is referrerpolicy Attribute in HTML <a> Tag?

When you click on a link, browsers send a request to the address specified in that link to get the target document and display it to you. Along with this request, browsers send the URL from which the request is executed in a header, named `referrer` (sic).

For example, let’s say there’s a page with the URL www.example.com/reset-password/usernam-and-password-reset ; now on this page there’s footer link to a social media or any other websites and we click on that link. So here browsers will send a request to that website to get the document but along with this request, they also send a header, called referer (sic) with the value of “www.example.com/reset-password/usernam-and-password-reset” for this particular example, which is the page from which the request is executed.

For security reasons, this is a bad idea to let the target website (especially if it’s a third-party server) to get the address from which the request is sent from.

For example, in your URL there might be sensitive information and by allowing a third party to see this information, you’re potentially putting yourself in the danger of stealing the information.

Now back to the referrerpolicy attribute: this attribute allows you to decide if your URL should be sent to the target link or not.

Based on the value that we set for referrerpolicy attribute, we can hide partially or the entire URL from the target website (Server).

HTML referrerpolicy Attribute in <a> Tag Syntax:

This is how we can use the referrerpolicy attribute:

<a referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url">

<a> Tag referrerpolicy Attribute Values

This is the list of values that you can put as the value of referrerpolicy attribute:

Name	Description
no-referrer	No referrer information will be sent along with a request
no-referer-when-downgrade	Default. The referrer header will not be sent to origins without HTTPS
origin	Send only scheme, host, and port to the request client
origin-when-cross-origin	For cross-origin requests (when website A wants to send a request to website B): Send only scheme, host, and port. For same-origin requests (Website A requesting a page from the same website A): Also include the path
unsafe-url	Send origin, path and query string (but not fragment, password, or username). This value is unsafe and it’s better not to use it.

Example: using referrerpolicy attribute in HTML <a> tag

See the Pen using referrerpolicy attribute in HTML <a> tag by Omid Dehghan (@odchan1) on CodePen.