HTML-Level Referrer Control

HTML-Level Referrer Control

Control referrer policy at the HTML level for fine-grained control:

<!-- Page-level policy -->
<meta name="referrer" content="strict-origin-when-cross-origin">

<!-- Link-specific policies -->
<a href="https://external.com" referrerpolicy="no-referrer">External Link</a>
<a href="https://partner.com" referrerpolicy="origin">Partner Site</a>
<a href="/internal" referrerpolicy="same-origin">Internal Page</a>

<!-- Image and iframe policies -->
<img src="https://cdn.example.com/image.jpg" referrerpolicy="no-referrer">
<iframe src="https://embed.example.com" referrerpolicy="origin"></iframe>

<!-- Form-specific policy -->
<form action="https://payment.example.com" method="POST" referrerpolicy="origin">
    <input type="hidden" name="order_id" value="12345">
    <button type="submit">Pay Now</button>
</form>

<!-- Script to dynamically set policies -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set policy for all external links
    document.querySelectorAll('a[href^="http"]:not([href*="' + location.hostname + '"])').forEach(link => {
        link.setAttribute('referrerpolicy', 'no-referrer');
    });
    
    // Special handling for analytics links
    document.querySelectorAll('a[data-analytics]').forEach(link => {
        link.setAttribute('referrerpolicy', 'origin');
    });
});
</script>