תוכן מוטמע הוא הדרך הטובה ביותר להשאיר את המשתמשים באתר, ובמקביל לשתף תוכן מדפים או מאתרים אחרים. הוא יכול להיות קטן כמו ציוץ מוטמע, שמוצג בסגנון ובפורמט של טוויטר. הוא יכול להיות גדול כמו אתר נפרד לגמרי שמוטמע באתר שלכם, למשל חנות 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. את ההרשאות שניתנות לאתר הורה אפשר לתת גם ל-iframe, באמצעות המאפיין allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
הטמעה באמצעות פריימים ללא שיתוף נתונים
מסגרת מוקפת (<fencedframe>) היא הצעה לאלמנט HTML לתוכן מוטמע, בדומה ל-iframe. בניגוד ל-iframe, מסגרת מגודרת מגבילה את התקשורת עם הקשר ההטמעה שלה, כדי לאפשר למסגרת גישה לנתונים מאתרים שונים בלי לשתף אותם עם הקשר ההטמעה. באופן דומה, לא ניתן לשתף נתונים מאינטראקציה ישירה בדף של ההורה עם המסגרת הגודרת.
<fencedframe src="https://3rd.party.example"></fencedframe>
'מסגרות מגודרות' היא הצעה לארגז החול לפרטיות, שמציעה לאתרים ברמה העליונה לפצל את הנתונים. רבים מההצעות של ארגז החול לפרטיות נועדו לענות על מקרי שימוש באתרים שונים, בלי קובצי cookie של צד שלישי או מנגנוני מעקב אחרים. יכול להיות שממשקי API מסוימים של ארגז החול לפרטיות ידרשו עיבוד של מסמכים נבחרים בתוך מסגרת מגודר.
לדוגמה, המערכת תיצור מסגרת מוקפת לזוכה במכרז הפרסום של FLEDGE API. FLEDGE API יספק מקור אטום, סכימה של URN שאינה תלויה במיקום, שאפשר להציג בתוך מסגרת מגודר. מקורות מוצפנים מאפשרים לאתרים להציג תוכן באתרים שלהם בלי לחשוף את כתובת ה-URL של מקור המודעות לבעל האתר.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
בסופו של דבר, מסגרות מגודרות לא יחליפו את iframe. לא תצטרכו להשתמש בהם. מוצע להשתמש במסגרות מגודרות כדי ליצור מסגרת פרטית יותר לשימוש, כשצריך להציג באותו דף נתונים ממחיצות שונות ברמה העליונה.
הטמעה באמצעות פורטלים
Portal (<portal>) הוא רכיב HTML מוצע עם הקשר גלישה עצמאי, שיכול לשפר את חוויית מעבר הדף. בפורטלים מוטמע תוכן כמו iframe, אבל למשתמש אין גישה לקוד של הפורטל. פורטל הוא לתצוגה בלבד, והמשתמשים לא יכולים לבצע בו פעולות.
פורטלים משלבים את המורכבות הנמוכה של אפליקציה בכמה דפים עם המעברים החלקים של אפליקציה בדף יחיד. ניתן להנפיש את המעברים האלה, ולהחליף במהירות את התוכן בחלון הדפדפן.
<portal src="https://example.com/"></portal>
מפרט הפורטל עדיין נמצא בשלבים המוקדמים של הפיתוח.
רכיבי HTML אחרים המשמשים להטמעות
במהלך ההיסטוריה של האינטרנט, הוצעו כמה רכיבי HTML ו-APIs נוצרו כדי להטמיע תוכן. במשך תקופה מסוימת, היינו יוצרים אתרים עם מספר רכיבים של <frame> ורכיבים מסוג <frameset>. אתרים עם מספר רכיבי <frameset> הציגו את כתובת ה-URL של דף ההורה בסרגל הכתובות, ללא קשר למקור של המסגרות הנפרדות הרבות. לכן היה קשה לשתף קישורים לתוכן באתר. ממשקי ה-API האלה הוצאו משימוש.
בעבר, טכנולוגיות של יישומי פלאגין, כמו הרכיב <applet> של Java, שימשו גם לתרחישי שימוש אחרים. מאוחר יותר הוא הוחלף על ידי האלמנט <object>. שני הרכיבים האלה שימשו בדרך כלל להצגת יישומי פלאגין של Flash, אבל הם שימשו גם להצגת רכיבי HTML אחרים (בדומה ל-iframe).
רכיבים אחרים, כמו <canvas>, <audio>, <video> ו-<svg>, הובילו לכך שרכיבי <object> ו-<applet> הפכו ללא רלוונטיים.
למרות שעדיין לא הוצאנו משימוש באופן רשמי את <object> ואת <embed>, מומלץ להימנע מהם, במיוחד כי יש להם התנהגויות מוזרות.
<applet> הוסר מפרטי HTML בשנת 2017.
סיכום
אפשר להטמיע תוכן באופן מאובטח בכל אתר באמצעות מפרט ה-iframe הקיים. הוצע להוסיף עוד רכיבי HTML, כולל <fencedframe> ו-<portal>, כדי לשפר את האבטחה והסגנון. אנחנו נמשיך לעדכן את ההתקדמות של ההצעה של Fenced Frames עם התקדמותה.