הדרך הכי טובה לשמור על המשתמשים באתר שלכם ולשתף תוכן מדפים או מאתרים אחרים היא להטמיע תוכן. הגודל יכול להיות קטן כמו ציוץ מוטמע, שמוצג בסגנון ובפורמט של טוויטר. הוא יכול להיות גדול כמו אתר נפרד לגמרי שמוטמע באתר שלכם, כמו חנות Shopify מוטמעת שבה המבקרים יכולים לבצע רכישה בלי לצאת מהאתר שלכם.
עכשיו יותר מתמיד, חשוב שהאתרים שלנו יישארו מאובטחים כשאנחנו מטמיעים תוכן.
יש כמה דרכים שבהן מפתחים יכולים להטמיע תוכן באתר. הטכניקה הנפוצה ביותר היא שימוש ב-<iframe>, שמאפשר להטמיע כל תוכן באתר באמצעות כתובת URL בלבד. כבר עכשיו אפשר להוסיף את מאפיין sandbox כדי להפוך iframe לבטוח יותר.
אפשרות אחרת היא להשתמש ברכיב HTML מוצע:
-
<fencedframe>מוצע כדרך לשמירה על הפרטיות בהטמעת תוכן של צד שלישי. -
<portal>מוצע כדי שהמעברים בין הדפים יהיו חלקים יותר.
בהמשך המאמר מוסבר איך לשפר את האבטחה של התוכן המוטמע.
הטמעה באמצעות iframe
אפשר להשתמש במסגרות iframe לכל מיני תרחישי שימוש, כמו הוספת מפות או טפסים לדף יצירת קשר והצגת מודעות.
<iframe src="https://example.com/maps"></iframe>
לכל iframe יש הקשר גלישה משלו, עם היסטוריית סשנים משלו ומסמך משלו. ההקשר שבו מוטמע ה-iframe נקרא הקשר הגלישה הורה.
תוכן של צד שלישי שמוצג ב-iframe יכול ליצור אינטראקציה עם אתר האב באמצעות postMessage(). כך מפתחים יכולים לשלוח ערכים שרירותיים בין הקשרים של הגלישה. מקבל ההודעה יכול להשתמש ב-event listener onmessage
כדי לקבל את הערכים.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
אבטחה נוספת באמצעות המאפיין sandbox
אם תוכן זדוני מוטמע ב-iframe, יכול להיות שיתבצעו פעולות לא מכוונות (כמו הפעלת JavaScript או שליחת טופס).
כדי למנוע את זה, המאפיין sandbox מגביל את ממשקי ה-API שניתנים להפעלה ב-iframe ומשבית תכונות שעלולות להיות מזיקות.
<iframe src="https://example.com" sandbox></iframe>
יכול להיות שב-Sandbox לא יהיו זמינים ממשקי API מסוימים שחשובים לתוכן המוטמע שלכם. כדי לאפשר API מושבת, אפשר להוסיף באופן מפורש ארגומנט למאפיין sandbox.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
יש כמה ערכים אפשריים למאפיין sandbox, כולל allow-forms, allow-same-origin, allow-popups ועוד.
מדיניות ההרשאות
ככל שפותחו תכונות חזקות יותר ויותר לאינטרנט, נוצרו כללי מדיניות הרשאות כדי לנהל את ההרשאות לכל התכונות האלה. אפשר להחיל מדיניות הרשאות על אתר אב ועל תוכן של iframe. אפשר להעניק לאיפְרֵים את ההרשאות שניתנו לאתר האב באמצעות המאפיין allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
הטמעה באמצעות מסגרות בלי שיתוף נתונים
מסגרת מגודרת (<fencedframe>) היא אלמנט HTML מוצע לתוכן מוטמע, בדומה ל-iframe. בניגוד ל-iframe, fenced frame מגביל את התקשורת עם הקשר ההטמעה שלו כדי לאפשר ל-frame גישה לנתונים מאתרים שונים בלי לשתף אותם עם הקשר ההטמעה. באופן דומה, אי אפשר לשתף נתונים מאינטראקציה ישירה בדף ההורה עם ה-Fenced Frame.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames היא הצעה לארגז החול לפרטיות שבה מוצע לחלק את הנתונים באתרים ברמה העליונה. הרבה מההצעות של ארגז החול לפרטיות נועדו לתת מענה לתרחישי שימוש באתרים שונים, בלי קובצי Cookie של צד שלישי או מנגנוני מעקב אחרים. יכול להיות שממשקי Privacy Sandbox API מסוימים ידרשו עיבוד של מסמכים מסוימים בתוך fenced frame.
לדוגמה, ייווצר fenced frame עבור המודעה שזכתה במכרז של FLEDGE API. FLEDGE API יספק מקור אטום, סכימת URN שלא תלויה במיקום, שאפשר להציג במסגרת בלי שיתוף נתונים. מקורות אטומים מאפשרים לאתרים להציג תוכן באתרים שלהם בלי לחשוף את כתובת ה-URL של מקור המודעה לבעל האתר.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
בסופו של דבר, fenced frames לא יחליפו את ה-iframes. לא תצטרכו להשתמש בהם. הוצעו מסגרות מגודרות כדי ליצור מסגרת פרטית יותר לשימוש במקרים שבהם צריך להציג נתונים ממחיצות שונות ברמה העליונה באותו דף.
הטמעה באמצעות פורטלים
Portal (<portal>) הוא רכיב HTML מוצע עם הקשר גלישה עצמאי, שיכול לשפר את חוויית המעבר בין דפים. פורטלים מטמיעים תוכן כמו iframe, אבל המשתמש לא יכול לגשת לקוד של הפורטל. פורטל הוא לצפייה בלבד, ומשתמשים לא יכולים ליצור איתו אינטראקציה.
פורטלים מציעים את המורכבות הנמוכה של אפליקציה מרובת דפים עם המעברים החלקים של אפליקציה בדף יחיד. המעברים האלה יכולים להיות מונפשים, והם מחליפים במהירות את התוכן בחלון הדפדפן.
<portal src="https://example.com/"></portal>
מפרט הפורטל עדיין נמצא בשלבי פיתוח מוקדמים.
רכיבי HTML אחרים שמשמשים להטמעה
במהלך ההיסטוריה של האינטרנט, הוצעו מספר רכיבי HTML ונוצרו ממשקי API להטמעת תוכן. לפני זמן מה, היה נפוץ ליצור אתרים עם כמה רכיבי <frame> ורכיב <frameset>. באתרים עם כמה רכיבי <frameset>, כתובת ה-URL של דף האב מוצגת בסרגל הכתובות, ללא קשר למקור של המסגרות הרבות. כך היה קשה לשתף קישורים לתוכן באתר. ממשקי ה-API האלה הוצאו משימוש.
היה גם זמן שבו השתמשו בטכנולוגיות של תוספים, כמו רכיב Java <applet>, כדי לכסות תרחישי שימוש אחרים. בהמשך הוא הוחלף באלמנט <object>. שני האלמנטים האלה שימשו בדרך כלל להצגת תוספים של Flash, אבל הם שימשו גם להצגת אלמנטים אחרים של HTML (בדומה ל-iframe).
רכיבים אחרים, כמו <canvas>, <audio>, <video> ו-<svg>, הפכו את הרכיבים <object> ו-<applet> למיושנים.
למרות שהשימוש ב-<object> וב-<embed> עדיין לא הוצא משימוש באופן רשמי, מומלץ להימנע מהם, במיוחד בגלל התנהגויות מוזרות מסוימות.
<applet> הוסר ממפרט ה-HTML בשנת 2017.
סיכום
אתם יכולים להטמיע תוכן באופן מאובטח בכל אתר באמצעות מפרט ה-iframe הקיים. הוצעו עוד רכיבי HTML, כולל <fencedframe> ו-<portal>, לשיפור האבטחה והסגנון. נמשיך לעדכן אתכם על ההתקדמות בנושא הצעת המסגרות המוגבלות.