The HTML referrerpolicy attribute
Quick answer
The HTML referrerpolicy attribute controls how much referrer information is sent when fetching the resource or following the link. It is used on the <a>, <area>, <img>, <iframe>, <link> and <script> elements.
Overview
The referrerpolicy attribute controls how much referrer information is sent when fetching the resource or following the link. It applies to the <a>, <area>, <img>, <iframe>, <link> and <script> elements.
Use it to limit how much of your URL is leaked to third parties — no-referrer or strict-origin-when-cross-origin are common privacy-preserving choices.
Syntax
<img src="pic.jpg" referrerpolicy="no-referrer">Values
| Value |
|---|
| no-referrer | no-referrer-when-downgrade | origin | origin-when-cross-origin | same-origin | strict-origin | strict-origin-when-cross-origin (default) | unsafe-url |
Best practices
- Write descriptive link text — avoid "click here", which is meaningless out of context.
- When using
target="_blank", modern browsers addrel="noopener"for you, but set it explicitly for older ones. - Use rel values like
nofollow,noreferrerandcanonicaldeliberately for SEO and privacy. - Make sure links are distinguishable by more than color alone.
Frequently asked questions
What does the referrerpolicy attribute do?
Controls the Referer header sent for the request.
How do I open a link in a new tab?
Add
target="_blank". Pair it with rel="noopener" for security in older browsers.What does the rel attribute do on a link?
It states the relationship to the linked resource — for example
nofollow, noreferrer, stylesheet or canonical.