הכרטיסיות נהדרות, לא? הם מאפשרים למולטיטסקר בכולנו ללהטט עם מספר משימות מקוונות בו זמנית.
כרטיסיות נפוצות כל כך כעת, שכאשר תלחץ על קישור, סביר להניח שהיא תיפתח בכרטיסיה חדשה.
אם תהיתם פעם איך לעשות זאת בקישורים משלכם, הגעתם למקום הנכון.
אלמנט העוגן
כדי ליצור קישור בדף אינטרנט, עליך לעטוף אלמנט (טקסט, תמונה וכן הלאה ) באלמנט עוגן ( ) ולהגדיר את hrefהתכונה שלו לכתובת האתר שאליה תרצה לקשר.
Check out freeCodeCamp.
בדוק את freeCodeCamp.
אם תלחץ על הקישור למעלה, הדפדפן יפתח את הקישור בחלון או בכרטיסייה הנוכחיים. זוהי התנהגות ברירת המחדל בכל דפדפן.
כדי לפתוח קישור בכרטיסייה חדשה, נצטרך לבחון כמה מהתכונות האחרות של התכונות האחרות של אלמנט העוגן.
תכונת היעד
תכונה זו מספרת לדפדפן כיצד לפתוח את הקישור.
כדי לפתוח קישור בכרטיסייה חדשה, פשוט הגדר את targetהתכונה ל _blank:
Check out freeCodeCamp.
כעת כשמישהו לוחץ על הקישור, הוא ייפתח בכרטיסיה חדשה, או אולי בחלון חדש, בהתאם להגדרות הדפדפן של האדם.
חששות ביטחוניים עם target="_blank"
אני ממליץ בחום להוסיף תמיד rel="noreferrer noopener"לאלמנט העוגן בכל פעם שתשתמש targetבמאפיין:
Check out freeCodeCamp.
התוצאה היא הפלט הבא:
בדוק את freeCodeCamp.
relתכונה מגדירה את היחסים בין הדף שלך ואת כתובת האתר המקושר. הגדרת זה noopener noreferrerהיא למנוע סוג של פישינג המכונה tabnabbing.
מהי טבני טאבים?
Tabnabbing, המכונה לעיתים כרטיסייה הפוכה, הוא ניצול המשתמש בהתנהגות ברירת המחדל של הדפדפן target="_blank"כדי להשיג גישה חלקית לדף שלך דרך ה- window.objectAPI.
בכרטיסיות לשונית, דף אליו אתה מקשר יכול לגרום לדף שלך להפנות מחדש לדף כניסה מזויף. לרוב המשתמשים יהיה קשה להבחין בכך כי המיקוד יהיה בכרטיסייה שנפתחה זה עתה - ולא בכרטיסייה המקורית עם הדף שלך.
ואז כשאדם יחזור לכרטיסייה עם הדף שלך, הוא יראה במקום זאת את דף הכניסה המזויף ועשוי להזין את פרטי הכניסה שלו.
אם אתה מעוניין ללמוד עוד על אופן הפעולה של לשוניות ולמה שחקנים גרועים יכולים לעשות עם הנצל, עיין במאמר של אלכס יומשב ובזה של OWASP.
אם תרצה לראות כספתדוגמה לעבודה, עיין בדף זה ובמהדורת ה- GitHub שלו למידע נוסף על הניצול relוהתכונה.
לסיכום
קל להשתמש ב- HTML כדי לפתוח קישור בכרטיסייה חדשה. אתה רק צריך אלמנט anchor ( ) עם שלוש תכונות חשובות:
hrefהתכונה המוגדרת לכתובת של הדף שאתה רוצה קישורtargetהתכונה מוגדרת_blank, אשר אומרת לדפדפן לפתוח את הקישור בלשונית / חלון חדש, תלוי בהגדרות של הדפדפןrelהתכונה המוגדרת כדיnoreferrer noopenerלמנוע התקפות זדוניות אפשריות מהדפים אתה מקשר
שוב, הנה דוגמת העבודה HTML:
Check out freeCodeCamp.
מה שמביא לפלט הבא בדפדפן:
בדוק את freeCodeCamp.
שוב תודה שקראת. קידוד שמח.