Snippet

Sanitizing User-Supplied Redirect URLs Before Angular Router Navigation

Redirect parameters (returnUrl, next, redirectTo) are a classic open-redirect vector: an attacker crafts a login link whose returnUrl points to an external phishing domain, and if the app blindly navigates there after authentication, users are silently handed off. This service enforces an allowlist by prefix, explicitly rejects protocol-relative URLs (//evil.com, which browsers treat as same-scheme absolute) and any URL carrying a scheme, and falls back to a safe default whenever the input fails validation or even fails to URI-decode.

snippet.js

javascript

import { Injectable, inject } from '@angular/core';
import { Router, UrlTree } from '@angular/router';
 
const ALLOWED_INTERNAL_PREFIX = '/app/';
 
@Injectable({ providedIn: 'root' })
class SafeRedirectService {
  private router = inject(Router);
 
  resolveSafeTarget(rawReturnUrl: string | null): UrlTree {
    if (!rawReturnUrl) {
      return this.router.parseUrl('/app/home');
    }
 
    let decoded: string;
    try {
      decoded = decodeURIComponent(rawReturnUrl);
    } catch {
      return this.router.parseUrl('/app/home');
    }
 
    const isProtocolRelative = decoded.startsWith('//');
    const isAbsoluteUrl = /^[a-z][a-z0-9+.-]*:/i.test(decoded);
    const isInternal = decoded.startsWith(ALLOWED_INTERNAL_PREFIX);
 
    if (isProtocolRelative || isAbsoluteUrl || !isInternal) {
      return this.router.parseUrl('/app/home');
    }
 
    return this.router.parseUrl(decoded);
  }
}

angular

Breakdown

const ALLOWED_INTERNAL_PREFIX = '/app/';

An explicit allowlist prefix is far safer than a denylist of known-bad patterns, which attackers can bypass with encoding tricks.

decoded = decodeURIComponent(rawReturnUrl);

Decoding before validation prevents encoded bypasses like %2F%2Fevil.com from slipping past a naive string check.

const isProtocolRelative = decoded.startsWith('//');

Protocol-relative URLs are absolute in browsers despite lacking a scheme, so they must be checked separately from the scheme regex.

const isAbsoluteUrl = /^[a-z][a-z0-9+.-]*:/i.test(decoded);

This regex matches the RFC 3986 scheme grammar to catch javascript:, https:, and any other scheme-prefixed payload.

return this.router.parseUrl('/app/home');

Every rejection path converges on the same safe UrlTree rather than throwing, keeping the caller's navigation logic simple.

Previous snippet Next snippet

More Expert JavaScript exercises →

Sanitizing User-Supplied Redirect URLs Before Angular Router Navigation

Related