In this section, we will learn what the referrerpolicy attribute is and how to use it.
What is referrerpolicy Attribute in HTML <link> Tag?
With the referrerpolicy attribute, we can declare if the request that is sent from the current document to get the document specified in the `href` attribute should also declare where this request is coming from. If yes, under what condition.
This means if, for example, the page A is sending a request to a website with the address “B”, in that request, should it say the request is coming from the website A or not?
This attribute is basically in charge of an HTTP header called “referer” (sic).
Depending on the value we set for the referrerpolicy attribute, the address of the current document might be set as the value of the referer header.
HTML referrerpolicy Attribute in <link> Tag Syntax:
<link href = “target document” referrerpolicy = “value”>
<link> Tag referrerpolicy Attribute Values
Here’s the list of values we can set for this attribute:
Name |
Description |
no-referrer |
No referrer information will be sent along with a request |
no-referer-when-downgrage |
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 <link> tag
See the Pen using referrerpolicy attribute in HTML <link> tag by Omid Dehghan (@odehghan) on CodePen.