مرجع عناصر HTML : عنصر <iframe>
عنصر HTML <iframe> یک زمینه مرور تو در تو را نشان میدهد که صفحه HTML دیگری را در صفحه فعلی جاسازی میکند.
هر زمینه مرور جاسازیشده، سند مخصوص به خود را دارد و امکان پیمایش URL را فراهم میکند. پیمایشهای هر زمینه مرور جاسازیشده، به صورت خطی در تاریخچه جلسه بالاترین زمینه مرور قرار میگیرند. زمینه مرور که سایر زمینهها را جاسازی میکند، زمینه مرور والد نامیده میشود. بالاترین زمینه مرور - زمینهای که والد ندارد - معمولاً پنجره مرورگر است که توسط شیء Window نمایش داده میشود.
از آنجا که هر زمینه مرور، یک محیط سند کامل است، هر در یک صفحه به حافظه و سایر منابع محاسباتی افزایش یافته نیاز دارد. اگرچه از لحاظ تئوری میتوانید از هر تعداد که دوست دارید استفاده کنید، اما مشکلات عملکرد را بررسی کنید.
این عنصر شامل ویژگیهای سراسری است.
allow
یک سیاست مجوز برای مشخص میکند. این سیاست، ویژگیهای موجود برای (مثلاً دسترسی به میکروفون، دوربین، باتری، اشتراکگذاری وب و غیره) را بر اساس مبدا درخواست تعریف میکند.
یک سیاست مجوز مشخص شده توسط ویژگی allow، محدودیت بیشتری را علاوه بر سیاست مشخص شده در سربرگ سیاست-مجوزها اعمال میکند. جایگزین آن نمیشود.
allowfullscreen
اگر بتواند با فراخوانی متد حالت تمام صفحه را فعال کند، روی true تنظیم میشود.
این ویژگی یک ویژگی قدیمی در نظر گرفته میشود و به صورت تعریف مجدد میشود.
allowpaymentrequest
اگر یک با مبدا متقابل باید مجاز به فراخوانی API درخواست پرداخت باشد، روی true تنظیم میشود.
این ویژگی یک ویژگی قدیمی در نظر گرفته میشود و به صورت تعریف مجدد میشود.
browsingtopics
یک ویژگی بولی که در صورت وجود، مشخص میکند که موضوعات انتخاب شده برای کاربر فعلی باید با درخواست منبع ارسال شوند. برای جزئیات بیشتر به استفاده از API موضوعات مراجعه کنید.
credentialless
برای اینکه بدون اعتبار شود، روی true تنظیم شود، به این معنی که محتوای آن در یک زمینه جدید و زودگذر بارگذاری میشود. به شبکه، کوکیها و دادههای ذخیرهسازی مرتبط با مبدأ خود دسترسی ندارد. از یک زمینه جدید محلی در طول عمر سند سطح بالا استفاده میکند. در عوض، قوانین جاسازی Cross-Origin-Embedder-Policy (COEP) میتوانند برداشته شوند، بنابراین اسنادی که COEP روی آنها تنظیم شده است میتوانند اسناد شخص ثالثی را که این قوانین را ندارند، جاسازی کنند.
csp
یک سیاست امنیتی محتوا که برای منبع جاسازی شده اعمال میشود.
height
ارتفاع قاب بر حسب پیکسل CSS. مقدار پیشفرض ۱۵۰ است.
loading
نشان میدهد که مرورگر چه زمانی باید iframe را بارگذاری کند:
- eager
iframe را بلافاصله پس از بارگذاری صفحه بارگذاری کنید (این مقدار پیشفرض است).
- lazy
بارگذاری iframe را تا زمانی که به فاصله محاسبهشدهای از نمای بصری، همانطور که توسط مرورگر تعریف شده است، برسد، به تعویق بیندازید. هدف این است که از استفاده از پهنای باند شبکه و ذخیرهسازی مورد نیاز برای دریافت فریم تا زمانی که مرورگر به طور معقول مطمئن شود که به آن نیاز خواهد بود، جلوگیری شود. این امر عملکرد و هزینه را در اکثر موارد استفاده معمول، به ویژه با کاهش زمان بارگذاری اولیه صفحه، بهبود میبخشد.
بارگیری فقط زمانی به تعویق میافتد که جاوا اسکریپت فعال باشد. این یک اقدام ضد ردیابی است، زیرا اگر یک عامل کاربر از بارگذاری تنبل هنگام غیرفعال بودن اسکریپت پشتیبانی کند، همچنان میتوان موقعیت تقریبی پیمایش کاربر را در طول یک جلسه ردیابی کرد، با قرار دادن استراتژیک iframeها در نشانهگذاری صفحه به گونهای که سرور بتواند تعداد iframeهای درخواستی و زمان آنها را ردیابی کند.
name
یک نام قابل هدفگیری برای زمینه مرور تعبیهشده. این میتواند در ویژگی target عناصر این ویژگیها منسوخ شدهاند و ممکن است دیگر توسط همه مرورگرها پشتیبانی نشوند. شما نباید از آنها در محتوای جدید استفاده کنید و سعی کنید آنها را از محتوای موجود حذف کنید.
align
ترازبندی این عنصر با توجه به متن اطراف.
frameborder
مقدار ۱ (پیشفرض) یک حاشیه در اطراف این قاب رسم میکند. مقدار ۰ حاشیه اطراف این قاب را حذف میکند، اما در عوض باید از ویژگی border در CSS برای کنترل حاشیههای استفاده کنید.
longdesc
آدرس اینترنتی (URL) از توضیحات طولانی محتوای قاب. به دلیل سوءاستفاده گسترده، این برای مرورگرهای غیر بصری مفید نیست.
marginheight
میزان فضای بین محتوای قاب و حاشیههای بالا و پایین آن (برحسب پیکسل)
marginwidth
میزان فضای بین محتوای قاب و حاشیههای چپ و راست آن (برحسب پیکسل)
scrolling
نشان میدهد چه زمانی مرورگر باید یک نوار اسکرول برای قاب فراهم کند:
- auto
فقط زمانی که محتوای قاب بزرگتر از ابعاد آن باشد.
- yes
همیشه یک نوار اسکرول نشان داده شود.
- no
هرگز نوار پیمایش را نشان ندهید.
فریمهای درونخطی، مانند عناصر ، در شبه آرایه window.frames گنجانده شدهاند.
با شیء DOM ، اسکریپتها میتوانند از طریق ویژگی contentWindow به شیء پنجره منبع قاببندی شده دسترسی پیدا کنند. ویژگی contentDocument به سندی که درون قرار دارد، همانند ، اشاره دارد.
از درون یک فریم، یک اسکریپت میتواند با به پنجره والد خود ارجاع دهد.
دسترسی اسکریپت به محتوای یک فریم تابع سیاست same-origin است. اگر اسکریپت از مبدا متفاوتی بارگذاری شده باشد، اسکریپتها نمیتوانند به اکثر ویژگیهای سایر اشیاء پنجره دسترسی پیدا کنند، از جمله اسکریپتهای درون یک فریم که به والد فریم دسترسی دارند. ارتباط بین مبدایی را میتوان با استفاده از برقرار کرد.
ناوبری بالا در فریمهای با مبدا متقابل
اسکریپتهایی که در یک فریم با مبدا یکسان اجرا میشوند میتوانند به ویژگی دسترسی پیدا کنند و را برای هدایت صفحه سطح بالا به مکان جدید تنظیم کنند. این رفتار "راهنمایی بالا" نامیده میشود.
یک فریم با مبدا متقابل فقط در صورتی میتواند صفحه سطح بالا را با استفاده از top هدایت کند که فریم دارای فعالسازی sticky باشد. اگر ناوبری بالا مسدود شده باشد، مرورگرها ممکن است یا از کاربر اجازه هدایت بخواهند یا خطا را در کنسول توسعهدهنده (یا هر دو) گزارش دهند. این محدودیت توسط مرورگرها مداخله framebusting نامیده میشود. این بدان معناست که یک فریم با مبدا متقابل نمیتواند بلافاصله صفحه سطح بالا را هدایت کند - کاربر باید قبلاً با فریم تعامل داشته باشد یا اجازه هدایت را دریافت کرده باشد.
یک فریم sandbox شده تمام ناوبریهای بالا را مسدود میکند مگر اینکه مقادیر ویژگی sandbox روی allow-top-navigation یا allow-top-navigation-by-user-activation تنظیم شده باشند. توجه داشته باشید که مجوزهای ناوبری بالا به ارث برده میشوند، بنابراین یک فریم تو در تو فقط در صورتی میتواند ناوبری بالا را انجام دهد که فریمهای والد آن نیز مجاز به این کار باشند.
از آنجایی که یک عنصر جایگزین شده است، میتوان موقعیت سند جاسازی شده در کادر آن را با استفاده از ویژگی object-position تنظیم کرد.
ویژگی object-fit هیچ تاثیری بر عناصر ندارد.
رفتار رویدادهای error و load
رویدادهای error و load که روی ها اجرا میشوند، میتوانند برای بررسی فضای URL سرورهای HTTP شبکه محلی مورد استفاده قرار گیرند. بنابراین، به عنوان یک اقدام احتیاطی امنیتی، مرورگرها رویداد خطا را روی ها اجرا نمیکنند و رویداد بارگذاری همیشه فعال میشود، حتی اگر محتوای بارگذاری نشود.
افرادی که با فناوری کمکی مانند صفحهخوان پیمایش میکنند، میتوانند از ویژگی عنوان در برای برچسبگذاری محتوای آن استفاده کنند. مقدار عنوان باید به طور خلاصه محتوای جاسازی شده را توصیف کند:
بدون این عنوان، آنها باید به بروند تا محتوای جاسازیشدهی آن را تعیین کنند. این تغییر زمینه میتواند گیجکننده و زمانبر باشد، بهخصوص برای صفحاتی که های متعددی دارند و/یا اگر جاسازیها حاوی محتوای تعاملی مانند ویدیو یا صدا باشند.
این مثال صفحه را در یک iframe جاسازی میکند. این یک مورد استفاده رایج از iframeها است: جاسازی محتوا از سایتی دیگر.
جاسازی کد منبع در <iframe>
این مثال مستقیماً کد منبع را در یک iframe رندر میکند. این میتواند به عنوان تکنیکی برای جلوگیری از تزریق اسکریپت هنگام نمایش محتوای تولید شده توسط کاربر، در صورت ترکیب با ویژگی sandbox، مورد استفاده قرار گیرد.
توجه داشته باشید که هنگام استفاده از srcdoc، هر URL نسبی در محتوای جاسازی شده نسبت به URL صفحه جاسازی شده حل میشود. اگر میخواهید از لینکهای لنگری استفاده کنید که به مکانهایی در محتوای جاسازی شده اشاره میکنند، باید صریحاً about:srcdoc را به عنوان URL پایه مشخص کنید.
در اینجا نحوه نوشتن توالیهای escape هنگام استفاده از srcdoc آمده است:
- ابتدا، HTML را بنویسید و هر چیزی را که در یک سند HTML معمولی escape میکنید (مانند <، >، & و غیره) escape کنید.
- و دقیقاً همان کاراکتر را در ویژگی srcdoc نشان میدهند. بنابراین، برای تبدیل آن به یک توالی escape واقعی در سند HTML، هر علامت & (&) را با جایگزین کنید. به عنوان مثال، تبدیل به میشود و تبدیل به میشود.
- هر علامت نقل قول دوتایی (") را با جایگزین کنید تا از خاتمه زودرس ویژگی srcdoc جلوگیری شود (اگر به جای آن از ' استفاده میکنید، باید ' را با ' جایگزین کنید). این مرحله پس از مرحله قبلی اتفاق میافتد، بنابراین تولید شده در این مرحله به تبدیل نمیشود.
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | Flow content, phrasing content, embedded content, interactive content, palpable content. |
| محتوای مجاز | هیچکدام |
| حذف برچسب | هیچکدام، هر دو تگ شروع و پایان اجباری هستند. |
| والدین مجاز | هر عنصری که محتوای جاسازیشده را میپذیرد.
|
| نقش ضمنی ARIA | بدون نقش متناظر |
| نقشهای مجاز ARIA | application, document, img, none, presentation |
| رابط DOM | HTMLIFrameElement |
یا
؛ ویژگی formtarget عناصر
یا
؛ یا پارامتر windowName در متد
استفاده شود. علاوه بر این، name به یک ویژگی از اشیاء Window و Document تبدیل میشود که حاوی ارجاعی به پنجره تعبیه شده یا خود عنصر است.
privateToken
شامل نمایش رشتهای از یک شیء options است که نشاندهندهی عملیات توکن وضعیت خصوصی است؛ این شیء ساختار مشابهی با ویژگی privateToken دیکشنری RequestInit دارد. IFrame های حاوی این ویژگی میتوانند عملیاتی مانند صدور یا بازخرید توکنها را هنگام بارگذاری محتوای جاسازیشدهشان آغاز کنند.
referrerpolicy
نشان میدهد که هنگام دریافت منبع فریم، کدام ارجاعدهنده باید ارسال شود:
- no-referrer
هدر Referer ارسال نخواهد شد.
- no-referrer-when-downgrade
هدر Referer بدون TLS (HTTPS) به مبدأها ارسال نخواهد شد.
- origin
ارجاعدهندهی ارسالشده به مبدأ صفحهی ارجاعدهنده محدود خواهد شد: طرح، میزبان و پورت آن.
- origin-when-cross-origin
ارجاعدهندهی ارسالشده به مبدأهای دیگر محدود به طرح، میزبان و پورت خواهد بود. پیمایشها در همان مبدأ همچنان شامل مسیر خواهند بود.
- same-origin
ارجاع دهنده برای همان مبدا ارسال میشود، اما درخواستهای cross-origin حاوی اطلاعات ارجاع دهنده نخواهند بود.
- strict-origin
فقط زمانی که سطح امنیتی پروتکل ثابت بماند (HTTPS→HTTPS)، مبدا سند را به عنوان ارجاع دهنده ارسال کنید، اما آن را به مقصدی با امنیت کمتر (HTTPS→HTTP) ارسال نکنید.
- strict-origin-when-cross-origin (پیشفرض)
هنگام انجام درخواست same-origin، یک URL کامل ارسال کنید، فقط زمانی که سطح امنیتی پروتکل ثابت بماند (HTTPS→HTTPS) مبدا را ارسال کنید و هیچ هدری را به مقصدی با امنیت کمتر ارسال نکنید (HTTPS→HTTP).
- unsafe-url
ارجاع دهنده شامل مبدا و مسیر خواهد بود (اما قطعه، رمز عبور یا نام کاربری را شامل نمیشود). این مقدار ناامن است، زیرا مبداها و مسیرها را از منابع محافظت شده توسط TLS به مبداهای ناامن نشت میدهد.
sandbox
محدودیتهای اعمال شده بر محتوای تعبیه شده در
را کنترل میکند. مقدار این ویژگی میتواند برای اعمال همه محدودیتها خالی باشد، یا برای برداشتن محدودیتهای خاص، توکنهای جدا شده با فاصله باشد:
- allow-downloads
اجازه دانلود فایلها را از طریق یک عنصر
یا
با ویژگی دانلود، و همچنین از طریق ناوبری که منجر به دانلود یک فایل میشود، میدهد. این کار صرف نظر از اینکه کاربر روی لینک کلیک کرده باشد یا کد JS آن را بدون تعامل کاربر آغاز کرده باشد، انجام میشود.
- allow-forms
به صفحه اجازه میدهد فرمها را ارسال کند. اگر از این کلمه کلیدی استفاده نشود، یک فرم به صورت عادی نمایش داده میشود، اما ارسال آن باعث اعتبارسنجی ورودی، ارسال داده به سرور وب یا بستن کادر محاورهای نمیشود.
- allow-modals
به صفحه اجازه میدهد پنجرههای modal را با استفاده از
و
باز کند، در حالی که باز کردن یک
صرف نظر از این کلمه کلیدی مجاز است. همچنین به صفحه اجازه میدهد رویداد BeforeUnloadEvent را دریافت کند.
- allow-orientation-lock
به منبع اجازه میدهد جهت صفحه را قفل کند.
- allow-pointer-lock
به صفحه اجازه میدهد از API قفل اشارهگر استفاده کند.
- allow-popups
به پنجرههای بازشو (که مثلاً توسط
یا
) ایجاد شدهاند، اجازه میدهد. اگر از این کلمه کلیدی استفاده نشود، چنین عملکردی بیسروصدا از کار میافتد.
- allow-popups-to-escape-sandbox
به یک سند سندباکس شده اجازه میدهد بدون اعمال پرچمهای سندباکس بر روی آن، یک زمینه مرور جدید باز کند. این به عنوان مثال به یک تبلیغ شخص ثالث اجازه میدهد بدون اعمال محدودیتهای مشابه بر صفحهای که تبلیغ به آن لینک میدهد، به طور ایمن سندباکس شود. اگر این پرچم گنجانده نشده باشد، یک صفحه هدایتشده، پنجره پاپآپ یا تب جدید مشمول همان محدودیتهای سندباکس
مبدأ خواهد بود.
- allow-presentation
به جاسازیکنندگان اجازه میدهد تا کنترل کنند که آیا یک iframe میتواند یک جلسه ارائه را شروع کند یا خیر.
- allow-same-origin
اگر این توکن استفاده نشود، منبع به عنوان منبعی از یک منبع خاص در نظر گرفته میشود که همیشه سیاست same-origin را نقض میکند (که به طور بالقوه مانع از دسترسی به ذخیرهسازی دادهها/کوکیها و برخی از APIهای جاوا اسکریپت میشود).
وقتی allow-same-origin وجود دارد، یک سند والد same-origin همچنان میتواند به DOM iframe دسترسی داشته باشد و با آن تعامل داشته باشد، حتی اگر allow-scripts تنظیم نشده باشد. توکن allow-scripts فقط اجرای اسکریپت را در چارچوب مرور جاسازی شده کنترل میکند و بر دسترسی DOM از والد تأثیری ندارد.
- allow-scripts
به صفحه اجازه میدهد اسکریپتها را اجرا کند (اما پنجرههای پاپآپ ایجاد نمیکند). اگر از این کلمه کلیدی استفاده نشود، این عملیات مجاز نیست.
- allow-storage-access-by-user-activation
به سندی که در
بارگذاری شده است اجازه میدهد از API دسترسی به ذخیرهسازی برای درخواست دسترسی به کوکیهای پارتیشنبندی نشده استفاده کند.
- allow-top-navigation
به منبع اجازه میدهد در چارچوب مرور سطح بالا (همان که
نام دارد) پیمایش کند.
- allow-top-navigation-by-user-activation
به منبع اجازه میدهد تا در زمینه مرور سطح بالا حرکت کند، اما فقط در صورتی که توسط یک حرکت کاربر آغاز شود.
- allow-top-navigation-to-custom-protocols
اجازه دسترسی به پروتکلهای غیر http که در مرورگر تعبیه شدهاند یا توسط یک وبسایت ثبت شدهاند را میدهد. این ویژگی همچنین توسط کلمه کلیدی allow-popups یا allow-top-navigation فعال میشود.
هنگامی که سند جاسازی شده دارای منشأ یکسانی با صفحه جاسازی شده است، استفاده از هر دو allow-scripts و allow-same-origin اکیداً توصیه نمیشود، زیرا این امر به سند جاسازی شده اجازه میدهد تا ویژگی sandbox را حذف کند - و این باعث میشود که از عدم استفاده از ویژگی sandbox امنتر نباشد.
اگر مهاجم بتواند محتوا را خارج از یک iframe ماسهای نمایش دهد - مانند زمانی که بیننده قاب را در یک تب جدید باز میکند - sandbox بیفایده است. چنین محتوایی نیز باید از یک منشأ جداگانه ارائه شود تا آسیب احتمالی محدود شود.
هنگام هدایت کاربر، باز کردن یک پنجره پاپآپ یا باز کردن یک تب جدید از یک صفحه جاسازیشده در
با ویژگی sandbox، زمینه مرور جدید مشمول همان محدودیتهای sandbox است. این میتواند مشکلاتی ایجاد کند - برای مثال، اگر صفحهای که در
جاسازی شده است بدون ویژگی
یا
که روی آن تنظیم شده است، یک سایت جدید را در یک تب جداگانه باز کند، ارسال فرم در آن زمینه مرور جدید بیسروصدا با شکست مواجه میشود.
src
آدرس صفحه برای جاسازی. از مقدار about:blank برای جاسازی یک صفحه خالی که با سیاست same-origin مطابقت دارد استفاده کنید. همچنین توجه داشته باشید که حذف برنامهای ویژگی src یک
(مثلاً از طریق
) باعث میشود about:blank در فریم در فایرفاکس (از نسخه ۶۵)، مرورگرهای مبتنی بر Chromium و Safari/iOS بارگیری شود.
صفحه about:blank هنگام حل هرگونه URL نسبی، مانند لینکهای لنگر، از URL سند جاسازی به عنوان URL پایه خود استفاده میکند.
srcdoc
HTML درونخطی برای جاسازی، که ویژگی src را نادیده میگیرد. محتوای آن باید از سینتکس یک سند HTML کامل پیروی کند، که شامل دستورالعمل doctype، برچسبهای
و غیره است، اگرچه میتوان اکثر آنها را حذف کرد و فقط محتوای بدنه را باقی گذاشت. این سند about:srcdoc را به عنوان مکان خود خواهد داشت. اگر مرورگری از ویژگی srcdoc پشتیبانی نکند، به آدرس اینترنتی موجود در ویژگی src برمیگردد.
نکته: صفحه about:srcdoc هنگام حل هرگونه آدرس اینترنتی نسبی، مانند لینکهای لنگر، از آدرس اینترنتی سند جاسازی به عنوان آدرس اینترنتی پایه خود استفاده میکند.
width
عرض قاب بر حسب پیکسل CSS. مقدار پیشفرض ۳۰۰ است.
