0 Tage Serie
javascript / intermediate
Snippet

Verhindern von javascript:-URI-Injektionen in dynamischen React-Link-Attributen

Werden ungeprüfte Benutzereingaben als `href`-Attribut in `<a>`-Tags übergeben, droht XSS durch bösartige `javascript:`-URLs. Die Validierung mit dem standardisierten `URL`-Konstruktor stellt sicher, dass nur sichere Protokolle (`http:`, `https:`, `mailto:`) im JSX gerendert werden.

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
function sanitizeExternalUrl(rawUrl) {
try {
const parsed = new URL(rawUrl, window.location.origin);
const allowedProtocols = ['http:', 'https:', 'mailto:'];
if (!allowedProtocols.includes(parsed.protocol)) {
return '#';
}
return parsed.href;
} catch {
return '#';
}
}
function SafeExternalLink({ userProvidedUrl, linkText }) {
const safeHref = sanitizeExternalUrl(userProvidedUrl);
const isSafe = safeHref !== '#';
return (
<a
href={safeHref}
rel={isSafe ? 'noopener noreferrer' : undefined}
target={isSafe ? '_blank' : undefined}
>
{linkText}
</a>
);
}
react
Erklärung
1
const parsed = new URL(rawUrl, window.location.origin);
Wandelt die Eingabezeile in ein URL-Objekt um, um deren Protokollbestandteile sicher zu analysieren.
2
if (!allowedProtocols.includes(parsed.protocol)) {
Begrenzt erlaubte Link-Ziele streng auf definierte Protokolle wie HTTP, HTTPS und Mailto.
3
rel={isSafe ? 'noopener noreferrer' : undefined}
Setzt Schutzattribute gegen Reverse-Tabnabbing nur dann, wenn ein valider externer Link vorliegt.