תוכן מוטמע הוא הדרך הטובה ביותר להשאיר את המשתמשים באתר ולשתף תוכן מדפים או מאתרים אחרים. הוא יכול להיות קטן כמו ציוץ מוטמע, שמוצג בסגנון ובפורמט של Twitter. האתר יכול להיות גדול כמו אתר נפרד לגמרי שמוטמע באתר שלכם, כמו חנות מוטמעת ב-Shopify, שבה המבקרים יכולים לבצע רכישה בלי לצאת מהאתר.
עכשיו, יותר מתמיד, חשוב שהאתרים שלנו יישארו מאובטחים כשאנחנו מטמיעים תוכן.
יש כמה דרכים שבהן מפתחים יכולים להטמיע תוכן באתר. השיטה הנפוצה ביותר היא להשתמש ב-<iframe>, שמאפשר להטמיע תוכן באתר באמצעות כתובת URL בלבד. כבר אפשר להוסיף את המאפיין sandbox כדי לשפר את האבטחה של iframe.
לחלופין, אפשר להשתמש ברכיב HTML מוצע:
- מוצע
<fencedframe>כאמצעי להטמעת תוכן של צד שלישי תוך שמירה על הפרטיות. <portal>מוצע כדי לאפשר מעברים חלקים יותר בין דפים.
בהמשך מוסבר איך לשפר את האבטחה של התוכן המוטמע.
הטמעה באמצעות iframes
אפשר להשתמש במסגרות iframe לכל סוג של שימוש, כמו הוספת מפות או טפסים לדף ליצירת קשר והצגת מודעות.
<iframe src="https://example.com/maps"></iframe>
לכל iframe יש הקשר גלישה משלו, עם היסטוריית סשנים ומסמך משלו. ההקשר שבו מוטמע ה-iframe נקרא הקשר הגלישה parent.
תוכן של צד שלישי שמוצג ב-iframe יכול לקיים אינטראקציה עם אתר ההורה באמצעות postMessage(). כך מפתחים יכולים לשלוח ערכים שרירותיים בין הקשרי גלישה. מקבל ההודעות יכול להשתמש ב-onmessage event listener על מנת לקבל את הערכים.
// 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>
ייתכן שממשקי API מסוימים לא יהיו זמינים בגלל Sandbox, שהם חשובים לתוכן המוטמע שלכם. כדי לאפשר API מושבת, אפשר להוסיף ארגומנט למאפיין של ארגז החול באופן מפורש.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
יש כמה ערכים אפשריים למפרט של sandbox, כולל allow-forms, allow-same-origin, allow-popups ועוד.
מדיניות ההרשאות
מדיניות הרשאות נוצרה כדי לנהל את ההרשאות של כולם, במקביל לפיתוח של תכונות שעוצמתן הולכת וגדלה. אפשר להחיל מדיניות הרשאות על אתר הורה ועל תוכן ב-iframe. אפשר להעניק את ההרשאות שניתנות לאתר הורה גם ל-iframe באמצעות המאפיין allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
הטמעה עם מסגרות מגודרות
מסגרת מגודרת (<fencedframe>) היא רכיב HTML מוצע לתוכן מוטמע, בדומה ל-iframe. בשונה מ-iframe, מסגרת מגודרת מגבילה את התקשורת עם ההקשר של ההטמעה כדי לאפשר למסגרת לגשת לנתונים מאתרים שונים, בלי לשתף אותם בהקשר של ההטמעה. באופן דומה, אי אפשר לשתף נתונים מאינטראקציה ישירה (First-Party) בדף של ההורה עם המסגרת המגודרת.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames היא הצעה לארגז חול לפרטיות שבמסגרתה אתרים ברמה העליונה צריכים לחלק את הנתונים למחיצות. רבות מההצעות של ארגז החול לפרטיות נועדו לתת מענה לתרחישים שונים לדוגמה בכל האתרים, ללא קובצי cookie של צד שלישי או מנגנוני מעקב אחרים. כדי לעבד בתוך מסגרת מגודרת, ממשקי API מסוימים של ארגז החול לפרטיות עשויים לחייב מסמכים נבחרים.
לדוגמה, תיווצר מסגרת מגודרת עבור הזוכה במכרז המודעות של FLEDGE API. ב-FLEDGE API יסופק מקור אטום, סכמה של URN שאינה תלויה במיקום, שיכולה לעבד אותה במסגרת עם גבולות וירטואליים. מקורות אטומים מאפשרים לאתרים להציג תוכן באתרים שלהם בלי לחשוף את כתובת ה-URL של מקור המודעות לבעלי האתר.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
בסופו של דבר, פריימים מגודרים לא יחליפו מסגרות iframe. לא תצטרכו להשתמש בהם. כשמשתמשים בפריימים מגודרים, המערכת מציעה מסגרת פרטית יותר לשימוש כשצריך להציג נתונים ממחיצות שונות ברמה העליונה באותו הדף.
הטמעה באמצעות פורטלים
פורטל (<portal>) הוא רכיב מוצע של HTML עם הקשר גלישה בלתי תלוי, שיכול לשפר את חוויית העברת הדפים. פורטלים מטמיעים תוכן כמו iframe, אבל המשתמש לא יכול לגשת לקוד של הפורטל. הפורטל הוא לתצוגה בלבד והמשתמשים לא יכולים לתקשר איתו.
פורטלים מציעים את המורכבות הנמוכה של אפליקציות מרובות דפים, עם מעברים חלקים של אפליקציה עם דף יחיד. ניתן ליצור אנימציה של מעברים אלה, ולהחליף במהירות את התוכן בחלון הדפדפן.
<portal src="https://example.com/"></portal>
מפרט הפורטל עדיין נמצא בשלבי הפיתוח המוקדמים.
רכיבי HTML אחרים המשמשים להטמעות
לאורך היסטוריית האתרים, הוצעו מספר רכיבי HTML וממשקי API שנוצרו כדי להטמיע תוכן. במשך תקופה מסוימת היה נהוג ליצור אתרים עם כמה רכיבי <frame> ו-<frameset>. אתרים עם מספר רכיבי <frameset> מציגים את כתובת ה-URL של דף ההורה בסרגל הכתובות, ללא קשר למקור של המסגרות הרבות. הדבר הקשה על שיתוף קישורים לתוכן בתוך האתר. ממשקי ה-API האלה הוצאו משימוש מאז.
היה גם זמן שבו טכנולוגיות פלאגין, כמו אלמנט Java <applet>, שימשו לכיסוי תרחישים אחרים. רכיב זה הוחלף ברכיב <object>. שני הרכיבים האלו שימשו בדרך כלל להצגת יישומי פלאגין של Flash, אבל הם שימשו גם להצגת רכיבי HTML אחרים (בדומה ל-iframes).
רכיבים אחרים, כמו <canvas>, <audio>, <video> ו-<svg> עיבדו את הרכיבים <object> וגם את רכיבי <applet> שיצאו משימוש.
למרות ש-<object> ו-<embed> עדיין לא הוצאו משימוש באופן רשמי, עדיף להימנע מהם, במיוחד כי יש להם כמה התנהגויות מוזרות.
<applet> הוסר ממפרט ה-HTML בשנת 2017.
סיכום
אפשר להטמיע תוכן באופן מאובטח בכל אתר באמצעות מפרט ה-iframe הקיים. הוצעו רכיבי HTML נוספים, כולל <fencedframe> ו-<portal>, לשיפור האבטחה והסגנון. נמשיך לשתף את ההתקדמות בהצעה של Fenced Frames במקביל להתקדמות שלה.
תמונה ראשית (Hero) של Jackson So.