Link ke tujuan lintas asal tidak aman

Saat Anda menautkan ke halaman di situs lain menggunakan atribut target="_blank", Anda dapat mengekspos situs Anda ke masalah performa dan keamanan:

  • Halaman lain mungkin berjalan pada proses yang sama dengan halaman Anda. Jika halaman lain menjalankan banyak JavaScript, performa halaman Anda mungkin terpengaruh.
  • Halaman lain dapat mengakses objek window Anda dengan properti window.opener. Hal ini dapat memungkinkan halaman lain mengalihkan halaman Anda ke URL berbahaya.

Menambahkan rel="noopener" atau rel="noreferrer" ke link target="_blank" Anda akan menghindari masalah ini.

Penyebab kegagalan audit tujuan lintas asal Lighthouse

Lighthouse menandai link yang tidak aman ke tujuan lintas asal:

Audit Lighthouse yang menampilkan link tidak aman ke tujuan lintas asal.

Lighthouse menggunakan proses berikut untuk mengidentifikasi link sebagai tidak aman:

  1. Kumpulkan semua tag <a> yang berisi atribut target="_blank", tetapi tidak berisi atribut rel="noopener" atau rel="noreferrer".
  2. Menyaring link host yang sama.

Karena Lighthouse memfilter link host yang sama, ada kasus ekstrem yang harus Anda waspadai saat mengerjakan situs besar. Jika satu halaman berisi link target="_blank" ke halaman lain di situs Anda tanpa menggunakan rel="noopener", implikasi performa dari audit ini tetap berlaku. Namun, Anda tidak akan melihat link ini di hasil Lighthouse.

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 properti window.opener dan memastikan halaman tersebut berjalan dalam proses terpisah.
  • rel="noreferrer" memiliki efek yang sama dan juga mencegah header Referer dikirim ke halaman baru.

Baca Membagikan resource lintas origin dengan aman untuk mengetahui informasi selengkapnya.

Resource