1️⃣ site-one (Referrer demo)

ℹ️About this demo

🔷What this demo does:

Infers your browser's default referrer policy (⚠️ accurate in Chrome, not in all other browsers).
Demoes the policies no-referrer-when-downgrade and strict-origin-when-cross-origin.

🔷How to use it:

Do nothing and observe the behaviour when your browser's default referrer policy is used.
Then select another policy with the buttons below and observe the behaviour.
Chrome and Edge have changed their default policy to `no-referrer-when-downgrade`.

Your browser's default referrer policy (⚠️ accurate in Chrome, not in all other browsers)

Detected default referrer policy:

...

Chrome has changed its default referrer-policy to no-referrer-when-downgrade.

Pick a document-level referrer policy

Impact of the document-level policy: let's fetch stuff

Request to...	What was sent in the Referer header?
another HTTPS origin cross-origin no downgrade	...
the same origin same-origin	...
an HTTP origin cross-origin with downgrade	[BLOCKED because mixed content]

Let's test element-level referrerpolicy

iframe (cross-origin)

Navigation requests (cross-origin)

No referrerpolicy: `a` link

referrerpolicy = no-referrer-when-downgrade: `a` link

referrerpolicy = strict-origin-when-cross-origin: `a` link

Image requests (cross-origin)

No referrerpolicy:

referrerpolicy = no-referrer-when-downgrade:

referrerpolicy = strict-origin-when-cross-origin

Script requests

Let's test fetch-level referrerPolicy

Note: A third-party script (`3pscript.js`) makes fetch requests with specific policies. You can also open the developer view in your browser (DevTools or other) > Open the Network Panel > Click on the "fetchtest" requests > See the "referer" field under "Request Headers".