HTML geliştirme yaparken bir linki yeni sayfada açılmasını istediğimizde linke attribute olarak target="_blank" ekleriz.
<a href="..." target="_blank">Link</a>
React geliştirme yaparken eğer yukarıdaki kodu kullanırsanız, bunu rel="noopener noreferrer" ile beraber kullanmanız gerektiği konusunda konsolda bir uyarı görürsünüz.
Bunun sebebi, target="_blank"ın ortaya çıkardığı güvenlik açığıdır. Bağlandığınız sayfa, geldiğiniz siteye erişim sağlayabiliyor.
Test etmek için Mathias Bynens'in konuda hakkında yazmış olduğu makaleyi inceleyin.
Click me!!1 (same-origin) ve Click me!!1 (cross-origin) linklerine gittiğinizde açılan sayfa bizi "Why don’t you go back to the previous tab? (Neden önceki sekmeye geri dönmüyorsun?)" yazısıyla karşılıyor. Önceki sayfaya gittiğimizde ise daha önce sayfada olmayan şu yazı ile karşılaşıyoruz;
Aynı makalede Click me!!1 (now with rel=noopener) veya Click me!!1 (now with rel=noreferrer-based workaround) linklerine girdiğimizde ise karşımıza "The previous tab is safe and intact. window.opener was null; mischief not managed! (Önceki sekme güvenli, windowopener null olduğu için yaramazlık yönetilmedi)" uyarısı çıkıyor.
Güvenlik Sorununun Çözümü
Sayfaların window.openerı kötüye kullanımını önlemek için linke rel="noreferrer noopener" eklemek gerekiyor.
<a href="..." target="_blank" rel="noreferrer noopener">Link</a>
nda da target="_blank" kullanırken window.opener API'sinin kötüye kullanımını önlemek için rel="noreferrer noopener" ile birlikte kullanmamız gerektiği konusunda uyarıyor.
Firefox 79+ sürümü ile sadece target kullansak bile, tarayıcı güvenlik sorununu ortadan kaldırmak için noreferrer noopener kısmını kendisi ekliyor. Genel olarak tarayıcı desteği ise oldukça iyi görünüyor;
