Referrer policy configuration
The Referrer-Policy
header provides fine-grained control over how and when browsers transmit the Referer
header.
Problem
When a user navigates to a site via a hyperlink, or when a website loads an external resource, browsers inform the destination site of the origin of the requests via the HTTP Referer
(sic) header. Although this can be useful for a variety of purposes, it can also pose a risk to the privacy of users.
For example, if a page at https://example.com/page.html
contains the following HTML:
<img src="https://not.example.com/image.jpg" />
The browser will send a request like this:
GET /image.jpg HTTP/1.1
Host: not.example.com
Referer: https://example.com/page.html
not.example.com
now knows where the request came from. Even this small amount of information poses a privacy risk.
Other cases could result in the browser transmitting internal-use-only URLs, which it may not have intended to reveal, or URL parameters containing sensitive information.
Solution
Use Referrer-Policy
to limit the information available in the Referer
header or to stop the Referer
header from being sent altogether.
The most useful directives available for Referrer-Policy
are listed below, in decreasing order of strictness. Choose the strictest one that still allows your site to function properly:
no-referrer
: Never send theReferer
header.same-origin
: Send theReferrer
header, but only on same-origin requests.strict-origin
: Send theReferrer
header to all origins, but only include the URL without the path (e.g.,https://example.com/
).strict-origin-when-cross-origin
: Send the fullReferrer
header on same-origin requests and only the URL without the path on cross-origin requests. This is the default value.
While there are other Referrer-Policy
directives, they do not protect user privacy or limit exposure as effectively as the options listed above. In recent versions of Firefox and Safari, "unsafe" directives (no-referrer-when-downgrade
, origin-when-cross-origin
, and unsafe-url
) behave like strict-origin-when-cross-origin
.
If you are unable to use the Referrer-Policy
header, you can alternatively set page-wide policies using a <meta http-equiv="Referrer-Policy" content="…">
element. This should be the first <meta>
element that appears in the document <head>
. You can also set policies on individual elements using the referrerpolicy
HTML attribute and on individual fetch requests using the Request.referrerPolicy
property.
Examples
On example.com
, send the Referer
header only when loading or linking to other example.com
resources:
Referrer-Policy: same-origin
Send the shortened referrer on cross-origin requests and the full referrer on same-origin requests:
Referrer-Policy: strict-origin-when-cross-origin
Disable referrers for browsers that don't support strict-origin-when-cross-origin
; use strict-origin-when-cross-origin
for browsers that do:
Referrer-Policy: no-referrer, strict-origin-when-cross-origin
Do the same, but with a <meta>
element:
<meta
http-equiv="Referrer-Policy"
content="no-referrer, strict-origin-when-cross-origin" />
The referrerpolicy
attribute doesn't support multiple values, so only set no-referrer
:
<a href="https://example.org/" referrerpolicy="no-referrer"> My link </a>