Fetch Referrer Policy Sample

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

Background

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.
  'no-referrer',

  // Referer will not be set when navigating from HTTPS to HTTP.
  'no-referrer-when-downgrade',

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

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

  // Referer will be set to just the origin except when navigating from HTTPS to HTTP,
  // in which case no Referer is sent.
  'strict-origin',

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

  // Full Referer for same-origin requests, and bare origin for cross-origin requests
  // except when navigating from HTTPS to HTTP, in which case no Referer is sent.
  'strict-origin-when-cross-origin',

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

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