Snippet

Absichern externer Hyperlinks mit noopener in JSX

Wenn Links mit target='_blank' in einem neuen Browser-Tab geöffnet werden, können bösartige Zielseiten über window.opener auf die Ursprungsseite zugreifen. Das Hinzufügen von rel='noopener noreferrer' isoliert den neuen Browserkontext und schützt die Sitzungssicherheit der Benutzer.

snippet.js

javascript

export function SecureExternalLink({ url, label }) {
  return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
    >
      {label}
    </a>
  );
}

react

Erklärung

target="_blank"

Weist den Browser an, die Ziel-URL in einem neuen Fenster oder Browser-Tab zu öffnen.

rel="noopener noreferrer"

Verhindert den Zugriff des neuen Tabs auf window.opener und unterbindet das Weiterleiten von Referrer-Daten.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Absichern externer Hyperlinks mit noopener in JSX

Verwandt