Noopener dan Noreferrer adalah atribut yang digunakan di HTML untuk mengontrol tab terbuka dari tautan yang dibuka di browser. Mereka berfokus pada keamanan dan privasi pengguna.
Noopener
Noopener adalah sebuah atribut yang digunakan dalam elemen tautan HTML untuk mencegah tab baru yang dibuka dari mengakses konten asli dari tab yang mengarahkan tautan tersebut. Ini mencegah serangan yang dikenal sebagai “tab nabbing”, di mana tautan yang dibuka di tab baru dapat memanipulasi atau mencuri informasi dari tab yang mengarahkan.
Noreferrer
Noreferrer adalah atribut yang digunakan dalam elemen tautan HTML untuk mencegah browser untuk mengirim header HTTP “Referer” ke halaman yang ditautkan. Referer adalah informasi yang mengidentifikasi halaman sumber dari tautan. Dalam konteks keamanan dan privasi, menggunakan atribut noreferrer membantu mencegah halaman yang ditautkan untuk melacak informasi tentang halaman sumber.
Keamanan Pengguna
Noopener dan noreferrer bertujuan untuk melindungi pengguna dari serangan atau pelacakan yang tidak diinginkan. Dengan menggunakan atribut ini, pengguna dapat merasa lebih aman saat membuka tautan baru atau berpindah ke halaman yang ditautkan.
Perlindungan terhadap Tab Nabbing
Noopener mencegah tab yang baru dibuka untuk mengakses atau memanipulasi konten dari tab yang mengarahkan. Hal ini berguna untuk melindungi pengguna dari serangan yang mencoba mencuri informasi atau mengarahkan mereka ke halaman phishing.
Mencegah Pelacakan
Noreferrer membantu mencegah pelacakan dengan mencegah browser mengirim header HTTP “Referer” ke halaman yang ditautkan. Dengan tidak mengirim informasi ini, halaman yang ditautkan tidak dapat melacak halaman sumber atau informasi lain yang mungkin sensitif.
Penggunaan Noopener dan Noreferrer
| Noopener | Noreferrer |
|---|---|
| Menggunakan atribut “noopener” di elemen tautan: | Menggunakan atribut “noreferrer” di elemen tautan: |
<a href="https://example.com" target="_blank" rel="noopener">Tautan ke Example</a> |
<a href="https://example.com" target="_blank" rel="noreferrer">Tautan ke Example</a> |
Contoh Serangan Tab Nabbing
Sebagai contoh, jika seseorang membuka tautan dengan target “_blank” yang tidak menggunakan atribut noopener, halaman yang ditautkan dapat menggunakan JavaScript untuk mengganti konten dari halaman sumber, yang dapat digunakan untuk mencuri informasi seperti kata sandi atau data pribadi.
Penggunaan Atribut Noopener dan Noreferrer secara Bersamaan
Untuk meningkatkan keamanan dan privasi pengguna, kedua atribut dapat digunakan bersama-sama di elemen tautan:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Tautan ke Example</a>
Kompatibilitas
Atribut noopener dan noreferrer didukung oleh mayoritas browser modern seperti Chrome, Firefox, dan Safari. Namun, perlu diingat bahwa atribut tersebut mungkin tidak didukung oleh browser yang lebih lama, sehingga penting untuk memastikan kompatibilitas dengan target pengguna yang diinginkan.