Navigation Directives - Controlling Page Navigation

1 min read Web Security Fundamentals

Navigation directives control how users can navigate away from your page, providing additional security layers for sensitive applications.

navigate-to: Navigation Restriction

The navigate-to directive (experimental) restricts where the document can navigate, either via links, forms, or JavaScript.

Content-Security-Policy: navigate-to 'self' https://trusted-site.com;

Implementing navigation controls:

// Polyfill for navigate-to behavior
class NavigationController {
    constructor(allowedDestinations) {
        this.allowedDestinations = allowedDestinations;
        this.interceptNavigation();
    }
    
    interceptNavigation() {
        // Intercept link clicks
        document.addEventListener('click', (e) => {
            const link = e.target.closest('a');
            if (link && !this.isAllowedDestination(link.href)) {
                e.preventDefault();
                console.warn('Navigation blocked by policy:', link.href);
            }
        });
        
        // Intercept form submissions
        document.addEventListener('submit', (e) => {
            const form = e.target;
            if (!this.isAllowedDestination(form.action)) {
                e.preventDefault();
                console.warn('Form submission blocked by policy:', form.action);
            }
        });
    }
    
    isAllowedDestination(url) {
        try {
            const destination = new URL(url);
            return this.allowedDestinations.some(allowed => {
                if (allowed === "'self'") {
                    return destination.origin === window.location.origin;
                }
                return destination.origin === new URL(allowed).origin;
            });
        } catch {
            return false;
        }
    }
}