javascript / beginner
Snippet
Verhindern bösartiger URLs in externen Links
Die ungeprüfte Übernahme von URLs aus Benutzereingaben kann zu XSS-Angriffen (wie javascript:-URIs) und Reverse-Tabnabbing führen. Überprüfe stets das Protokoll auf http/https und setze rel='noopener noreferrer' beim Öffnen neuer Tabs, um den Browser-Kontext abzusichern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
function SafeExternalLink({ url, label }) {const isSafeProtocol = url.startsWith('https://') || url.startsWith('http://');if (!isSafeProtocol) {return <span className="invalid-link">Invalid Link</span>;}return (<a href={url} target="_blank" rel="noopener noreferrer">{label}</a>);}
react
Erklärung
1
const isSafeProtocol = url.startsWith('https://') || url.startsWith('http://');
Stellt sicher, dass das URL-Protokoll mit http oder https beginnt, und blockiert gefährliche Schemas wie javascript:.
2
if (!isSafeProtocol) {
Überprüft das Ergebnis der Sicherheitsvalidierung vor dem Rendern des anklickbaren Links.
3
<a href={url} target="_blank" rel="noopener noreferrer">
Öffnet externe Links sicher in einem neuen Tab und verhindert den Zugriff der Zielseite auf window.opener.