HTML Code
<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

  <meta name=viewport content="width=device-width,initial-scale=1">

  <title>referrerpolicy — picker</title>

  <style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.7}h1{margin:0 0 .75rem;font-size:1.25rem;color:#0f172a}label{display:block;margin-bottom:.35rem;font-weight:500;font-size:.875rem}select{padding:.45rem .65rem;font:inherit;border:1px solid #cbd5e1;border-radius:6px;margin-bottom:.75rem;max-width:360px}a{color:#2563eb;font-weight:500}#status{margin-top:.75rem;padding:.75rem 1rem;border-radius:8px;font-size:.875rem;max-width:480px;background:#f1f5f9;border:1px solid #e2e8f0;color:#475569}.desc{font-size:.8125rem;color:#64748b;margin-top:.5rem;max-width:480px}</style>

</head>

<body>

  <h1>choose a referrer policy</h1>



  <label for=policySelect>Policy for external link:</label>

  <select id=policySelect>

    <option value=no-referrer>no-referrer</option>

    <option value=origin>origin</option>

    <option value=same-origin>same-origin</option>

    <option value=strict-origin>strict-origin</option>

    <option value=strict-origin-when-cross-origin selected>strict-origin-when-cross-origin</option>

    <option value=unsafe-url>unsafe-url (not recommended)</option>

  </select>



  <p>

    <a id=extLink href=https://example.com target=_blank rel=noopener>Open example.com</a>

  </p>



  <p id=status aria-live=polite></p>

  <p class=desc id=policyDesc></p>



  <script>var link=document.getElementById("extLink"),select=document.getElementById("policySelect"),descriptions={"no-referrer":"Sends no Referer header at all.",origin:"Sends only the origin (scheme + host + port).","same-origin":"Referer only for same-origin requests; none cross-origin.","strict-origin":"Origin only on HTTPS; none on insecure cross-origin.","strict-origin-when-cross-origin":"Full URL same-origin; origin cross-origin HTTPS; none on downgrade.","unsafe-url":"Always sends full URL — can leak sensitive paths."};function update(){link.referrerPolicy=select.value,document.getElementById("status").textContent='Active policy: "'+link.referrerPolicy+'"',document.getElementById("policyDesc").textContent=descriptions[select.value]||""}select.addEventListener("change",update),update()</script>

</body>

</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML referrerpolicy Attribute — policy picker
