W3cubDocs

/Web APIs

HTMLImageElement: referrerPolicy property

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2020⁩.

* Some parts of this feature may have varying levels of support.

The HTMLImageElement.referrerPolicy property reflects the HTML referrerpolicy attribute of the <img> element defining which referrer is sent when fetching the resource.

Value

A string; one of the following:

no-referrer: The Referer header will be omitted entirely. No referrer information is sent along with requests.
no-referrer-when-downgrade: The URL is sent as a referrer when the protocol security level stays the same (e.g.HTTP→HTTP, HTTPS→HTTPS), but isn't sent to a less secure destination (e.g., HTTPS→HTTP).
origin: Only send the origin of the document as the referrer in all cases. The document https://example.com/page.html will send the referrer https://example.com/.
origin-when-cross-origin: Send a full URL when performing a same-origin request, but only send the origin of the document for other cases.
same-origin: A referrer will be sent for same-site origins, but cross-origin requests will contain no referrer information.
strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (e.g., HTTPS→HTTPS), but don't send it to a less secure destination (e.g., HTTPS→HTTP).
strict-origin-when-cross-origin (default): This is the user agent's default behavior if no policy is specified. Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (e.g., HTTPS→HTTPS), and send no header to a less secure destination (e.g., HTTPS→HTTP).
unsafe-url: Send a full URL when performing a same-origin or cross-origin request. This policy will leak origins and paths from TLS-protected resources to insecure origins. Carefully consider the impact of this setting.

Examples

const img = new Image();
img.src = "img/logo.png";
img.referrerPolicy = "origin";

const div = document.getElementById("divAround");
div.appendChild(img); // Fetch the image using the origin as the referrer

Specifications

Specification
HTML> # dom-img-referrerpolicy>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`referrerPolicy`	5251–52	79	50	3938–39	14	5251–52	50	41	14	6.05.0–6.0	5251–52	14
`no-referrer-when-downgrade`	52	79	61–92	39	14	52	61–92	41	14	6.0	52	14
`origin-when-cross-origin`	52	79	61–92	39	14	52	61–92	41	14	6.0	52	14
`unsafe-url`	52	79	61–92	39	14	52	61–92	41	14	6.0	52	14

HTMLImageElement: referrerPolicy property

Value

Examples

Specifications

Browser compatibility

See also