Keamanan Link Eksternal

Menautkan ke situs lain adalah aktivitas paling umum di web, tetapi setiap link eksternal membawa dua sisi: jembatan informasi bagi pengunjung sekaligus pintu masuk risiko bila ditulis tanpa pengaman. Risiko yang paling dikenal bernama reverse tabnabbing — halaman yang dibuka pada tab baru dapat mengubah alamat tab asal tanpa disadari pengunjung. Chapter ini merangkum sisi keamanan link eksternal sebagai pelengkap chapter Membuka Link di Tab Baru pada section Links dan Navigasi. Kita bahas cara kerja tabnabbing, mitigasinya lewat rel="noopener noreferrer", pemilihan skema http dan https, serta batasan menautkan konten yang tidak terpercaya.

Cara Kerja Reverse Tabnabbing #

Ketika link dengan target="_blank" membuka tab baru, browser menyetel properti window.opener pada halaman tujuan. Properti itu berisi referensi ke tab pembuka, dan JavaScript pada halaman tujuan boleh memakainya — termasuk mengganti alamat tab asal. Pihak yang menyalahgunakan celah ini mengarahkan tab asal ke tiruan halaman login miliknya, sementara pengunjung masih memandang tab tersebut sebagai situs kita. Perhatian pengunjung sedang berpindah ke tab baru, sehingga perubahan pada tab lama jarang disadari.

Mitigasi dengan rel noopener noreferrer #

Penangkalnya cukup satu baris: setiap link yang membuka tab baru menyertakan rel="noopener noreferrer".

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" rel="noopener noreferrer">
  Referensi elemen HTML di MDN Web Docs
</a>

Output yang Dihasilkan:

Tab baru menampilkan halaman tujuan. Pada tab tersebut window.opener
bernilai null, dan header Referer tidak dikirim ke server tujuan.

Mari kita telaah peran setiap bagian:

1. href: alamat tujuan memakai skema https dan domain resmi, bukan alamat tiruan.
2. target="_blank": tujuan dibuka pada tab baru, bukan menggantikan halaman ini.
3. rel="noopener": browser tidak menyetel window.opener, sehingga halaman tujuan kehilangan jalan menuju tab asal.
4. rel="noreferrer": menyembunyikan header Referer dan menyertakan efek noopener.

Tabel berikut merangkum pembagian perannya:

hreflang dan Pemilihan Skema https #

Atribut hreflang sering menyertai link eksternal, tetapi keliru bila dianggap pengaman: atribut itu menyatakan bahasa halaman tujuan dan sifatnya semata petunjuk. Pengaruh keamanan justru terletak pada skema alamat. Link dengan skema http mengantar pengunjung ke halaman yang lalu lintasnya tidak terenkripsi, dan browser menandai halaman semacam itu dengan label Not secure. Data apa pun yang diketik pengunjung di sana — termasuk isian formulir — dapat dibaca pihak lain di sepanjang jalur.

Sebelum menautkan, kita periksa tiga hal:

• utamakan alamat ber-skema https setiap kali halaman tujuan menyediakannya;
• bila situs tujuan hanya tersedia lewat skema http dan meminta data pengunjung, cari sumber alternatif yang terenkripsi;
• sertakan hreflang bila bahasa tujuan berbeda dari halaman kita, sebagai petunjuk bagi pengunjung dan alat bantu.

Link dari Konten Tidak Terpercaya #

Link yang kita susun sendiri berbeda statusnya dengan link yang berasal dari konten pengunjung, misalnya komentar atau ulasan. Kita tidak dapat menjamin isi komentarnya, sehingga setiap link yang dirender dari input pengguna wajib menyertakan rel="noopener noreferrer" — dan teksnya wajib di-escape sebelum dirender. Dua chapter berikutnya membahas mekanisme escape secara rinci. Aturan praktisnya sederhana: perlakukan seluruh link dari pihak luar dengan standar yang sama.

Contoh Halaman dengan Link Eksternal Aman #

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tautan Eksternal yang Aman</title>
</head>
<body>
  <h1>Tautan Eksternal yang Aman</h1>
  <p>Halaman ini menghimpun referensi belajar HTML dari luar situs. Setiap link eksternal memakai skema https, dibuka pada tab baru, dan menyertakan <code>rel="noopener noreferrer"</code>.</p>
  <ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" rel="noopener noreferrer" hreflang="en">Referensi elemen HTML di MDN Web Docs</a></li>
    <li><a href="https://web.dev/learn/html" target="_blank" rel="noopener noreferrer" hreflang="en">Kursus Learn HTML di web.dev</a></li>
    <li><a href="www.example.com/panduan" target="_blank" rel="noopener noreferrer" hreflang="id">Panduan HTML dari situs mitra</a></li>
  </ul>
  <p>Link internal seperti <a href="/materi">daftar materi</a> tidak memerlukan <code>target="_blank"</code>: tab yang sama tidak membuka celah reverse tabnabbing.</p>
</body>
</html>

Output yang Dihasilkan:

Daftar tiga link eksternal tampil; setiap klik membuka tab baru
tanpa referensi kembali, dan link internal terakhir tetap di tab
yang sama.

Mari kita telaah strukturnya:

1. Elemen <code> pada pengantar: menandai rel="noopener noreferrer" sebagai kode, bukan teks biasa.
2. Tiga item <li>: setiap link eksternal memuat pasangan lengkap target dan rel, ditambah hreflang sebagai petunjuk bahasa.
3. Paragraf terakhir: link internal tanpa target="_blank" — tab yang sama tidak membuka celah tabnabbing.

Dengan itu, jalur masuk pertama konten luar — link — telah kita rapikan. Jalur berikutnya lebih luas: sematan iframe yang memuat dokumen penuh milik pihak lain, pokok bahasan chapter selanjutnya.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Link type noopener
• MDN Web Docs — Elemen a

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tautan Eksternal yang Aman</title>
</head>
<body>
  <h1>Tautan Eksternal yang Aman</h1>
  <p>Halaman ini menghimpun referensi belajar HTML dari luar situs. Setiap link eksternal memakai skema https, dibuka pada tab baru, dan menyertakan <code>rel="noopener noreferrer"</code>.</p>
  <ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank" rel="noopener noreferrer" hreflang="en">Referensi elemen HTML di MDN Web Docs</a></li>
    <li><a href="https://web.dev/learn/html" target="_blank" rel="noopener noreferrer" hreflang="en">Kursus Learn HTML di web.dev</a></li>
    <li><a href="www.example.com/panduan" target="_blank" rel="noopener noreferrer" hreflang="id">Panduan HTML dari situs mitra</a></li>
  </ul>
  <p>Link internal seperti <a href="/materi">daftar materi</a> tidak memerlukan <code>target="_blank"</code>: tab yang sama tidak membuka celah reverse tabnabbing.</p>
</body>
</html>