תגים קשורים למידע מטא
מאמר זה מסביר תגים הקשורים למידע מטא.
הוא מסביר את תגית <meta>, כולל נקודות הקשורות ל-SEO, עיצוב רספונסיבי, ו-Content-Security-Policy.
YouTube Video
תגים קשורים למידע מטא
תגית <meta>
1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">- תגית
<meta>מספקת מטא-נתונים למסמך HTML. המטא-נתונים אינם מוצגים על הדף אלא משמשים מנועי חיפוש ודפדפנים. תגית<meta>משמשת לתיאורי עמוד, מילות מפתח, מידע על המחבר והגדרות עיצוב רספונסיביות.
תגית <meta name="viewport">
1<meta name="viewport" content="width=device-width, initial-scale=1">- תגית
<meta name="viewport">שולטת בפריסת הדף ובקנה המידה שלו במכשירים שונים. בדרך כלל, היא משמשת בעיצוב רספונסיבי כדי להבטיח תצוגה נכונה במכשירים ניידים.
תגית <meta name="description">
1<meta name="description" content="An example webpage">- תגית
<meta name="description">משמשת לתיאור קצר של תוכן דף אינטרנט. מנועי חיפוש משתמשים בתיאור זה כדי להציג תקציר של הדף בתוצאות החיפוש.
תגית <meta name="keywords">
1<meta name="keywords" content="HTML, CSS, JavaScript">- תגית
<meta name="keywords">מספקת רשימת מילות מפתח הרלוונטיות לתוכן הדף. מנועי חיפוש משתמשים במילות מפתח אלו כדי להבין טוב יותר את תוכן הדף.
תג <meta name="author">
1<meta name="author" content="John Doe">- תג
<meta name="author">מציין את מחבר דף האינטרנט. מידע זה משמש בעיקר מנועי חיפוש וכלים לזיהוי מדויק של מחבר הדף.
תג <meta http-equiv="refresh">
1<meta http-equiv="refresh" content="5; url=https://example.com">- תג
<meta http-equiv="refresh">משמש לרענון אוטומטי של הדף או להפניה לכתובת URL אחרת לאחר זמן מוגדר. הוא שימושי לרענון הדף מחדש או להפניית המשתמש.
תג <meta http-equiv="cache-control">
1<meta http-equiv="cache-control" content="no-cache">- תג
<meta http-equiv="cache-control">משמש לשליטה בהתנהגות המטמון של דף האינטרנט. הוא יכול להגדיר האם לאחסן את הדף במטמון או לאמת אותו מחדש בגישה הבאה.
תג <meta http-equiv="expires">
1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">- תג
<meta http-equiv="expires">קובע תאריך תפוגה עבור תוכן הדף. כאשר התאריך שצוין עבר, התוכן הופך ללא עדכני, והדפדפן מתבקש להביא גרסה חדשה.
תג <meta http-equiv="X-UA-Compatible">
1<meta http-equiv="X-UA-Compatible" content="IE=edge">- תג
<meta http-equiv="X-UA-Compatible">משמש לקביעת מצב תאימות עבור Internet Explorer. תג זה מבטיח שהדפדפן ישתמש בגרסה המתאימה של מנוע הרינדור להצגת הדף.
תג <meta http-equiv="content-security-policy">
המאפיין http-equiv="content-security-policy" בתג HTML meta הוא פונקציה ליישום כללי אבטחה מסוימים בדפדפן להעלאת אבטחת דף האינטרנט. על ידי שימוש במאפיין זה, מפתחי אתרים יכולים להגדיר מדיניות לגבי טעינת משאבים וביצוע סקריפטים כדי למנוע התקפות כמו XSS (Cross-Site Scripting) והזרקת נתונים.
מהו Content-Security-Policy?
Content-Security-Policy (CSP) הוא סוג של כותרת HTTP המשמשת לשליטה על אילו משאבים חיצוניים (תמונות, סקריפטים, גיליונות סגנון וכו') דף אינטרנט יכול לטעון ואילו סוגי קוד ניתן להריץ. בדרך כלל הוא נשלח ככותרת HTTP אך ניתן גם להגדיר אותו בתוך HTML באמצעות תגית meta. שיטה זו מאפשרת להגדיר את ה-CSP בצד הלקוח במקום להגדיר כותרות בצד השרת.
לדוגמה, ניתן להגדיר את ה-CSP בתגית meta ב-HTML כך:.
1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">בדוגמה זו, המדיניות הבאה מוגדרת:
default-src 'self': באופן בסיסי, כל המשאבים נטענים רק מהמקור עצמו.img-src https://example.com: תמונות נטענות רק מ-https://example.com.script-src 'self' https://apis.google.com: סקריפטים יכולים להיות מורצים רק מהמקור עצמו או מ-https://apis.google.com.
הבדלים בין http-equiv לכותרות HTTP
בדרך כלל, Content-Security-Policy נשלח מהשרת אל הלקוח ככותרת HTTP. עם זאת, אם מגדירים אותו בצד הלקוח באמצעות תגית meta, ניתן לכתוב אותו ישירות ב-HTML.
עם זאת, ישנם כמה הבדלים חשובים בין הגדרתו ככותרת HTTP לבין הגדרתו באמצעות תגית meta:
-
עדיפות: CSP שנשלח דרך כותרות HTTP יקבל עדיפות על פני CSP המוגדר בתגית
meta. משמעות הדבר היא שאם CSP מוגדר בצד השרת, הוא לא יבוצע עקיפה על ידי תגיתmetaהמשמשת בצד הלקוח. -
תזמון היישום: CSP המוגדר דרך כותרות HTTP מיושם לפני שדף האינטרנט נטען. מצד שני, CSP המוגדר באמצעות תגית
metaמיושם כאשר ה-HTML מפורש, כך שמשאבים עשויים להיות כבר נטענים.
חוקי מדיניות זמינים ב-CSP
ב-CSP, נעשה שימוש בחוקי מדיניות שונים לצורך הגדרת מדיניות המתירה או אוסרת טעינה והרצה של משאבים מסוגים מסוימים. חוקי המדיניות הטיפוסיים כוללים את הבאים:.
- default-src: מגדיר את מדיניות המקור הבסיסית לכל המשאבים. המדיניות חלה על משאבים שלא הוגדרו על ידי חוקי מדיניות אחרים.
- script-src: מגדיר את מקור הקוד עבור JavaScript. למניעת התקפות XSS, ניתן להגביל את הטעינה של סקריפטים מאתרים חיצוניים.
- style-src: מגדיר את מקור הקוד עבור CSS. על ידי הגבלת טעינת גיליונות סגנון ממקורות חיצוניים, ניתן למנוע התקפות על סגנונות האתר שלך.
- img-src: מציין את המקור לתמונות. ניתן להגביל את טעינת התמונות ממקורות חיצוניים.
- connect-src: מציין את כתובות ה-URL המותרות עבור בקשות XMLHttpRequest וחיבורי WebSocket. דבר זה מבטיח את אבטחת התקשורת עם APIs חיצוניים וחיבורי WebSocket.
על ידי שילוב של הנחיות אלו, ניתן ליצור מדיניות מפורטת עבור המשאבים בדף האינטרנט שלך.
הגדרות CSP מעשיות לשיפור האבטחה
להלן דוגמה להגדרות CSP כדי לשפר את אבטחת האתר שלך. דבר זה עשוי להפחית את הסיכון להתקפות XSS ולדליפות מידע.
1<meta http-equiv="Content-Security-Policy"
2 content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">המדיניות הבאות מוחלות בתצורה זו:
default-src 'self': כל המשאבים נטענים רק ממקור זהה.script-src 'self' https://trusted-cdn.com: סקריפטים נטענים רק ממקור זהה או מרשת CDN מהימנה.object-src 'none': תגיתobjectאינה בשימוש. מטרת הגדרה זו היא למנוע התקפות מבוססות Flash או תוספים.style-src 'self': גיליונות סגנון נטענים רק ממקור האתר עצמו.base-uri 'self': הבסיס לכתובת ה-URL שנקבע על ידי תגית<base>מוגבל למקור האתר עצמו.form-action 'self': יעד שליחת הטופס מוגבל למקור האתר עצמו. דבר זה מפחית את הסיכון לשליחת נתוני טפסים לאתרים חיצוניים.
סיום
באמצעות השימוש ב-http-equiv="content-security-policy" להגדרת CSP בתוך HTML, ניתן לשפר את האבטחה של דף האינטרנט. CSP שמוגדר כהלכה הוא כלי חזק שמפחית את הסיכון למתקפות XSS ודליפות נתונים ומגן על אתר האינטרנט שלך.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.