כשמקשרים לדף באתר אחר באמצעות המאפיין target="_blank", יכולות להתעורר בעיות בביצועים ובאבטחה של האתר:
- יכול להיות שהדף השני יפעל באותו תהליך כמו הדף שלכם. אם בדף השני מופעל הרבה JavaScript, יכול להיות שהביצועים של הדף שלכם ייפגעו.
- הדף השני יכול לגשת לאובייקט
windowבאמצעות המאפייןwindow.opener. יכול להיות שהדף האחר יפנה את הדף שלכם לכתובת URL זדונית.
כדי למנוע את הבעיות האלה, צריך להוסיף rel="noopener" או rel="noreferrer"
לקישורי target="_blank".
איך הביקורת של Lighthouse על יעדים חוצי-מקורות נכשלת
Lighthouse מסמן קישורים לא בטוחים ליעדים ממקורות שונים:
כדי לזהות קישורים כלא בטוחים, Lighthouse משתמש בתהליך הבא:
- אוספים את כל התגים
<a>שמכילים את המאפייןtarget="_blank"אבל לא את המאפייניםrel="noopener"אוrel="noreferrer". - מסננים את כל הקישורים לאותו מארח.
מכיוון ש-Lighthouse מסנן קישורים באותו מארח, יש מקרה קצה שצריך להיזהר ממנו כשעובדים באתר גדול. אם דף אחד מכיל target="_blank" קישור לדף אחר באתר בלי להשתמש ב-rel="noopener", ההשלכות על הביצועים של הביקורת הזו עדיין רלוונטיות.
עם זאת, הקישורים האלה לא יופיעו בתוצאות של Lighthouse.
שיפור הביצועים של האתר ומניעת פגיעויות באבטחה
מוסיפים rel="noopener" או rel="noreferrer"
לכל קישור שזוהה בדוח Lighthouse.
באופן כללי, כשמשתמשים ב-target="_blank", תמיד צריך להוסיף rel="noopener" או rel="noreferrer":
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
-
rel="noopener"מונע מהדף החדש לגשת למאפייןwindow.openerומבטיח שהוא יפעל בתהליך נפרד. rel="noreferrer"יש לה אותה השפעה, והיא גם מונעת את שליחת הכותרתRefererלדף החדש.
מידע נוסף זמין במאמר שיתוף משאבים בין מקורות בצורה בטוחה.