<meta name="referrer" content="no-referrer">
<a href="http://example.com" rel="noreferrer">
What is the difference between above 2 statements?
<meta name="referrer" content="no-referrer"> can be included in the head of webpage to simulate a Referrer-Policy HTTP header sent from the server
The Referrer-Policy HTTP header controls how much referrer information (sent via the Referer header) should be included with requests.
no-referrer
The Referer header will be omitted entirely. No referrer information is sent along with requests.
NOTE the dash in the value
<a href="..." rel="noreferrer">
is an anchor element (i.e., a hyperlink) that links to a web page and the rel attribute specifies the relationship between the current document and the target document. The rel attribute of "noreferrer" instructs the browser not to send the referrer information to the target website when the user clicks on the link. This functionality is similar to the no-referrer value in the meta tag, but only for the link the rel attribute is set rather than all links in the document.
NOTE the lack of dash in the value noreferrer
The noreferrer keyword for the rel attribute of the
<a>,<area>, and<form>elements instructs the browser, when navigating to the target resource, to omit the Referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.
Link types:
noreferrer Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the Referer: HTTP header. (In Firefox, before Firefox 37, this worked only in links found in pages. Links clicked in the UI, like "Open in a new tab" via the contextual menu, ignored this).