Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html5
communitycreator
web development
htmlelement

What is the HTML <a> referrerpolicy attribute?

Adeola Fadeyi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

Anchor tag

The <a> tag in HTML refers to the anchor tag, which creates a hyperlink. The hyperlink links the webpage to other pages, files, and email addresses.

It is frequently used with the href attribute which could have an absolute or a relative reference as its value.

Other attributes include:

  • download
  • rel
  • target
  • referrerpolicy

These attributes are associated with this tag.

The HTML <a> referrerpolicy attribute

It specifies the reference information, i.e., the referrer information that will be sent to the server when the user clicks on a hyperlink.

In other words, it modifies the algorithm used to populate the referrer header when fetching various resources or performing navigations.

The referer header tells a server where people are coming from when they visit a page. This information can be used for site statistics, caching, and other purposes.

The referer HTTP request header includes the full or partial URL of the page that does the requesting.

The referer contains the URL of the page that owns the link when it is clicked. However, it contains the URL of the page that uses the requested resource when a resource request is made to another site.

The <a> referrerpolicy attribute values

  • no-referrer: It specifies that no reference/referrer information will be sent along with a request. It is made from a request client to any origins.

A web content’s origin is defined by the scheme (protocol, e.g., HTTPS, HTTP), hostname (domain), and the port of the URL used to access it.

Two objects are said to have the same origin only when the scheme, hostname, and port are the same.

  • no-referrer-when-downgrade: This is set by default. It specifies that origins that do not begin with ‘https’, i.e., origins that are not secure, will not get reference headers.
  • origin: It specifies that the referrer should always be the document’s origin, i.e., the host, scheme, and port.
  • origin-when-cross-origin: When making a same-origin request, it sends the origin, path, and query string. In other situations, it just sends the document’s origin.
  • same-origin: This specifies that the referrer will be provided for same-site origins. However, for cross-origin requests, no referrer information will be sent.
  • strict-origin-when-cross-origin: When conducting a same-origin-request, it transmits the origin, path, and query string. When performing a cross-origin request(HTTPS), it only sends the origin when the protocol level of security, i.e., the HTTPS, remains the same. It sends no header to any less secure sites.
  • unsafe-url: As a piece of reference information, it delivers an HTTP request header but no password or username.

Syntax

<a referrerpolicy="
no-referrer|
no-referrer-when-downgrade|
origin|
origin-when-cross-origin|
same-origin|
strict-origin-when-cross-origin|
unsafe-url">
The HTML <a> referrerpolicy attribute

Conclusion

The referrerpolicy attribute specifies the referrer information that will populate the header of an HTTP request. A safe protocol is established during internet sessions depending on the values of this attribute.

RELATED TAGS

html5
communitycreator
web development
htmlelement

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring