Fetch Referrer Policy Sample

Available in Chrome 52+ | View on GitHub | Browse Samples


This sample shows how requests made via the Fetch API can use a specific referrer policy, which affects the value of the Referer HTTP header that's sent to remote servers.

Live Output

Multiple fetch() requests are made for a local resource, each with a different referrerPolicy set. You can see the requests and the Referer header associated with each in Chrome DevTools.

JavaScript Snippet

var policies = [
  // Referer will never be set.

  // Referer will not be set when navigating from HTTPS to HTTP.

  // Referer will be set to just the origin, omitting the URL's path and search.

  // Full Referer for same-origin requests, and bare origin for cross-origin requests.

  // Full Referer for all requests, whether same- or cross-origin.
var url = 'users.json';

policies.forEach(policy => {
  ChromeSamples.log(`Fetching ${url}...`);
  fetch(url, {referrerPolicy: policy});