// Current URL: https://example.com/products
// Attempt to use pushState
try {
history.pushState({page: 'details'}, 'Product Details', 'https://different-domain.com/details');
} catch (error) {
console.error('History API error:', error);
// Fallback to traditional navigation
window.location.href = 'https://different-domain.com/details';
}
This code throws an error because it violates the same-origin policy: 1) The History API's pushState() and replaceState() methods can only change URLs within the same origin, 2) An origin is defined by the combination of protocol (https), domain (example.com), and port, 3) The code attempts to change from example.com to different-domain.com, which is a different origin, 4) This restriction exists for security reasons—allowing cross-origin manipulation would enable spoofing and other attacks, 5) The browser throws a security error (typically a DOMException with a message about 'security' or 'origin'), 6) The try-catch block correctly handles this error by falling back to traditional navigation via window.location, 7) Traditional navigation with window.location.href does allow cross-origin changes because it performs a full page load, 8) This demonstrates the security boundaries of client-side routing versus full navigation.