Rel noopener
target="_blank" ile rel="noopener noreferrer" kullanımını öğrenirsin.
Dış bağlantıyı yeni sekmede aç
Bankanın yardım merkezi başka bir alan adında. Giriş sayfasından çıkarken kullanıcıyı yeni sekmede açmak istiyoruz; böylece giriş formu açık kalsın.
Bunun için çapa etiketine target="_blank" özniteliği eklenir. target, bağlantının nerede açılacağını belirler; _blank yeni bir sekme anlamına gelir.
Ancak target="_blank" tek başına güvenlik açığı doğurur. Sonraki adımda nedenini göreceğiz.
rel="noopener" neden gerekli?
Yeni sekmede açılan sayfa, eski sekmeye window.opener ile erişebilir. Kötü amaçlı bir sayfa bunu kullanıp giriş formunu gizlice değiştirebilir (buna reverse tabnabbing denir).
Bunu engellemek için rel="noopener" yazılır; opener referansını keser. rel="noreferrer" ise hedef sayfaya referrer bilgisini göndermez; gizlilik için eklenir.
Modern tarayıcılarda ikisi genellikle birlikte kullanılır: rel="noopener noreferrer".
Uygulama Harici yardım bağlantısını ekle
Önceki dersin iskeletini al. <body> içinde, yönerge paragrafından sonra bir <p> içine harici yardım bağlantısı ekle:
- href:
https://yardim.guvenlibank.example/oturum-acma - target="_blank" (yeni sekme)
- rel="noopener noreferrer" (güvenlik + gizlilik)
- Bağlantı metni: Yardım merkezi
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Güvenli Bank - Giriş</title>
</head>
<body>
<h1>Güvenli Bank</h1>
<p>Lütfen kullanıcı kodunuzla giriş yapınız.</p>
<p><a href="https://yardim.guvenlibank.example/oturum-acma" target="_blank" rel="noopener noreferrer">Yardım merkezi</a></p>
</body>
</html>Kendini test et
-
Bir <a> etiketinde target="_blank" ne yapar?
<a href="..." target="_blank">...</a>- Bağlantıyı aynı sekmede açar
- Bağlantının href değerini temizler
- Bağlantıyı yeni bir sekmede açar
- Bağlantının rel değerini sıfırlar
Cevabı göster
Bağlantıyı yeni bir sekmede açar — Doğru. _blank, bağlantının yeni sekmede açılmasını söyler.
-
Güvenli rel değerini tamamla
<a href="https://yardim.guvenlibank.example/oturum-acma" target="_blank" rel="____">Yardım merkezi</a>Cevabı göster
<a href="https://yardim.guvenlibank.example/oturum-acma" target="_blank" rel="noopener noreferrer">Yardım merkezi</a> -
rel değerini anlamıyla eşleştir
- noopener
- opener referansını keser
- noreferrer
- referrer bilgisi göndermez
- _blank
- yeni sekmede açar
- nofollow
- arama motoru izlemez