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>