محتوای جاسازی شده بهترین راه برای نگه داشتن کاربران در سایت شما است، در حالی که محتوای صفحات یا سایت های دیگر را به اشتراک می گذارید. این می تواند به اندازه یک توییت جاسازی شده باشد که به سبک و قالب توییتر نمایش داده می شود. این می تواند به اندازه یک سایت کاملاً مجزا باشد که روی سایت شما تعبیه شده است، مانند یک فروشگاه Shopify تعبیه شده که در آن بازدیدکنندگان می توانند بدون خروج از سایت شما خرید کنند.
اکنون بیش از هر زمان دیگری، مهم است که هنگام جاسازی محتوا، سایت‌های ما امن باقی بمانند.
راه های مختلفی وجود دارد که توسعه دهندگان می توانند محتوا را در یک وب سایت جاسازی کنند. رایج ترین تکنیک استفاده از <iframe> است که به شما امکان می دهد هر محتوایی را فقط با یک URL در سایت خود جاسازی کنید. از قبل می‌توان ویژگی sandbox را اضافه کرد تا یک iframe ایمن‌تر شود.
از طرف دیگر، می توانید از یک عنصر HTML پیشنهادی استفاده کنید:
-
<fencedframe>به عنوان راهی برای حفظ حریم خصوصی برای جاسازی محتوای شخص ثالث پیشنهاد شده است. -
<portal>برای انتقال بدون درز صفحه پیشنهاد شده است.
برای یادگیری نحوه بهبود امنیت محتوای تعبیه شده خود، ادامه مطلب را بخوانید.
با iframe جاسازی کنید
Iframes را می توان برای انواع موارد استفاده، مانند افزودن نقشه ها یا فرم ها به صفحه تماس و نمایش تبلیغات استفاده کرد.
<iframe src="https://example.com/maps"></iframe>
هر iframe زمینه مرور خاص خود را دارد، با سابقه جلسه و سند خاص خود. زمینه ای که iframe را تعبیه می کند به عنوان زمینه مرور والدین نامیده می شود.
محتوای شخص ثالث نمایش داده شده در iframe می تواند از طریق postMessage() با سایت اصلی تعامل داشته باشد. این به توسعه دهندگان اجازه می دهد تا مقادیر دلخواه را بین زمینه های مرور ارسال کنند. گیرنده پیام می تواند onmessage پیام شنونده رویداد برای دریافت مقادیر استفاده کند.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
امنیت با ویژگی sandbox اضافه شد
اگر محتوای مخرب در یک iframe مستقر شود، ممکن است اقدامات ناخواسته (مانند اجرای جاوا اسکریپت یا ارسال فرم) انجام شود. برای جلوگیری از این امر، ویژگی 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 نیز اعطا کرد.
<iframe src="https://example.com" allow="fullscreen"></iframe>
تعبیه با قاب های حصاردار
یک قاب حصاردار ( <fencedframe> ) یک عنصر HTML پیشنهادی برای محتوای جاسازی شده است، شبیه به iframe. برخلاف iframe، یک قاب حصاردار ارتباط با زمینه تعبیه‌شده خود را محدود می‌کند تا به قاب اجازه دسترسی به داده‌های بین سایتی را بدون اشتراک‌گذاری آن با زمینه تعبیه‌شده بدهد. به طور مشابه، داده های شخص اول در صفحه والدین را نمی توان با قاب حصاردار به اشتراک گذاشت.
<fencedframe src="https://3rd.party.example"></fencedframe>
Fenced Frames یک پیشنهاد Privacy Sandbox است که پیشنهاد می کند سایت های سطح بالا باید داده ها را پارتیشن بندی کنند. هدف بسیاری از پیشنهادات جعبه ایمنی حفظ حریم خصوصی، برآوردن موارد استفاده متقابل سایت، بدون کوکی های شخص ثالث یا مکانیسم های ردیابی دیگر است. برخی از APIهای Privacy Sandbox ممکن است نیاز به اسناد انتخابی داشته باشند تا در یک قاب محصور ارائه شوند .
به عنوان مثال، یک قاب حصاردار برای برنده مزایده تبلیغاتی FLEDGE API ایجاد می شود. FLEDGE API یک منبع مات ، یک طرح URN مستقل از مکان، که می تواند در یک قاب حصاردار ارائه شود، ارائه می دهد. منابع غیرشفاف به سایت‌ها اجازه می‌دهند تا محتوا را در سایت‌های خود نمایش دهند بدون اینکه نشانی اینترنتی منبع آگهی را برای صاحب سایت نشان دهند.
<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 ها از آن زمان منسوخ شده اند.
همچنین زمانی وجود داشت که فناوری‌های افزونه، مانند عنصر <applet> جاوا، برای پوشش سایر موارد استفاده استفاده می‌شد. بعداً با عنصر <object> جایگزین شد. هر دوی این عناصر معمولاً برای نمایش پلاگین های فلش استفاده می شدند، اما برای نمایش سایر عناصر HTML (مشابه iframe) نیز استفاده می شدند. عناصر دیگر، مانند <canvas> ، <audio> ، <video> و <svg> ، هر دو عنصر <object> و <applet> را منسوخ کرده‌اند.
اگرچه <object> و <embed> هنوز به طور رسمی منسوخ نشده اند، بهتر است از آنها اجتناب کنید، به خصوص که رفتارهای عجیب و غریبی دارند. <applet> در سال 2017 از مشخصات HTML حذف شد.
نتیجه
می توانید با استفاده از مشخصات iframe موجود، محتوا را به طور ایمن در هر وب سایتی جاسازی کنید. عناصر HTML بیشتری از جمله <fencedframe> و <portal> برای بهبود امنیت و سبک پیشنهاد شده‌اند. ما همچنان به اشتراک‌گذاری پیشرفت در پیشنهاد قاب‌های حصاردار ادامه خواهیم داد.
تصویر قهرمان توسط جکسون سو .