How To Set Referrer Policy

March 28, 2022

Equally web developers, we should care about the privacy of our users. This article explains what the Referer header is and what information information technology exposes. We besides learn to employ the Referrer-Policy to control how many details the referer header should include. We can increase privacy and deal with some potential security issues past doing all of the higher up.

The Referer header

When we visit a website, it tin contain a clickable link that redirects us to a dissimilar folio. When we click on it, the browser might transport a Referer request header to the server of the page we request. It contains the website'south accost that includes the link we've used.

The word referer is a misspeling of the wordreferrer.

To discover this, let'south visit the wanago_io page on Twitter. It contains a bunch of links that lead to wanago.io.

When nosotros click on the above, we get redirected to https://t.co/QtA0ttrRn3. The https//t.co address is a domain Twitter uses for shortening links. Allow's investigate its response:

<head>

</noscript>

<title> https://wanago.io/2022/03/21/iframe-clickjacking-x-frame-options-content-security-policy/ </title>

</head>

<body>

</trunk>

To a higher place, we can see that when nosotros open https://t.co/QtA0ttrRn3, it immediately redirects us to wanago.io.

Thanks to the browser sending the referer : https : //t.co/ header when requesting wanago.io, I know that the person that visited the blog came from Twitter.

Security concerns around referer

Unfortunately, the Referer header carries some privacy and security risks. Information technology is fine every bit long as the Referer information is used for logging or analytics. Withal, the Referer mechanism tin can be driveling to track or steal sensitive information.

Imagine having the functionality of resetting a password. When the users request a new countersign, they get an electronic mail with a link such every bit this i:

https://your-website/reset-countersign?token=secret_token

When the users visit the to a higher place URL, they might click on a link earlier finalizing setting the new password. When that happens, some other site might get the total URL along with the secret token that we use to authorize changing the password.

Dealing with the security bug using Referrer-Policy

Thankfully, there are ways to control what information the browser includes in the referer header. I of them is using the Referrer-Policy header.

Fifty-fifty though the Referer header contains the misspelled give-and-takereferrer, the Referrer-Policy is spelled correctly.

There are quite a few values to choose from when setting up the Referrer-Policy.

strict-origin-when-cross-origin

The strict - origin - when - cross - origin value is a default referrer policy. Information technology ways that a browser is free to transport the origin, path, and the query cord in the Referer header when making a same-origin asking:

the user visits https://wanago.io/courses/api-with-nestjs/
clicks on a link leading to https://wanago.io/2020/05/11/nestjs-api-controllers-routing-module/
the request contains the referer : https : //wanago.io/courses/api-with-nestjs/ .

An important affair to realize is that the browser omits some parts of the URL when sending the Referer header, even in the higher up case. A good instance is the fragment, which is the role of the URL later on the # sign. The to a higher place is yet another consequence of using hash-based routing. Check out Comparison the HashRouter and the BrowserRouter in React applications for more.

If yous want to know more well-nigh the parts of the URL that the browser leaves out when sending the Referer header, check out the documentation.

For the cross-origin requests, the browser sends only the page's origin. The above means that the asking would contain only the referer : https : //wanago.io/ value.

An of import caveat is that the above would merely happen if the security protocol stays the same. For instance, if the user navigates from an HTTPS page to an HTTP website, the browser does not send the Referer header.

Nosotros should avoid including sensitive information in the URL. However, if nosotros have to exercise that, the strict - origin - when - cantankerous - origin setting ensures that the user won't leak it outside of our website through the Referer header.

no-referrer

If nosotros prepare the Referrer-Policy to no - referrer , the browser does non send the Referer header.

The helmet library sets the no - referer value for the Referrer-Policy by default. If y'all want to know more than about helmet, cheque out Increasing security of Express applications with the Helmet middleware.

unsafe-url

When we set the Referrer-Policy to unsafe - url , the browser sends the origin, path, and the query string regardless of the origin or the security protocol. Unfortunately, using this arroyo might cause a leak of private information, such as tokens.

no-referrer-when-downgrade

With the no - referrer - when - downgrade value, we send the origin, path, and the query string in the Referer header if the security protocol stays the same or improves. For example, if an HTTPS website redirects the user to an HTTP page, the browser doesn't send the Referer header.

origin

If we set the Referrer-Policy to origin , the browser sends simply the origin in the Referer header.

same-origin

When using the same - origin pick, the browser sends the origin, path, and query string but for the aforementioned-origin requests.

strict-origin

With the strict - origin setting, the browser sends the origin through the Referer header when the security level stays the same.

origin-when-cross-origin

By setting the origin - when - cantankerous - origin value, the browser sends the origin, path, and the query cord through the Referer header for same-origin requests. On the other hand, the browser sends only the origin for cross-origin requests and when downgrading the security protocol.

Which option to choose?

After reading all of the above, we can conclude that the default strict - origin - when - cross - origin setting deals with most of the security concerns. However, if we want to increase the privacy of our users, we can consider setting the Referrer-Policy to no - referrer .

Setting the Referrer-Policy

If we serve our content using Node.js and Express, setting the Referrer-Policy is very straightforward.

app . use ( ( asking , response , next ) = > {

response . set up ( 'Referrer-Policy' , 'no-referrer' ) ;

next ( ) ;

} )

As well doing it manually, like in the above snippet, we can also apply the helmet library. It tin can ready the Referrer-Policy header for united states of america, besides other headers. If you want to know more, cheque out the Increasing security of Express applications with the Helmet middleware.

Nosotros can also modify the Referrer-Policy through HTML. One way to do that is using the < meta > element.

<head>

<!–– ... ––>

</head>

Setting the policy directly on elements

Besides using < meta > , we can likewise utilize the referrerpolicy attribute with < a > , <script> , < img > , < area > , and < iframe > tags.

< a href = "https://wanago.io" referrerpolicy = "no-referrer" >

As an alternative, we tin also use link = "noreferrer" on < a > , < link > , and < expanse > elements.

< a href = "https://wanago.io" rel = "noreferrer" >

Summary

In this article, nosotros've gone through the idea behind the Referer header. We've also learned what issues it might cause and how to deal with them. To do that, we've used the Referrer-Policy header and learned how to set it with Node.js and Express. The default referrer policy value would prevent the nearly significant problems, such as leaking sensitive data. Fifty-fifty though that'due south the case, nosotros can still increase our users' privacy by turning off the Referer header. We also need to watch out and not set the Referrer-Policy to a value that might hurt our users.

Source: https://wanago.io/2022/03/28/referer-header-referrer-policy/