آموزش HTML : از object تا iframe - فناوریهای عمومی جاسازی
توسعهدهندگان معمولاً به جاسازی رسانههایی مانند تصاویر، ویدیو و صدا در صفحات وب فکر میکنند. در این مقاله، ما تا حدودی یک گام فرعی برمیداریم و به برخی از عناصری که به شما امکان میدهند انواع مختلفی از محتوا را در صفحات وب خود جاسازی کنید، نگاهی میاندازیم: عناصر <iframe>، <embed> و <object>. <iframe>ها برای جاسازی سایر صفحات وب هستند و دو عنصر دیگر به شما امکان میدهند منابع خارجی مانند فایلهای PDF را جاسازی کنید.
مدتها پیش در وب، استفاده از فریمها برای ایجاد وبسایتها رایج بود - بخشهای کوچکی از یک وبسایت که در صفحات HTML جداگانه ذخیره میشدند. این فریمها در یک سند اصلی به نام frameset تعبیه میشدند که به شما امکان میداد مساحتی را روی صفحه که هر فریم پر میکرد، مشخص کنید، تقریباً مانند اندازهگیری ستونها و ردیفهای یک جدول. این فریمها در اواسط تا اواخر دهه 90 میلادی اوج جذابیت محسوب میشدند و شواهدی وجود داشت که تقسیم یک صفحه وب به قطعات کوچکتر مانند این برای سرعت دانلود بهتر است - به خصوص با توجه به کندی اتصالات شبکه در آن زمان. با این حال، آنها مشکلات زیادی داشتند که با افزایش سرعت شبکه، بسیار بیشتر از هرگونه نکته مثبت بود، بنابراین دیگر شاهد استفاده از آنها نیستیم.
کمی بعد (اواخر دهه 90، اوایل دهه 2000)، فناوریهای افزونه مانند Java Applets و Flash بسیار محبوب شدند - این فناوریها به توسعهدهندگان وب اجازه میدادند محتوای غنی مانند ویدیوها و انیمیشنها را در صفحات وب جاسازی کنند، که فقط از طریق HTML به تنهایی در دسترس نبودند. جاسازی این فناوریها از طریق عناصری مانند و که کمتر مورد استفاده قرار میگرفت، انجام میشد و در آن زمان بسیار مفید بودند. از آن زمان به دلیل مشکلات زیادی از جمله دسترسی، امنیت، اندازه فایل و موارد دیگر، از مد افتادهاند. این روزها مرورگرهای اصلی پشتیبانی از افزونههایی مانند Flash را متوقف کردهاند.
در نهایت، عنصر (همراه با سایر روشهای جاسازی محتوا، مانند و غیره) ظاهر شد. این عنصر راهی برای جاسازی کل یک سند وب در داخل سند دیگری فراهم میکند، گویی که یک یا عنصر دیگری از این قبیل است و امروزه به طور منظم مورد استفاده قرار میگیرد.
با کنار گذاشتن درس تاریخ، بیایید به سراغ نحوه استفاده از برخی از این موارد برویم.
خب، این آسان و سرگرمکننده بود، درست است؟ عناصر به گونهای طراحی شدهاند که به شما امکان میدهند اسناد وب دیگری را در سند فعلی جاسازی کنید. این برای گنجاندن محتوای شخص ثالث در وبسایت شما که ممکن است کنترل مستقیمی بر آن نداشته باشید و نخواهید نسخه خودتان را پیادهسازی کنید - مانند ویدیو از ارائهدهندگان ویدیوی آنلاین، سیستمهای نظردهی مانند Disqus، نقشهها از ارائهدهندگان نقشه آنلاین، بنرهای تبلیغاتی و غیره - عالی است. حتی مثالهای قابل ویرایش زندهای که در این دوره استفاده کردهاید با استفاده از ها پیادهسازی شدهاند.
قبل از پرداختن به استفاده از عناصر ، برخی نگرانیهای امنیتی وجود دارد که باید از آنها آگاه باشید. فرض کنید میخواهید واژهنامه MDN را در یکی از صفحات وب خود با استفاده از عنصر قرار دهید، میتوانید چیزی شبیه به مثال کد بعدی را امتحان کنید. اگر کد زیر را به یکی از صفحات خود اضافه کنید، ممکن است از دیدن یک پیام خطا به جای صفحه واژهنامه شگفتزده شوید:
اگر به کنسول مرورگر خود نگاهی بیندازید، پیام خطایی مانند زیر مشاهده خواهید کرد:
بخش امنیت در زیر جزئیات بیشتری در مورد دلیل مشاهده این خطا ارائه میدهد، اما ابتدا، بیایید نگاهی به عملکرد کد خود بیندازیم.
این مثال شامل موارد ضروری مورد نیاز برای استفاده از است:
-
در صورت استفاده، بدون حاشیه اطراف نمایش داده میشود. در غیر این صورت، به طور پیشفرض، مرورگرها را با حاشیه اطراف نمایش میدهند (که عموماً نامطلوب است).
- allowfullscreen
در صورت تنظیم، میتواند با استفاده از API تمام صفحه (تا حدودی فراتر از محدوده این مقاله) در حالت تمام صفحه قرار گیرد.
- src
این ویژگی، مانند ، حاوی مسیری است که به URL سندی که باید جاسازی شود اشاره میکند.
- width و height
این ویژگیها عرض و ارتفاعی را که میخواهید iframe داشته باشد، مشخص میکنند.
- sandbox
این ویژگی که در مرورگرهای کمی مدرنتر از بقیه ویژگیهای (مثلاً IE 10 و بالاتر) کار میکند، تنظیمات امنیتی پیشرفتهتری را درخواست میکند. در بخش بعدی بیشتر در این مورد خواهیم گفت.
برای بهبود سرعت، ایده خوبی است که ویژگی src مربوط به iframe را پس از اتمام بارگذاری محتوای اصلی با جاوا اسکریپت تنظیم کنید. این کار باعث میشود صفحه شما زودتر قابل استفاده شود و زمان بارگذاری رسمی صفحه شما کاهش یابد.
در بالا به نگرانیهای امنیتی اشاره کردیم - بیایید اکنون با جزئیات بیشتری به این موضوع بپردازیم. ما انتظار نداریم که شما همه این مطالب را در همان بار اول کاملاً درک کنید؛ فقط میخواهیم شما را از این نگرانی آگاه کنیم و مرجعی ارائه دهیم تا با کسب تجربه بیشتر و شروع به بررسی استفاده از ها در آزمایشها و کارهای خود، به آن مراجعه کنید. همچنین، نیازی به ترسیدن و عدم استفاده از ها نیست - فقط باید مراقب باشید. ادامه مطلب را بخوانید...
سازندگان مرورگر و توسعهدهندگان وب به سختی آموختهاند که iframeها یک هدف رایج (اصطلاح رسمی: بردار حمله) برای افراد بد در وب (که اغلب هکرها یا به طور دقیقتر، کراکر نامیده میشوند) هستند تا در صورت تلاش برای تغییر مخرب صفحه وب شما یا فریب افراد برای انجام کاری که نمیخواهند انجام دهند، مانند افشای اطلاعات حساس مانند نام کاربری و رمز عبور، به آنها حمله کنند. به همین دلیل، مهندسان فنی و توسعهدهندگان مرورگر مکانیسمهای امنیتی مختلفی را برای ایمنتر کردن ها توسعه دادهاند و همچنین بهترین شیوهها برای بررسی وجود دارد - در زیر برخی از این موارد را پوشش خواهیم داد.
کلیکربایی یکی از انواع حملات رایج iframe است که در آن هکرها یک iframe نامرئی را در سند شما جاسازی میکنند (یا سند شما را در وبسایت مخرب خود جاسازی میکنند) و از آن برای ضبط تعاملات کاربران استفاده میکنند. این یک روش رایج برای گمراه کردن کاربران یا سرقت اطلاعات حساس است.
فقط در صورت لزوم جاسازی کنید
گاهی اوقات جاسازی محتوای شخص ثالث - مانند ویدیوهای یوتیوب و نقشهها - منطقی است، اما اگر فقط در مواقع ضروری محتوای شخص ثالث را جاسازی کنید، میتوانید از بسیاری از سردردها جلوگیری کنید. یک قانون خوب برای امنیت وب این است که "هرگز نباید خیلی محتاط باشید. اگر خودتان آن را ساختهاید، دوباره آن را بررسی کنید. اگر شخص دیگری آن را ساخته است، فرض کنید خطرناک است تا زمانی که خلاف آن ثابت شود."
علاوه بر امنیت، باید از مسائل مربوط به مالکیت معنوی نیز آگاه باشید. اکثر محتوا، چه آفلاین و چه آنلاین، دارای حق چاپ هستند، حتی محتوایی که ممکن است انتظار نداشته باشید (به عنوان مثال، اکثر تصاویر در ویکیمدیا کامنز). هرگز محتوایی را در صفحه وب خود نمایش ندهید، مگر اینکه مالک آن باشید یا صاحبان آن اجازه کتبی و صریح به شما داده باشند. مجازات نقض حق چاپ شدید است. باز هم، هرگز نمیتوانید خیلی محتاط باشید.
اگر محتوا دارای مجوز باشد، باید از شرایط مجوز پیروی کنید. به عنوان مثال، محتوای MDN تحت مجوز CC-BY-SA است. این بدان معناست که هنگام نقل قول از محتوای ما، حتی اگر تغییرات اساسی ایجاد کنید، باید به درستی به ما اعتبار دهید.
HTTPS نسخه رمزگذاری شده HTTP است. شما باید تا حد امکان وبسایتهای خود را با استفاده از HTTPS ارائه دهید:
HTTPS احتمال دستکاری محتوای از راه دور در حین انتقال را کاهش میدهد.
HTTPS از دسترسی محتوای جاسازی شده به محتوای سند والد شما و برعکس جلوگیری میکند.
فعال کردن HTTPS برای سایت شما نیاز به نصب یک گواهی امنیتی ویژه دارد. بسیاری از ارائه دهندگان خدمات میزبانی وب، میزبانی با قابلیت HTTPS را بدون نیاز به انجام هرگونه تنظیماتی برای نصب گواهی ارائه میدهند. اما اگر نیاز دارید که خودتان پشتیبانی HTTPS را برای سایت خود راهاندازی کنید، Let's Encrypt ابزارها و دستورالعملهایی را ارائه میدهد که میتوانید برای ایجاد و نصب خودکار گواهی لازم از آنها استفاده کنید - با پشتیبانی داخلی برای پرکاربردترین سرورهای وب، از جمله وب سرور آپاچی، Nginx و سایر موارد. ابزار Let's Encrypt به گونهای طراحی شده است که این فرآیند را تا حد امکان آسان کند، بنابراین واقعاً هیچ دلیل خوبی برای اجتناب از استفاده از آن یا سایر ابزارهای موجود برای فعال کردن HTTPS برای سایت شما وجود ندارد.
صفحات گیتهاب به طور پیشفرض اجازه میدهند محتوا از طریق HTTPS ارائه شود. اگر از ارائهدهنده میزبانی متفاوتی استفاده میکنید، باید بررسی کنید که چه پشتیبانی برای ارائه محتوا با HTTPS ارائه میدهند.
همیشه از ویژگی sandbox استفاده کنید
شما میخواهید به مهاجمان کمترین قدرت ممکن را برای انجام کارهای بد در وبسایت خود بدهید، بنابراین باید به محتوای جاسازیشده فقط مجوزهای لازم برای انجام کارش را بدهید. البته، این در مورد محتوای خودتان نیز صدق میکند. محفظهای برای کد که در آن میتوان به طور مناسب - یا برای آزمایش - از آن استفاده کرد، اما نمیتواند هیچ آسیبی به بقیه کدبیس (چه تصادفی و چه مخرب) وارد کند، sandbox نامیده میشود.
محتوایی که sandbox نشده است، ممکن است بتواند جاوا اسکریپت را اجرا کند، فرمها را ارسال کند، پنجرههای پاپآپ را فعال کند و غیره. به طور پیشفرض، باید تمام محدودیتهای موجود را با استفاده از ویژگی sandbox بدون هیچ پارامتری، همانطور که در مثال قبلی ما نشان داده شده است، اعمال کنید.
در صورت نیاز کامل، میتوانید مجوزها را یکی یکی (درون مقدار ویژگی sandbox="") اضافه کنید - برای مشاهده همه گزینههای موجود، به ورودی مرجع sandbox مراجعه کنید. یک نکته مهم این است که هرگز نباید هر دو ویژگی allow-scripts و allow-same-origin را به ویژگی sandbox خود اضافه کنید - در این صورت، محتوای جاسازی شده میتواند سیاست Same-origin را که مانع از اجرای اسکریپتها توسط سایتها میشود، دور بزند و از جاوا اسکریپت برای خاموش کردن کامل sandbox استفاده کند.
اگر مهاجمان بتوانند افراد را فریب دهند تا مستقیماً (خارج از یک iframe) از محتوای مخرب بازدید کنند، Sandboxing هیچ محافظتی ارائه نمیدهد. اگر احتمال دارد محتوای خاصی مخرب باشد (مثلاً محتوای تولید شده توسط کاربر)، لطفاً آن را از یک دامنه متفاوت به سایت اصلی خود ارائه دهید.
پیکربندی دستورالعملهای CSP
CSP مخفف content security policy است و مجموعهای از هدرهای HTTP (فرادادههایی که هنگام ارائه صفحات وب از یک وب سرور به همراه آنها ارسال میشوند) را ارائه میدهد که برای بهبود امنیت سند HTML شما طراحی شدهاند. وقتی صحبت از ایمنسازی ها میشود، میتوانید سرور خود را طوری پیکربندی کنید که یک هدر X-Frame-Options مناسب ارسال کند. این میتواند از جاسازی محتوای شما در صفحات وب سایر وبسایتها (که امکان کلیکربایی و مجموعهای از حملات دیگر را فراهم میکند) جلوگیری کند، که دقیقاً همان کاری است که توسعهدهندگان MDN انجام دادهاند، همانطور که قبلاً دیدیم.
عناصر و عملکرد متفاوتی نسبت به دارند - این عناصر ابزارهای جاسازی عمومی برای جاسازی محتوای خارجی مانند PDFها هستند.
با این حال، بعید است که از این عناصر زیاد استفاده کنید. اگر نیاز به نمایش PDFها دارید، معمولاً بهتر است به جای جاسازی آنها در صفحه، به آنها پیوند دهید.
از نظر تاریخی، این عناصر همچنین برای جاسازی محتوایی که توسط افزونههای مرورگر مانند Adobe Flash مدیریت میشوند، استفاده شدهاند، اما این فناوری اکنون منسوخ شده و توسط مرورگرهای مدرن پشتیبانی نمیشود.
اگر احساس میکنید که نیاز به جاسازی محتوای افزونه دارید، حداقل به این نوع اطلاعات نیاز خواهید داشت:
محتوای HTML مستقل به عنوان جایگزین برای منبعی که در دسترس نیست در پشتیبانی نمیشود ( منسوخ شده است) و در درون تگهای آغازین و پایانی قرار میگیرد.
بیایید به یک مثال نگاهی بیندازیم که یک PDF را در یک صفحه جاسازی میکند.
فایلهای PDF یک گام ضروری بین کاغذ و دیجیتال بودند، اما چالشهای دسترسی زیادی ایجاد میکنند و خواندن آنها روی صفحه نمایشهای کوچک دشوار است. آنها هنوز هم در برخی محافل محبوب هستند، اما خیلی بهتر است که به آنها لینک دهید تا بتوان آنها را در یک صفحه جداگانه دانلود یا مطالعه کرد، نه اینکه آنها را در یک صفحه وب جاسازی کرد.
