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 (<ahref={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.