Login With Github

HTTP Referer Tutorial In 10 Minutes

In the header of the HTTP request, the Referer is a common field that provides information about the source of the request.

Many developers may know the Referer field, but can't tell the exact details.

1. What is Referer?

In real life, when you buy a service or join a member, you're often asked for the information: "Where did you know us?"

This is called a referrer. The information often is useful for companies.

And in general, you won't visit a webpage for no reason, unless someone recommends it. Then the server also wants to know who is your referrer?

The HTTP protocol designates a Referer field in the header of the request to give the URL of the referrer page.

This field is optional, so the client can decide for itself whether to add the field when sending the request.

Interestingly, the spelling of the field is wrong: the correct spelling of Referer is Referrer. But when writing standards, I don't know why no one found that the letter r was missing. Then after the standard is finalized, the fields of all the header information have to be spelled as Referer.

2. When to use Referer?

When the browser requests resources from the server, the logic of the Referer field is that: it does not send the Referer field if the user enters the URL in the address bar or selects the browser bookmark.

The Referer field will be sent mainly in the following three scenarios:

  • (1) The user clicks on the link on the web page.
  • (2) The user sends the form.
  • (3)The web page loads static resources, such as images, scripts, and styles.
<!-- Load an image -->

<img src="foo.jpg">

<!-- Load a script -->

<script src="foo.js"></script>

<!-- Load a style -->

<link href="foo.css" rel="stylesheet">

In the above scenarios, the browser will take the current URL as the Referer field and send it in the header of the HTTP request.

You can check the referral source for the current page through the document.referrer property provided by the JavaScript engine of the browser. Note that the spelling is correct here.

3. The role of Referer

The Referer field actually tells the server where the user was before accessing the current resource. This can often be used for user tracking.

Typically, some websites do not allow images to be linked externally: only their own websites can display the images, and it will report an error if the images are loaded on the external websites. And the implementation is based on the Referer field: pass the filed if the URL is its own website.

Due to privacy concerns, it is often not appropriate to send the Referer field.

Here are two examples that are not suitable for exposing URLs. One is the function URL: you can access some URLs and achieve password resetting, mail unsubscribing and other functions directly without logging in. And the other example is the intranet URL: The address in the internal network, which you do not want to be known by the external users. The Referer field is likely to expose these URLs.

In addition, there is a special case where you need to customize the Referer field. For example, when a user mentions a URL in a conversation on the SNS, he may expose the domain name of the SNS to let others know that he contributed the traffic but doesn't want to expose his original URL.

4. The rel property

The browser provides a set of means to allow changes to the default Referer behavior.

Users can change the global settings of the browser or install a browser extension to achieve the purpose. And I won't go into detail here.

While for developers, using the rel="noreferrer" property is the easiest way. The three tags of <a>, <area>, and <form> can take use of the property, and once the property is used, the element will not send the Referer field.

<a href="..." rel="noreferrer" target="_blank">xxx</a>

The HTTP request generated by clicking the above link does not have the Referer field.

Note that the spelling of rel="noreferrer" is correct.

5. The value of Referrer Policy

The rel property can only be used to customize the Referer behavior of a single element, and the options are relatively less: can only be sent or not sent. So W3C has developed the Referrer Policy which is a more powerful.

You can set 8 values through Referrer Policy:

(1) no-referrer

The Referer field is not sent.

(2) no-referrer-when-downgrade

If an HTTPS URL is linked to an HTTP URL, then the Referer field won't be sent, while it will be sent under other conditions (including the situations that HTTP URLs are linked to HTTP URLs). This is the default behavior of the browser.

(3) same-origin

The field will be sent if the link comes from the same-origin URL (protocol + domain name + port are all the same), otherwise it will not be sent. Note that the link from https://foo.com to http://foo.com is also cross-domain.

(4) origin

The Referer field sends only source information (protocol + domain name + port), no matter whether it is cross-domain or not.

(5) strict-origin

If the link is from an HTTPS URL to an HTTP URL, the Referer field is not sent, otherwise only the source information is sent.

(6) origin-when-cross-origin

When the source is the same, the complete Referer field will be sent, and the source information will be sent when it is cross-domain.


When the source is the same, the complete Referer field will be sent; and if an HTTPS URL is linked to an HTTP URL, the Referer field won't be sent, otherwise the source information will be sent.

(8) unsafe-url

The Referer field contains the source information, path, and query string, and does not contain the anchor, username, and password.

6. The usage of Referrer Policy

There are several ways to use the Referrer Policy.

(1) HTTP header information

When the server sends a web page, it tells the browser via the Referrer-Policy of the HTTP header information.

Referrer-Policy: origin

(2) <meta> tag

You can also use the <meta> tag to set it in the header of the page.

<meta name="referrer" content="origin">

(3) referrerpolicy property

The <a>, <area>, <img>, <iframe>, and <link> tags can be used to set the referrerpolicy property.

<a href="..." referrerpolicy="origin" target="_blank">xxx</a>

7. Exit the page and redirect

There is also an older trick, which is very effective and can be used to hide the original URL. Now Google and Facebook use this method.

It won't jump directly, but through redirecting a URL when linking, which is as follows:

<a  href="/exit.php?url=http%3A%2F%2Fexample.com">Example.com</a>

In the above URL, it first jumps to /exit.php and then to the destination URL. So, the Referer field will not contain the original URL.

0 Comment