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

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

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:.

if (!isSafeProtocol) {

Überprüft das Ergebnis der Sicherheitsvalidierung vor dem Rendern des anklickbaren Links.

Öffnet externe Links sicher in einem neuen Tab und verhindert den Zugriff der Zielseite auf window.opener.

Vorheriges Snippet Nächstes Snippet

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

Verhindern bösartiger URLs in externen Links

Verwandt