🛡️ Trusted Types Demo

// URL Sanitization for different contexts
class URLSanitizer {
  // For anchor tags
  sanitizeForHref(url) {
    // Remove javascript: and data: protocols
    if (/^(javascript|data|vbscript):/i.test(url)) {
      return '#blocked';
    }
    
    try {
      const urlObj = new URL(url, window.location.origin);
      
      // For external links, add rel="noopener noreferrer"
      if (urlObj.origin !== window.location.origin) {
        return {
          href: urlObj.href,
          rel: 'noopener noreferrer',
          target: '_blank'
        };
      }
      
      return { href: urlObj.href };
    } catch {
      return { href: '#invalid' };
    }
  }
  
  // For image sources
  sanitizeForImg(url) {
    // Allow data URLs for images
    if (/^data:image\//i.test(url)) {
      return url;
    }
    
    // Block other data URLs
    if (/^data:/i.test(url)) {
      return '/placeholder.png';
    }
    
    // Validate other URLs
    try {
      const urlObj = new URL(url, window.location.origin);
      if (urlObj.protocol === 'https:' || urlObj.protocol === 'http:') {
        return urlObj.href;
      }
    } catch {
      return '/placeholder.png';
    }
    
    return '/placeholder.png';
  }
  
  // For iframe sources
  sanitizeForIframe(url) {
    // Very strict - only allow same-origin or trusted domains
    const trustedDomains = [
      'https://www.youtube.com',
      'https://player.vimeo.com'
    ];
    
    try {
      const urlObj = new URL(url);
      
      // Check if same-origin
      if (urlObj.origin === window.location.origin) {
        return url;
      }
      
      // Check trusted domains
      if (trustedDomains.some(domain => url.startsWith(domain))) {
        return url;
      }
    } catch {
      return 'about:blank';
    }
    
    return 'about:blank';
  }
}

// Usage
const sanitizer = new URLSanitizer();

// Create safe link
function createSafeLink(url, text) {
  const a = document.createElement('a');
  const sanitized = sanitizer.sanitizeForHref(url);
  
  if (typeof sanitized === 'object') {
    Object.assign(a, sanitized);
  } else {
    a.href = sanitized;
  }
  
  a.textContent = text;
  return a;
}

// Safe navigation and redirection
class SafeNavigator {
  // Safe window.location assignment
  navigateTo(url) {
    const validated = this.validateURL(url);
    if (validated) {
      window.location.href = validated;
    } else {
      console.error('Invalid navigation URL:', url);
      this.handleInvalidNavigation();
    }
  }
  
  // Safe window.open
  openWindow(url, target = '_blank') {
    const validated = this.validateURL(url);
    if (validated) {
      const newWindow = window.open(validated, target, 'noopener,noreferrer');
      return newWindow;
    }
    return null;
  }
  
  // Safe form action
  setFormAction(form, url) {
    const validated = this.validateURL(url);
    if (validated) {
      form.action = validated;
      // Add CSRF token if needed
      this.addCSRFToken(form);
    }
  }
  
  // Validate and sanitize URL
  validateURL(url) {
    try {
      const urlObj = new URL(url, window.location.origin);
      
      // Block dangerous protocols
      if (!['http:', 'https:'].includes(urlObj.protocol)) {
        return null;
      }
      
      // For production: implement additional checks
      // - Domain whitelist
      // - Path validation
      // - Parameter sanitization
      
      return urlObj.href;
    } catch {
      return null;
    }
  }
  
  // Handle invalid navigation attempts
  handleInvalidNavigation() {
    // Log security event
    console.error('Blocked navigation attempt');
    
    // Show user-friendly error
    alert('The link you clicked appears to be invalid.');
    
    // Optionally report to server
    this.reportSecurityEvent('invalid_navigation');
  }
  
  // Add CSRF protection
  addCSRFToken(form) {
    const token = document.querySelector('meta[name="csrf-token"]')?.content;
    if (token) {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'csrf_token';
      input.value = token;
      form.appendChild(input);
    }
  }
  
  // Report security events
  reportSecurityEvent(event) {
    fetch('/api/security/report', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        event,
        timestamp: Date.now(),
        url: window.location.href
      })
    });
  }
}

// Usage
const navigator = new SafeNavigator();

// Safe navigation
document.getElementById('safeLink').addEventListener('click', (e) => {
  e.preventDefault();
  navigator.navigateTo(e.target.href);
});

// Safe form submission
const form = document.getElementById('myForm');
navigator.setFormAction(form, '/api/submit');