javascript / intermediate
Snippet
Verhindern von JavaScript-Pseudo-Protokoll-XSS in dynamischen Link-URLs
Das direkte Einfügen nicht vertrauenswürdiger Benutzereingaben in das href-Attribut kann React-Anwendungen für Cross-Site-Scripting (XSS) über 'javascript:'-Pseudo-Protokolle anfällig machen. Das Parsen potenzieller Links mit der nativen URL-API und das Validieren erlaubter Protokolle verhindert die Ausführung von Schadcode bei Klicks.
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
import React from 'react';function isSafeUrl(rawUrl) {try {const parsed = new URL(rawUrl, window.location.origin);return parsed.protocol === 'http:' || parsed.protocol === 'https:';} catch {return false;}}export function SafeExternalLink({ href, children }) {const safeHref = isSafeUrl(href) ? href : '#';return (<ahref={safeHref}target="_blank"rel="noopener noreferrer"className={safeHref === '#' ? 'disabled-link' : ''}>{children}</a>);}
react
Erklärung
1
const parsed = new URL(rawUrl, window.location.origin);
Parst und normalisiert den Eingabestring anhand einer Basis-Origin und wirft bei ungültiger Syntax einen Fehler.
2
return parsed.protocol === 'http:' || parsed.protocol === 'https:';
Erzwingt eine explizite Protokoll-Allowlist, um gefährliche Schemata wie 'javascript:' oder 'data:' zu blockieren.
3
const safeHref = isSafeUrl(href) ? href : '#';
Setzt eine inaktive Fallback-URL ein, falls die Validierung den übergebenen Link-String ablehnt.
4
rel="noopener noreferrer"
Verhindert, dass das Zielfenster Zugriff auf window.opener erhält, um Tab-Nabbing-Angriffe abzuwehren.