Saat Anda menautkan halaman di situs lain menggunakan atribut target="_blank"
,
situs Anda dapat mengalami masalah performa dan keamanan:
- Halaman lainnya dapat berjalan pada proses yang sama seperti halaman Anda. Jika halaman lain menjalankan banyak JavaScript, performa halaman Anda mungkin akan menurun.
- Halaman lainnya dapat mengakses objek
window
dengan propertiwindow.opener
. Hal ini memungkinkan halaman lain mengalihkan halaman Anda ke URL berbahaya.
Menambahkan rel="noopener"
atau rel="noreferrer"
ke link target="_blank"
akan menghindari masalah ini.
Cara audit tujuan lintas asal Lighthouse gagal
Lighthouse menandai link tidak aman ke tujuan lintas asal:
Lighthouse menggunakan proses berikut untuk mengidentifikasi link sebagai tidak aman:
- Kumpulkan semua tag
<a>
yang berisi atributtarget="_blank"
, tetapi bukan atributrel="noopener"
ataurel="noreferrer"
. - Filter semua link host yang sama.
Karena Lighthouse memfilter link host yang sama,
ada kasus ekstrem yang harus Anda perhatikan jika bekerja di situs besar:
jika satu halaman berisi link target="_blank"
ke halaman lain di situs Anda tanpa menggunakan rel="noopener"
,
implikasi performa dari audit ini masih berlaku.
Namun, Anda tidak akan melihat link ini di hasil Lighthouse.
Cara meningkatkan performa situs Anda dan mencegah kerentanan keamanan
Tambahkan rel="noopener"
atau rel="noreferrer"
ke setiap link yang diidentifikasi dalam laporan Lighthouse Anda.
Secara umum, saat Anda menggunakan target="_blank"
, selalu
tambahkan rel="noopener"
atau rel="noreferrer"
:
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
rel="noopener"
mencegah halaman baru dapat mengakses propertiwindow.opener
dan memastikannya berjalan dalam proses terpisah.rel="noreferrer"
memiliki efek yang sama, tetapi juga mencegah headerReferer
dikirim ke halaman baru. Lihat Jenis link "noreferrer".
Lihat postingan Membagikan resource lintas origin dengan aman untuk mengetahui informasi selengkapnya.