javascript / intermediate
Snippet
Validierung des Ursprungs bei dynamischen Weiterleitungen in Route-Guards
Open-Redirect-Sicherheitslücken entstehen, wenn eine Anwendung nicht vertrauenswürdige Benutzereingaben als externe Weiterleitungs-URL nach Aktionen wie dem Login übernimmt. In Vue-Router-Navigation-Guards können Abfrageparameter mit der nativen URL-API validiert werden, um sicherzustellen, dass das Ziel entweder ein rein relativer Pfad ist oder zu einer festen Whitelist erlaubter Hostnamen gehört.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { createRouter, createWebHistory } from 'vue-router';const allowedHosts = new Set(['app.example.com', 'auth.example.com']);export const router = createRouter({history: createWebHistory(),routes: [{path: '/login',component: () => import('./views/LoginView.vue'),beforeEnter: (to) => {const target = to.query.redirect;if (typeof target !== 'string') return true;try {const url = new URL(target, window.location.origin);const isRelative = target.startsWith('/') && !target.startsWith('//');const isAllowedDomain = allowedHosts.has(url.hostname);if (!isRelative && !isAllowedDomain) {return { path: '/dashboard' };}} catch {return { path: '/dashboard' };}return true;}}]});
vue
Erklärung
1
const allowedHosts = new Set(['app.example.com', 'auth.example.com']);
Definiert ein unveränderliches Set vertrauenswürdiger externer Domains für erlaubte Weiterleitungen.
2
const url = new URL(target, window.location.origin);
Parst den Zielstring in ein URL-Objekt mit dem aktuellen Ursprung als Basis-URL.
3
const isRelative = target.startsWith('/') && !target.startsWith('//');
Stellt sicher, dass der Pfad mit einem einfachen Schrägstrich beginnt und schließt protokollrelative URLs wie '//malicious.com' aus.
4
if (!isRelative && !isAllowedDomain) { return { path: '/dashboard' }; }
Bricht nicht vertrauenswürdige Weiterleitungen ab und leitet auf eine sichere Standardroute um.