CodeBlanks Logo Icon CodeBlanks
Login Register

Referrer policy

HTML course · Expert · Lesson 27/39

Control referrer with <meta name="referrer">.

What is a referrer?

When a page navigates to another, the browser sends a Referer header telling the destination where the user came from. This is called the referrer. Sometimes this info must be limited for privacy; for example, a user id may live in the URL.

In HTML, the meta name="referrer" tag tells the browser how much info to send. It sets a policy for the whole page.

meta name=referrer values

Common values for meta name="referrer":

  • no-referrer: send no info
  • same-origin: send only on same origin
  • strict-origin: send origin only; send nothing on HTTPS downgrade
  • strict-origin-when-cross-origin: full URL on same origin, origin only on cross-origin

The last value is the modern browser default as of 2026 and keeps a good balance.

Exercise Add the referrer policy meta tag

Take the previous lesson's page. Inside <head>, after the CSP meta, add a referrer policy meta tag:

  • name="referrer"
  • content="strict-origin-when-cross-origin"
Show example solution 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'">
    <meta name="referrer" content="strict-origin-when-cross-origin">
    <title>Secure Bank - Sign in</title>
  </head>
  <body>
    <h1>Secure Bank</h1>
    <p>Please sign in with your user code.</p>
    <p><a href="https://help.securebank.example/signing-in" target="_blank" rel="noopener noreferrer">Help center</a></p>
  </body>
</html>

Test yourself

  1. Which is the modern browser referrer default in 2026?

    • no-referrer
    • same-origin
    • unsafe-url
    • strict-origin-when-cross-origin
    Show answer

    strict-origin-when-cross-origin — Correct. This value sends the full URL on same origin and only the origin on cross-origin.

  2. Complete the default referrer value

    <meta name="referrer" content="____">
    Show answer 
    <meta name="referrer" content="strict-origin-when-cross-origin">

  3. Match each referrer value to its meaning

    no-referrer
    send no info
    same-origin
    same origin only
    strict-origin
    origin only
    unsafe-url
    full URL (risky)

All lessons in Expert

1 Advanced accessibility

  1. WCAG principles
  2. Keyboard navigation
  3. Live regions
  4. Dialog and modal
  5. Heading outline
  6. Summary - Accessible widget

2 Advanced ARIA patterns

  1. ARIA roles
  2. States and properties
  3. Grid and tree
  4. Tabs and accordion
  5. Menu and menubar
  6. Summary - Accessible tabpanel

3 Project: High-performance page

  1. Project: High-performance page
  2. Critical resource order
  3. Image optimization
  4. Template and noscript
  5. Project final - Performance page

4 Internationalization

  1. Lang and dir
  2. Hreflang strategy
  3. Bidi and bdo
  4. RTL-aware markup
  5. Multilingual SEO
  6. Summary - Multilingual page

5 Project: Secure page

  1. Project: Secure form page
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Project final - Secure page

6 Advanced web components

  1. Custom element registry
  2. Slot and shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM and accessibility tree
  6. Summary - Component library skeleton

7 Expert final

  1. Challenge - Accessible dialog
  2. Challenge - ARIA tabpanel
  3. Challenge - Multilingual RTL
  4. Challenge - Security package
  5. Challenge - Expert capstone