Saat Anda menautkan ke halaman di situs lain menggunakan atribut target="_blank"
,
situs Anda dapat mengalami masalah performa dan keamanan:
- Halaman lainnya mungkin berjalan pada proses yang sama dengan halaman Anda. Jika halaman lain menjalankan banyak JavaScript, performa halaman Anda dapat menurun.
- Halaman lain dapat mengakses objek
window
Anda dengan propertiwindow.opener
. Hal ini memungkinkan halaman lain untuk mengalihkan halaman Anda ke URL berbahaya.
Menambahkan rel="noopener"
atau rel="noreferrer"
ke link target="_blank"
Anda dapat menghindari masalah ini.
Bagaimana audit tujuan lintas origin Lighthouse gagal
Lighthouse menandai link yang tidak aman ke tujuan lintas asal:
Lighthouse menggunakan proses berikut untuk mengidentifikasi tautan sebagai tidak aman:
- Kumpulkan semua tag
<a>
yang berisi atributtarget="_blank"
tetapi bukan atributrel="noopener"
ataurel="noreferrer"
. - Memfilter link host yang sama apa pun.
Karena {i>Lighthouse<i} menyaring
tautan {i>host<i} yang sama,
ada kasus ekstrem yang harus Anda ketahui jika menangani situs yang 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 dalam hasil Lighthouse.
Cara meningkatkan performa situs dan mencegah kerentanan keamanan
Tambahkan rel="noopener"
atau rel="noreferrer"
ke setiap tautan yang
diidentifikasi dalam laporan Lighthouse Anda.
Secara umum, saat 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 agar tidak dapat untuk 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 Berbagi resource lintas asal dengan aman untuk informasi lebih lanjut.