v144 · svg · demo

Security Policy

The referrerpolicy attribute on SVG <a> elements controls what the browser sends in the Referer header. Chrome 144 makes SVG <a> consistent with HTML <a>. Pick a policy to see the exact header value that would be sent, the security risk level, and how the referrer flows through the network.

SVGAElement.referrerPolicy support: checking…

Live SVG link

Click to simulate navigation and inspect the referrer that would be sent.

Referer header sent to destination:
select a policy above
—

Referrer flow

this page→link click
↓
browser→select a policy
↓
destination←receives

SVG <a> vs HTML <a>

Chrome 144 aligns SVG <a> with HTML <a>. Both now produce identical referrer behaviour for the selected policy.

elempolicyreferer sent

the API

// Create SVG anchor and set referrer policy (new in Chrome 144)
const svgA = document.createElementNS('http://www.w3.org/2000/svg', 'a');
svgA.referrerPolicy = 'no-referrer';   // IDL property (was no-op pre-144)

// Or as an attribute:
<a referrerpolicy="strict-origin-when-cross-origin"
   href="https://example.com" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40"/>
</a>

// Feature detect:
const probe = document.createElementNS('http://www.w3.org/2000/svg', 'a');
const supported = 'referrerPolicy' in probe; // true from Chrome 144

see also