Tab bagus, bukan? Mereka membolehkan multitasker dalam kita semua melakukan banyak tugas dalam talian pada masa yang sama.
Tab begitu umum sekarang, apabila anda mengklik pada pautan, kemungkinan ia akan dibuka di tab baru.
Sekiranya anda pernah terfikir bagaimana untuk melakukannya dengan pautan anda sendiri, anda telah sampai di tempat yang betul.
Elemen Anchor
Untuk membuat pautan di laman web, anda perlu membungkus elemen (teks, gambar, dan sebagainya) dalam elemen anchor ( ) dan menetapkan hrefatributnya ke URL yang ingin anda pautkan.
Check out freeCodeCamp.
Lihat percumaCodeCamp.
Sekiranya anda mengklik pada pautan di atas, penyemak imbas akan membuka pautan di tetingkap atau tab semasa. Ini adalah tingkah laku lalai dalam setiap penyemak imbas.
Untuk membuka pautan di tab baru, kita perlu melihat beberapa atribut atribut elemen jangkar yang lain.
Atribut Sasaran
Atribut ini memberitahu penyemak imbas cara membuka pautan.
Untuk membuka pautan di tab baru, tetapkan targetatribut ke _blank:
Check out freeCodeCamp.
Sekarang apabila seseorang mengklik pautan itu, ia akan terbuka di tab baru, atau mungkin tetingkap baru bergantung pada tetapan penyemak imbas orang tersebut.
Masalah keselamatan dengan target="_blank"
Saya sangat mengesyorkan agar anda sentiasa menambah rel="noreferrer noopener"elemen sauh setiap kali anda menggunakan targetatribut:
Check out freeCodeCamp.
Ini menghasilkan output berikut:
Lihat percumaCodeCamp.
The relatribut menetapkan hubungan antara halaman anda dan URL yang dipautkan. Menetapkannya noopener noreferreradalah untuk mengelakkan sejenis pancingan data yang dikenali sebagai tabnabbing.
Apa itu tabnabbing?
Tabnabbing, kadang-kadang disebut tabnabbing terbalik, adalah eksploitasi yang menggunakan tingkah laku lalai penyemak imbas target="_blank"untuk mendapatkan akses sebahagian ke halaman anda melalui window.objectAPI.
Dengan tabnabbing, halaman yang anda pautkan dapat menyebabkan halaman anda dialihkan ke halaman login palsu. Ini sukar bagi kebanyakan pengguna untuk memerhatikan kerana fokusnya adalah pada tab yang baru dibuka - bukan tab yang asli dengan halaman anda.
Kemudian apabila seseorang beralih kembali ke tab dengan halaman anda, mereka akan melihat halaman log masuk palsu dan mungkin memasukkan butiran log masuk mereka.
Sekiranya anda berminat untuk mengetahui lebih lanjut mengenai bagaimana tabnabbing berfungsi dan apa yang boleh dilakukan oleh pelaku buruk dengan eksploitasi, lihat artikel Alex Yumashev dan artikel ini oleh OWASP
Sekiranya anda ingin melihat peti besicontoh berfungsi, lihat halaman ini dan repo GitHubnya untuk maklumat lebih lanjut mengenai eksploitasi dan relatribut.
Ringkasnya
Mudah menggunakan HTML untuk membuka pautan di tab baru. Anda hanya memerlukan elemen anchor ( ) dengan tiga sifat penting:
- The
hrefatribut set kepada URL halaman yang anda mahu pautan ke - The
targetatribut ditetapkan kepada_blank, yang memberitahu pelayar untuk membuka pautan dalam tab / tetingkap baru, bergantung kepada tetapan penyemak imbas - The
relset atributnoreferrer noopeneruntuk mengelakkan kemungkinan serangan berniat jahat daripada halaman yang anda mengandungi pautan ke
Sekali lagi, inilah contoh HTML yang berfungsi:
Check out freeCodeCamp.
Yang menghasilkan output berikut dalam penyemak imbas:
Lihat percumaCodeCamp.
Terima kasih sekali lagi kerana membaca. Selamat pengekodan.