Cara Menggunakan HTML untuk Membuka Tautan di Tab Baru

Pemrograman

Tab itu bagus, bukan? Mereka memungkinkan multitasker di dalam diri kita semua untuk menangani banyak tugas online pada saat yang bersamaan.

Tab sudah sangat umum sekarang sehingga, saat Anda mengeklik tautan, kemungkinan besar tautan itu akan terbuka di tab baru.

Jika Anda pernah bertanya-tanya bagaimana melakukannya dengan tautan Anda sendiri, Anda telah datang ke tempat yang tepat.

Elemen Jangkar

Untuk membuat tautan pada halaman web, Anda perlu membungkus elemen (teks, gambar, dan sebagainya) dalam elemen anchor ( ) dan menyetel hrefatributnya ke URL yang ingin Anda tautkan.

Check out freeCodeCamp.

Lihat freeCodeCamp.

Jika Anda mengklik link di atas, browser akan membuka link tersebut di jendela atau tab saat ini. Ini adalah perilaku default di setiap browser.

Untuk membuka tautan di tab baru, kita perlu melihat beberapa atribut lain dari atribut elemen jangkar lainnya.

Atribut Target

Atribut ini memberi tahu browser cara membuka tautan.

Untuk membuka tautan di tab baru, cukup setel targetatribut ke _blank:

Check out freeCodeCamp.

Sekarang ketika seseorang mengklik tautan, itu akan terbuka di tab baru, atau mungkin jendela baru tergantung pada pengaturan browser orang tersebut.

Masalah keamanan dengan target="_blank"

Saya sangat menyarankan agar Anda selalu menambahkan rel="noreferrer noopener"elemen jangkar setiap kali Anda menggunakan targetatribut:

Check out freeCodeCamp.

Ini menghasilkan keluaran berikut:

Lihat freeCodeCamp.

The relatribut menetapkan hubungan antara halaman Anda dan URL terkait. Menyetelnya noopener noreferreradalah untuk mencegah jenis phishing yang dikenal sebagai tabnabbing.

Apa itu tabnabbing?

Tabnabbing, terkadang disebut reverse tabnabbing, adalah eksploitasi yang menggunakan perilaku default browser dengan target="_blank"untuk mendapatkan akses parsial ke halaman Anda melalui window.objectAPI.

Dengan tabnabbing, halaman yang Anda tautkan dapat menyebabkan halaman Anda dialihkan ke halaman login palsu. Ini akan sulit dilihat oleh sebagian besar pengguna karena fokusnya ada pada tab yang baru saja dibuka - bukan tab asli dengan halaman Anda.

Kemudian ketika seseorang beralih kembali ke tab dengan halaman Anda, mereka akan melihat halaman login palsu dan mungkin memasukkan detail login mereka.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang cara kerja tabnab dan apa yang dapat dilakukan aktor jahat dengan exploit tersebut, lihat artikel Alex Yumashev dan yang satu ini dari OWASP.

Jika Anda ingin melihat brankascontoh yang berfungsi, lihat halaman ini dan repo GitHub-nya untuk informasi lebih lanjut tentang exploit dan relatributnya.

Singkatnya

Sangat mudah menggunakan HTML untuk membuka tautan di tab baru. Anda hanya membutuhkan elemen anchor ( ) dengan tiga atribut penting:

  1. The hrefatribut set ke URL dari halaman yang ingin Anda link
  2. The targetatribut diatur untuk _blank, yang memberitahu browser untuk membuka link di tab / jendela baru, tergantung pada pengaturan browser
  3. The relatribut set untuk noreferrer noopenermencegah serangan berbahaya mungkin dari halaman Anda link ke

Sekali lagi, inilah contoh HTML yang berfungsi:

Check out freeCodeCamp.

Yang menghasilkan keluaran berikut di browser:

Lihat freeCodeCamp.

Sekali lagi terima kasih telah membaca. Selamat membuat kode.