Verwenden von HTML zum Öffnen eines Links in einem neuen Tab

Tabs sind großartig, nicht wahr? Sie ermöglichen es dem Multitasker in uns allen, eine Reihe von Online-Aufgaben gleichzeitig zu erledigen.

Registerkarten sind mittlerweile so häufig, dass sie beim Klicken auf einen Link wahrscheinlich in einer neuen Registerkarte geöffnet werden.

Wenn Sie sich jemals gefragt haben, wie Sie das mit Ihren eigenen Links machen sollen, sind Sie hier genau richtig.

Das Ankerelement

Um einen Link auf einer Webseite zu erstellen, müssen Sie ein Element (Text, ein Bild usw.) in ein anchor ( ) -Element einschließen und sein hrefAttribut auf die URL setzen , zu der Sie einen Link erstellen möchten.

Check out freeCodeCamp.

Schauen Sie sich freeCodeCamp an.

Wenn Sie auf den obigen Link klicken, öffnet der Browser den Link im aktuellen Fenster oder auf der Registerkarte. Dies ist das Standardverhalten in jedem Browser.

Um einen Link in einer neuen Registerkarte zu öffnen, müssen wir uns einige der anderen Attribute der anderen Attribute des Ankerelements ansehen.

Das Zielattribut

Dieses Attribut teilt dem Browser mit, wie der Link geöffnet werden soll.

Um einen Link in einer neuen Registerkarte zu öffnen, setzen Sie das targetAttribut einfach auf _blank:

Check out freeCodeCamp.

Wenn jemand auf den Link klickt, wird dieser in einem neuen Tab oder möglicherweise in einem neuen Fenster geöffnet, abhängig von den Browsereinstellungen der Person.

Sicherheitsbedenken mit target="_blank"

Ich empfehle dringend, dass Sie rel="noreferrer noopener"dem Ankerelement immer etwas hinzufügen , wenn Sie das targetAttribut verwenden:

Check out freeCodeCamp.

Dies führt zu folgender Ausgabe:

Schauen Sie sich freeCodeCamp an.

Das relAttribut legt die Beziehung zwischen Ihrer Seite und der verknüpften URL fest. Wenn Sie dies noopener noreferrerfestlegen , wird eine Art von Phishing verhindert, die als Tabnabbing bezeichnet wird.

Was ist Tabnabbing?

Tabnabbing, manchmal auch Reverse Tabnabbing genannt, ist ein Exploit, der das Standardverhalten des Browsers verwendet target="_blank", um über die window.objectAPI einen teilweisen Zugriff auf Ihre Seite zu erhalten .

Mit Tabnabbing kann eine Seite, auf die Sie verlinken, dazu führen, dass Ihre Seite auf eine gefälschte Anmeldeseite umgeleitet wird. Dies ist für die meisten Benutzer schwer zu bemerken, da der Fokus auf der gerade geöffneten Registerkarte liegt - nicht auf der ursprünglichen Registerkarte mit Ihrer Seite.

Wenn eine Person dann mit Ihrer Seite zur Registerkarte zurückkehrt, wird stattdessen die gefälschte Anmeldeseite angezeigt und möglicherweise ihre Anmeldedaten eingegeben.

Wenn Sie mehr darüber erfahren möchten, wie Tabnabbing funktioniert und was schlechte Schauspieler mit dem Exploit anfangen können, lesen Sie den Artikel von Alex Yumashev und diesen von OWASP.

Wenn Sie einen Safe sehen möchtenWeitere Informationen zum Exploit und zum relAttribut finden Sie auf dieser Seite und im GitHub-Repo .

Zusammenfassend

Es ist einfach, HTML zu verwenden, um einen Link in einem neuen Tab zu öffnen. Sie benötigen lediglich ein anchor ( ) -Element mit drei wichtigen Attributen:

  1. Das hrefAttribut, das auf die URL der Seite festgelegt ist, zu der Sie einen Link erstellen möchten
  2. Das targetAttribut set auf _blank, das den Browser anweist, den Link in Abhängigkeit von den Einstellungen des Browsers in einem neuen Tab / Fenster zu öffnen
  3. Das relAttribut, mit noreferrer noopenerdem mögliche böswillige Angriffe von den Seiten, auf die Sie verlinken, verhindert werden sollen

Hier ist wieder das Arbeitsbeispiel HTML:

Check out freeCodeCamp.

Was zu folgender Ausgabe im Browser führt:

Schauen Sie sich freeCodeCamp an.

Nochmals vielen Dank für das Lesen. Viel Spaß beim Codieren.