Login Redirects and the Open-Redirect Trap

1. 1
   Capture

   At the point of interruption, record the full intended location — path, query and hash — as a path only, never as an absolute URL.

   fails by Capturing after the router has already swapped views, so the recorded destination is the login route itself.

2. 2
   Store

   Keep it in router location state or session-scoped storage; use a query parameter only if the flow needs to be linkable.

   fails by Putting it in a query parameter by reflex, which is what creates the open-redirect surface in the first place.

3. 3
   Render

   Show the login surface with an explanation naming what the user is signing in to continue to.

   fails by Interpolating the raw destination into the page or an href before validating it.

4. 4
   Authenticate

   The server establishes the session. Possibly via an external identity provider, which must carry the destination through and back.

   fails by Losing the destination across the provider round trip, so every federated login lands on the home page.

5. 5
   Validate

   Parse the candidate against your own origin and require an exact origin match; check the path resolves to a known route.

   fails by A string check — startsWith('/') accepts //evil.example, and a substring match accepts a lookalike host.

6. 6
   Navigate

   Replace rather than push, so Back does not return to a completed login form.

   fails by Pushing, which strands the user in a two-entry loop between login and destination.

7. 7
   Land

   Move focus to the destination's main heading, set the document title, and clear the stored destination.

   fails by Leaving focus on a control that no longer exists, and leaving a stale destination that hijacks the next login.

The validate step is the security boundary and the land step is the accessibility boundary. Flows routinely have neither, and the ones that have only the first are still broken for keyboard and screen-reader users.

if (next.startsWith('/')) location.assign(next)
// accepts //evil.example        (protocol-relative: absolute)
// accepts /\/evil.example       (normalised by some parsers)
// and if you add a host substring check, it accepts
//   https://yourdomain.evil.test

const url = new URL(next, location.origin)
if (url.origin === location.origin) {
  router.replace(url.pathname + url.search + url.hash)
}
// One comparison covers scheme, host, port, protocol-relative
// forms, encoding variants and javascript:/data: schemes,
// because it is the browser's own definition of an origin.

The string version is a hand-written approximation of URL grammar, and every bypass in this class is a case the approximation did not model. The parsed version delegates to the implementation that defines what an origin is, so it cannot disagree with the browser about where a navigation would actually go.

1const FALLBACK = '/'
2 
3export function safeDestination(candidate: string | null): string {
4  if (!candidate) return FALLBACK
5  let url: URL
6  try {
7    // Resolve against our own origin. A relative path stays ours;
8    // anything absolute reveals its true origin here.
9    url = new URL(candidate, location.origin)
10  } catch {
11    return FALLBACK                       // not a URL at all
12  }
13 
14  // The whole check, and it covers scheme, host, port and
15  // protocol-relative forms in one comparison.
16  if (url.origin !== location.origin) return FALLBACK
17 
18  // javascript: and data: never produce a matching origin, but be explicit:
19  if (url.protocol !== location.protocol) return FALLBACK
20 
21  // Second gate: the path must be a route this application actually has.
22  if (!router.hasRoute(url.pathname)) return FALLBACK
23 
24  // Return a path, never an absolute URL, so callers cannot leave the origin.
25  return url.pathname + url.search + url.hash
26}
27 
28// One choke point. Nothing else is allowed to consume `next`.
29export function completeLogin(next: string | null) {
30  router.replace(safeDestination(next))   // replace, not push
31  focusMainHeading()                      // the browser will not do this for you
32}

new URL(candidate, location.origin) is doing the security work. Everything after it is defence in depth, and the returned value being a path rather than a URL means a caller cannot reintroduce the bug.