Apa Itu rel="noreferrer" dalam HTML?

Penjelasan detail tentang arti, fungsi, perbedaan dengan noopener, kapan dipakai, dan dampaknya.

1. Apa itu noreferrer?

noreferrer adalah nilai atribut rel yang bisa digunakan pada elemen <a>, <area>, atau <form>. Tujuannya adalah supaya ketika pengguna mengklik link, browser tidak mengirimkan HTTP Referer (yakni URL asal halaman) ke server tujuan.

Jadi, kalau link dari example.com/page.html menuju other.com, server other.com tidak tahu bahwa pengunjung datang dari example.com.

2. Fungsi Utama

  1. Menyembunyikan referer → privasi lebih terjaga.
  2. Efek tambahan → di banyak browser modern, noreferrer juga otomatis menonaktifkan akses window.opener (efek mirip noopener).

3. Perbedaan dengan noopener

4. Dampak Jika noreferrer Tanpa target="_blank"

Jika sebuah link menggunakan rel="noreferrer" tanpa target="_blank", maka:

Kesimpulannya: noreferrer masih berguna untuk privasi meski tanpa target="_blank", tapi perlindungan dari serangan opener memang tidak relevan di situ.

5. Tabel Perbandingan

Atribut Menyembunyikan Referer Putus window.opener Tujuan Utama
noopener ❌ Tidak ✅ Ya Keamanan
noreferrer ✅ Ya ✅ Ya (di mayoritas browser) Privasi + Keamanan

6. Tabel Keputusan Cepat

Kondisi LinkAtribut yang Disarankan
Link internal (domain sama)Tidak perlu / noopener
Eksternal aman (Google, GitHub, Wikipedia)noopener
Eksternal tidak tepercayanoopener noreferrer
Privasi penting (situs sensitif, kompetitor)noreferrer
Kalau ragunoopener noreferrer (best practice)

7. Flowchart Tekstual

  Apakah link ke domain sendiri?
   └─ Ya → Tidak perlu rel khusus
   └─ Tidak →
       Apakah pakai target="_blank"?
        └─ Ya → Minimal pakai noopener
        └─ Tidak → noreferrer opsional (jika butuh privasi)
       Apakah butuh privasi?
        └─ Ya → pakai noreferrer (atau noopener noreferrer)
        └─ Tidak → cukup noopener
  

8. Bagikan Artikel Ini

Facebook Twitter LinkedIn

9. Komentar

📑 Sitemap 🏠 Home
×