فناوری های مختلف جاسازی (Embedding) در HTML — راهنمای کاربردی

شما با مطالعه بخش‌های پیشین این سری مقالات راهنمای کاربردی HTML اینک باید با طرز کار جاسازی یا Embedding موارد مختلف از قبیل صوت و ویدئو در صفحه‌های وب آشنا شده باشید. در این مرحله قصد داریم این موضوع را کمی بسط دهیم و به بررسی عناصری بپردازیم که امکان جاسازی طیف گسترده‌ای از انواع محتوا را در صفحه‌های وب فراهم می‌سازند. این موارد شامل فناوری‌های مختلف جاسازی از جمله عناصر <iframe> ،<embed> و <object> هستند. <iframe>-ها برای جاسازی صفحه‌های وب دیگر استفاده می‌شوند و دو مورد دیگر نیز برای جاسازی فایل‌های PDF ،SVG و حتی Flash مورد استفاده قرار می‌گیرند. Flash فناوری است که روزهای آخر عمر خود را سپری می‌کند، اما کماکان در جاهای مختلف به چشم می‌خورد. برای مطالعه بخش قبلی این سری مقالات به صفحه زیر مراجعه کنید:

• محتوای ویدئویی و صوتی در HTML — راهنمای کاربردی

پیش‌نیازها

• سواد مقدماتی رایانه
• نصب نرم‌افزارهای مقدماتی
• دانش پایه از کار با فایل‌ها
• آشنایی با مبانی HTML

موارد فوق از طریق مراجعه به مقالات قبلی این سری آموزشی قابل حصول هستند. هدف از این مقاله جاسازی آیتم‌های مختلف مانند فیلم‌های Flash و صفحه‌های وب دیگر، در صفحه‌های HTML با استفاده از عناصر <object> ،<embed> و <iframe> است.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

تاریخچه مختصری از جاسازی

در زمان‌های دور استفاده از فریم‌ها برای ایجاد وب‌سایت امری متداول محسوب می‌شد. فریم‌ها بخش‌های کوچکی از وب‌سایت‌ها هستند که در صفحه‌های HTML منفردی ذخیره می‌شوند. این صفحه‌ها به صورت فریم در یک سند اصلی به نام frameset جاسازی می‌شوند و امکان تعیین ناحیه‌ای روی صفحه که هر فریم باید قرار گیرد وجود دارد. این وضعیت تا حدودی شبیه به شیوه تعیین طول و عرض جدول‌های HTML است. این روش جاسازی در میانه‌های دهه 90 میلادی یکی از پیشرفته‌ترین فنّاوری‌های وب محسوب می‌شد و شواهدی در دست است که تقسیم کردن یک صفحه وب بدین ترتیب به بخش‌های مختلف، موجب بارگذاری سریع‌تر صفحه وب می‌شد.

این امر زمانی اهمیت خود را بیشتر نشان می‌دهد که بدانیم سرعت‌ اینترنت در آن دوران بسیار پایین بوده است. البته این فریم‌ها مشکلات بسیاری نیز داشتند و این مشکلات بر هر گونه مزیت از قبیل بارگذاری سریع‌تر می‌چربید و از این رو امروزه دیگر از آن‌ها استفاده نمی‌شود.

کمی بعدتر (در اواخر دهه 90 و ابتدای دهه 2000) فناوری‌های افزونه (plugin) مانند Java Applets و Flash بسیار محبوبیت یافتند. این فناوری‌ها به توسعه‌دهندگان وب امکان جاسازی محتوای کاملی از قبیل ویدئو یا انیمیشن در صفحه‌های وب ایجاد می‌کردند که از طریق HTML ممکن نبود. جاسازی این فناوری‌ها از طریق عناصری مانند <object> و همچنین عنصر کمتر استفاده شده <embed> صورت می‌گرفت و در زمان خود بسیار مفید بودند.

البته این فناوری‌ها نیز در گذر زمان به دلیل مشکلاتی که داشتند از جمله مشکل دسترس‌پذیری، امنیت، اندازه فایل و موارد دیگر از رونق افتادند. امروزه اغلب دستگاه‌های موبایل از چنین افزونه‌هایی پشتیبانی نمی‌کنند و رایانه‌های رومیزی نیز در حال قطع پشتیبانی خود هستند.

در نهایت عنصر <iframe> (به همراه روش‌های دیگر جاسازی مانند <canvas> ،<video> و غیره) پیدا شد. این عنصر روشی برای جاسازی کل یک سند وب را درون صفحه وب دیگر ارائه می‌کرد به طوری که آن سند وب یک عنصر <img> یا شبیه به آن است و به صورت معمولی مورد استفاده قرار می‌گیرد.

اینک که با تاریخچه موضوع آشنا شدیم، می‌توانیم در ادامه به بررسی روش استفاده از این فناوری‌ها بپردازیم.

یادگیری عملی: کاربردهای کلاسیک جاسازی

در این مقاله، قصد داریم مستقیماً به بخش یادگیری عملی وارد شویم تا بی‌درنگ ایده‌ای عملی از این که فناوری «جاسازی» (embedding) در چه مواردی مفید است به دست بیاوریم. در دنیای آنلاین اغلب افراد با وب‌سایت یوتیوب آشنا هستند؛ اما شاید بسیاری از آن‌ها با قابلیت‌های اشتراکی که این سرویس در اختیار کاربران قرار می‌دهد آشنا نباشند. در ادامه به بررسی روشی می‌پردازیم که یوتیوب امکان جاسازی ویدئوهای خود را در صفحه‌های وب دیگر با استفاده از <iframe> می‌دهد:

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

1. ابتدا به وب‌سایت یوتیوب بروید و یک ویدئو را به‌دلخواه خود انتخاب کنید.
2. زیر ویدئو یک دکمه share مشاهده می‌کنید. این دکمه را انتخاب کنید تا گزینه‌های اشتراک برای شما نمایش پیدا کنند.
3. دکمه Embed را کلیک کنید تا یک کد <iframe> در اختیار شما قرار گیرد. این کد را کپی کنید.
4. کد کپی شده را در هر صفحه HTML  که وارد کنید نتیجه را در زمان رفرش کردن صفحه وب مشاهده می‌کنید.

همچنین می‌توانید نقشه‌های گوگل را نیز در صفحه‌های وب دیگر جاسازی کنید.

1. ابتدا به وب‌سایت سرویس نقشه گوگل (+) بروید و نقشه‌ای که می‌خواهید را تنظیم کنید.
2. روی منوی سه خط در سمت چپ-بالای صفحه کیک کنید.
3. گزینه Share or embed map را انتخاب کنید.
4. گزینه Emed map را کلیک کنید تا یک کد <iframe> در اختیار شما قرار گیرد. این کد را کپی کنید.
5. کد کپی شده را در کادر فوق وارد کرده و نتیجه را در پنجره output ملاحظه کنید.

جزییات iframe-ها

همان طور که دیدید استفاده از iframe-ها آسان و بسیار مفید است. عناصر <iframe> طوری طراحی شده‌اند که امکان جاسازی سندهای وب دیگر را در سند جاری به دست می‌دهند. این وضعیت برای قرار دادن محتوای دیگر وب‌سایت‌ها در وب‌سایت خودتان بسیار مفید است. در این وضعیت شما کنترل مستقیمی روی این محتوا ندارید و شاید اصولاً این کنترل را نمی‌خواهید هم داشته باشید، چون چیزی از قبیل یک ویدئو آنلاین، سیستم درج توضیح مانند Disqus، نقشه‌های آنلاین، بنرهای تبلیغاتی و یا موارد مشابه است. مثال‌های قابل ویرایش آنلاین به نام بخش‌های «یادگیری عملی» که در طی این سری مقالات آموزشی مشاهده کردید، همگی با استفاده از iframe-ها پیاده‌سازی شده‌اند.

استفاده از عناصر <iframe> برخی دغدغه‌های امنیتی جدی را مطرح ساخته است که در ادامه بررسی خواهیم کرد؛ اما این بدان معنی نیست که نباید از آن‌ها در وب‌سایت‌ها استفاده شود؛ بلکه باید در زمان استفاده از آن آگاهی و دقت مضاعفی به کار بست. کد این عناصر را در ادامه کمی بیشتری مورد بررسی قرار می‌دهیم. فرض کن می‌خواهید لغت‌نامه MDN را به عنوان یکی از صفحه‌های وب در وب‌سایت خود بگنجانید. بدین منظور می‌توانید از کدی مانند زیر استفاده کنید:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Iframe with basic details</title>
6  </head>
7  <body>
8    <h1>Iframe with basic details</h1>
9
10    <iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox>
11      <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> Fallback link for browsers that don't support iframes </a> </p>
12    </iframe>
13  </body>
14</html>

این مثال شامل مبانی ضروری اولیه مورد نیاز برای استفاده از یک <iframe> است که در ادامه توضیح داده‌ایم:

Allowfullscreen: اگر این مقدار تعیین شده باشد، <iframe> می‌تواند با استفاده از Full Screen API در حالت تمام صفحه قرار گیرد (که البته توضیح آن فراتر از حیطه این مقاله است).

Frameborder: اگر برابر با 1 تعیین شده باشد، به مرورگر اعلام می‌شود که یک حاشیه بین این فریم و دیگر فریم‌ها ترسیم کند که رفتار پیش‌فرض محسوب می‌شود. اگر مقدار 0 تعیین شده باشد این حاشیه حذف می‌شود. استفاده از این پارامتر دیگر توصیه نمی‌شود؛ چون همین تأثیر را به روشی بهتر می‌توان با استفاده از border: none در CSS به دست آورد.

src: این خصوصیت همانند عناصر <video> و <img> شامل یک مسیر است که به URL سندی که قرار است جاسازی شود اشاره می‌کند.

width و height: این خصوصیت‌ها میزان عرض و ارتفاع فریم را تعیین می‌کنند.

Fallback content: به همان روش مشابه عناصری مانند <video> با استفاده از این خصوصیت می‌توان محتوای جایگزین را بین تگ‌های ابتدایی و پایانی <iframe></iframe> تعیین کرد. این محتوا در مواردی نمایش می‌یابد که مرورگر از عنصر <iframe> پشتیبانی نکند. در این حالت یک لینک به صفحه جایگزین تعیین می‌کنیم. البته این روزها مشاهده مرورگری که از iframe پشتیبانی نکند، بسیار بعید است.

Sandbox: این خصوصیت که روی مرورگرهای مدرن‌تر به روشی نسبتاً متفاوت از باقی ویژگی‌های <iframe> کار می‌کند نیازمند تنظیمات امنیتی با درجه بالایی است و در بخش بعدی در مورد آن بیشتر صحبت خواهیم کرد.

نکته: به منظور افزایش سرعت بهتر است خصوصیت src مربوط به iframe را پس از این که محتوای اصلی صفحه بارگذاری شد توسط جاوا اسکریپت تعیین کنیم. بدین ترتیب صفحه زودتر در دسترس کاربر قرار می‌گیرد و زمان بارگذاری رسمی صفحه کاهش می‌یابد که معیار مهمی در مبحث سئو محسوب می‌شود.

دغدغه‌های امنیتی

در بخش فوق به دغدغه‌های امنیتی اشاره کردیم. اینک نوبت آن رسیده که جزییات بیشتری را مورد بررسی قرار دهیم. ما انتظار نداریم که شما همه محتوای زیر را در نخستین بار مطالعه به طور کامل درک کنید؛ بلکه می‌خواهیم صرفاً شما را از وجود این دغدغه آگاه کرده و ارجاعی بدهیم که وقتی تجربه بیشتری در استفاده از iframe-ها یافتید مجدداً به این مطلب مراجعه کرده و آن را با دقت بیشتری مطالعه کنید. ضمناً نیازی نیست که در مورد استفاده از iframe-ها دچار تشویش شوید، تنها چیزی که باید بدانید این است که همواره باید مراقب باشید.

سازندگان مرورگرها و توسعه‌دهندگان وب با این واقعیت تلخ مواجه شده‌اند که iframe-ها هدف مشترکی برای افراد بد در وب محسوب می‌شوند. این افراد به طور معمول «هکر» (Hacker) نامیده می‌شوند؛ اما اصطلاح دقیق «کرکر» (Cracker) است. کرکرها تلاش می‌کنند تا صفحه وب شما را به طرز نامناسبی تغییر دهد یا افراد را فریب بدهند تا چیزی را که می‌خواهند مانند اطلاعات حساسی چون نام کاربری و رمز عبور را به دست آورند. به همین دلیل مهندسان و توسعه‌دهندگان مرورگرها، سازوکارهای امنیتی مختلفی برای امن‌تر ساختن iframe-ها ارائه کرده‌اند و برخی رویه‌های مناسب نیز وجود دارند که باید مورد توجه قرار گیرند. برخی از این موارد در ادامه معرفی شده‌اند.

نکته: «کلیک ربایی» (Clickjacking) نوعی از حمله‌های رایج iframe است که در آن هکرها یک iframe ناپیدا را در سند شما جاسازی می‌کنند و یا این که سند شما را درون وب‌سایت خرابکارانه خودشان جاسازی می‌کنند و بدین ترتیب تعامل‌های کاربران را به دست می‌آورند. این یک روش رایج برای گمراه کردن کاربران یا سرقت داده‌های حساس آن‌ها محسوب می‌شود.

به عنوان اولین مثال تلاش کنید نمونه ارائه شده قبلی که کد آن را در ادامه می‌بینید در مرورگر خود بارگذاری کنید:

1    
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>Iframe with basic details</title>
7  </head>
8  <body>
9    <h1>Iframe with basic details</h1>
10
11    <iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox>
12      <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> Fallback link for browsers that don't support iframes </a> </p>
13    </iframe>
14  </body>
15</html>

در این زمان در عمل چیزی روی صفحه مشاهده نمی‌شود و اگر به کنسول مرورگر در بخش ابزارهای توسعه‌دهنده مرورگر (با کلیدهای میانبر Ctrl+Shift+I) نگاه کنید، پیامی می‌بینید که دلیل این وضعیت را به شما اعلام می‌کند. در مرورگر فایرفاکس اعلام می‌شود که بارگذاری به دلیل این که امکان استفاده از iframe وجود ندارد متوقف شده است:

X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing

دلیل این امر آن است که توسعه‌دهندگانی که MDN را ساخته‌اند یک تنظیمات روی سرور قرار داده‌اند که باعث می‌شود صفحه‌های وب‌سایتشان امکان جاسازی درون iframe-ها را نداشته باشد. این کار مفیدی محسوب می‌شود، زیرا این که کل یک صفحه MDN در صفحه‌های دیگر جاسازی شود، هیچ معنی ندارد به جز این که فردی که این کار را می‌کند، می‌خواهد ادعا کند صاحب وب‌سایت MDN است و می‌خواهد داده‌های کاربران را از طریق کلیک ربایی به سرقت ببرد. هر دوی این‌ها وضعیت نامناسبی محسوب می‌شوند. به علاوه این که اگر همه افراد شروع به انجام این کار بکنند همه پهنای باند خود را بر دوش بنیاد Mozilla می‌اندازند که نوعی سوءاستفاده محسوب می‌شود.

تنها در موارد ضروری از embed استفاده کنید

برخی اوقات جاسازی محتوای ثالث مانند ویدئوهای یوتیوب و نقشه‌ها مفید است؛ اما در صورتی که استفاده از این نوع جاسازی‌ها را به موارد صرفاً ضروری محدود کنید از دردسرهای زیادی جلوگیری خواهید کرد. یک قاعده سرانگشتی مناسب برای امنیت وب این است که: «شما هرگز نمی‌توانید بیش از حد هوشیار باشد. اگر خودتان چیزی ساخته‌اید، آن را دوباره بررسی کنید. اگر کس دیگری آن را ساخته است، پیش‌فرضتان این باشد که خطرناک است؛ مگر این که خلافش ثابت شود.»

علاوه بر امنیت باید از مشکلات مالکیت معنوی نیز آگاه باشید. اغلب محتوای آنلاین و آفلاین دارای کپی‌رایت هستند. حتی محتوایی که ممکن است فکرش را نکنید (برای نمونه اغلب تصاویر روی Wikimedia Commons) دارای کپی‌رایت هستند. هرگز محتوایی را روی صفحه وب خود قرار ندهید؛ مگر این که مالک آن باشید یا مالکان آن به شما مجوز مکتوب و بی‌ابهام داده باشند. جریمه‌های نقض قانون کپی‌رایت بسیار سنگین هستند و در این مورد نیز نمی‌توانید صرفاً به هوشیاری خود اکتفا کنید.

اگر یک محتوا دارای لایسنس است؛ باید از شرایط لایسنس پیروی کنید. برای نمونه محتوای MDN دارای لایسنس CC-BY-SA است. این بدان معنی است که شما باید زمانی که از این وب‌سایت نقل قول می‌کنید حتی در صورتی که تغییرات زیادی در آن ایجاد کرده باشید، به این وب‌سایت «ارجاع» (Credit) بدهید.

استفاده از HTTPS

HTTPS نسخه رمزنگاری‌شده HTTP است. شما باید وب‌سایت خود را هر زمان که ممکن است از طریق HTTPS عرضه کنید، چون:

1. HTTPS احتمال این که محتوای ریموت در زمان انتقال جعل شود را کاهش می‌دهد.
2. HTTPS از دسترسی محتوای جاسازی‌شده به محتوای سند اصلی و برعکس جلوگیری می‌کند.

استفاده از HTTPS نیازمند یک گواهی امنیتی است که ممکن است گران‌قیمت باشد (البته وب‌سایت Let’s Encrypt کار را آسان‌تر ساخته است.) اگر امکان تهیه یک گواهی امنیتی را ندارید می‌توانید سند والد خود را روی HTTP عرضه کنید. با این وجود به دلیل مزیت دوم HTTPS که در بخش فوق اشاره کردیم، مهم نیست که چه هزینه‌ای می‌کنید، چون هرگز نباید محتوای شخص ثالث را با استفاده از HTTP عرضه کنید. در چنین وضعیتی در بهتری حالت مرورگر کاربران یک هشدار جدی به آن‌ها می‌دهد. همه شرکت‌های مشهور که محتوای خود را از طریق یک iframe در اختیار شما برای جاسازی می‌دهند آن را از طریق HTTPS عرضه می‌کنند. برای اطمینان در زمان جاسازی محتوایی از نقشه‌های گوگل یا یوتیوب به URL درون خصوصیت src مربوط به iframe نگاه کنید.

نکته: «صفحه‌های گیت‌هاب» (Github Pages) امکان عرضه محتوا را به صورت پیش‌فرض از طریق HTTPS فراهم ساخته‌اند و از این رو برای میزبانی محتوا مفید هستند. اگر از میزبان متفاوتی استفاده می‌کنید و در این خصوص مطمئن نیستید، در مورد آن از ارائه‌دهنده سرویس میزبانی سؤال کنید.

همواره از خصوصیت sandbox استفاده کنید

طبیعی است که شما می‌خواهید حمله‌کنندگان در زمانی که می‌خواهند حملاتی را روی وب‌سایت شما اجرا می‌کنند، کمترین قدرت ممکن را داشته باشند، از این رو باید تنها مجوزهای واقعاً ضروری را برای اجرای کارهای خود به محتوای جاسازی‌شده بدهید. البته این مسئله در خصوص خود محتوای اصلی نیز صدق می‌کند. sandbox یک کانتینر برای کد است که در آن می‌تواند به صورت مناسبی اجرا یا تست شود؛ اما امکان ایجاد آسیب (تصادفی یا خرابکارانه) به بقیه کد را نمی‌دهد.

محتوای خارج از sandbox می‌تواند کارهای بسیار مختلفی مانند اجرای کدهای جاوا اسکریپت، ارائه فرم، باز کردن پنجره‌های پاپ‌آپ و غیره را اجرا کند. شما به صورت پیش‌فرض باید همانند مثال قبلی‌مان، همه محدودیت‌های جاوا اسکریپت را با استفاده از خصوصیت sandbox بدون هیچ پارامتری اعمال کنید.

اگر موردی واقعاً ضروری باشد می‌توانید مجوزها را یک‌به‌یک (داخل مقدار خصوصیت ""=sandbox) اضافه کنید. برای مشاهده همه گزینه‌ها به مدخل sandbox (+) مراجعه کنید. یک نکته مهم این است که هرگز نباید هر دو خصوصیت allow-scripts و allow-same-origin را به sandbox اضافه کنید، چون در این حالت محتوای جاسازی‌شده آن سیاست‌های امنیتی اصلی را که سایت را قادر به متوقف کردن اسکریپت‌ها می‌کند را دور می‌زند و از جاوا اسکریپت برای خاموش کردن وضعیت sandbox استفاده می‌کند.

نکته: استفاده از sandbox در صورتی که حمله‌کنندگان بتوانند افراد را برای بازدید مستقیم از محتوای وب‌سایت خرابکار فریب بدهند (خارج از iframe) هیچ فایده‌ای نخواهد داشت. اگر هر گونه احتمال می‌دهید که محتوایی خرابکارانه باشد، بهتر است که آن را از دامنه‌ای به جز دامنه سایت خود ارائه کنید.

پیکربندی دایرکتیوهای CSP

CSP اختصاری برای «سیاست امنیت محتوا» (content security policy) است و یک مجموعه از هدرهای HTTP (متادیتا به همراه صفحه‌های وب که از وب‌سرور عرضه می‌شوند) عرضه می‌کند که برای بهبود امنیت سند HTML طراحی شده‌اند. زمانی که از بحث امن سازی iframe-ها صحبت می‌کنیم باید بدانید که امکان پیکربندی سرور برای ارسال یک هدر X-Frame-Options وجود دارد. این کار موجب می‌شود که وب‌سایت‌های دیگر نتوانند محتوای شما را در صفحه‌های وب خود جاسازی کنند. این دقیقاً همان کاری است که توسعه‌دهندگان MDN انجام داده‌اند و قبلاً توضیح دادیم.

عناصر <embed> و <object>

عناصر <embed> و <object>کارکردی متفاوت از <iframe> دارند. این عناصر ابزارهای جاسازی با مقاصد عمومی برای جاسازی چند نوع مختلف از محتوای خارجی هستند که شامل فناوری‌های افزونه مانند اپلت‌های جاوا و Flash، PDF و حتی محتوایی مانند ویدئو و تصاویر SVG می‌شود.

نکته: در این چارچوب یک «افزونه» (plugin) اشاره به نرم‌افزاری دارد که امکان دسترسی به محتوایی را می‌دهد که مرورگر نمی‌تواند به صورت native به آن دسترسی داشته باشد.

با این وجود، احتمال این که از این عناصر استفاده کنید، بسیار بعید است، زیرا اپلت‌ها سال‌ها است که دیگر استفاده نمی‌شوند. Flash به دلایل مختلف دیگر چندان محسوب نیست، فایل‌های PDF اینک به روش‌هایی بهتر از جاسازی لینک می‌شوند و اسناد دیگر مانند تصاویر و ویدئوها نیز دارای عناصر بهتر و آسان‌تری هستند. افزونه‌ها و این روش‌های جاسازی امروزه دیگر فناوری‌های بسیار قدیمی محسوب می‌شوند و ما به طور عمده آن‌ها را برای کاربردهایی که در موارد خاص مانند پروژه‌های داخل سازمانی دارند حفظ کرده‌ایم.

اگر در هر صورت تصور کردید که نیاز به جاسازی یک محتوای افزونه دارید، این نوعی از اطلاعات است که دست‌کم به آن‌ها نیاز خواهید داشت:

نکته: <object> به یک خصوصیت به نام data، یک خصوصیت type و یا هر دو نیاز دارد. اگر هر دوی این خصوصیت‌ها استفاده می‌کنید احتمالاً به یک خصوصیت typemustmatch هم نیاز خواهید داشت که در زمان نگارش این مقاله صرفاً در فایرفاکس پیاده‌سازی شده است. typemustmatch موجب می‌شود که فایل جاسازی‌شده اجرا نشود؛ مگر این که خصوصیت type نوع رسانه صحیح را ارائه کند. بدین ترتیب typemustmatch می‌تواند در مواردی که محتوای جاسازی‌شده را از منبع متفاوتی استفاده می‌کنید، مزیت‌های امنیتی زیادی داشته باشد. بدین ترتیب حمله‌کنندگان امکان اجرای اسکریپت‌های دلخواه را از طریق افزونه نمی‌یابند.

در ادامه مثالی از عنصر <embed> برای جاسازی یک فیلم Flash را می‌بینید:

1<embed src="whoosh.swf" quality="medium"
2       bgcolor="#ffffff" width="550" height="400"
3       name="whoosh" align="middle" allowScriptAccess="sameDomain"
4       allowFullScreen="false" type="application/x-shockwave-flash"
5       pluginspage="http://www.macromedia.com/go/getflashplayer">

همان طور که می‌بینید این وضعیت کاملاً خطرناکی است، زیرا محتوای HTML تولیدشده از سوی ابزار Adobe Flash از این هم بدتر است و از عنصر <object> با یک عنصر <embed> جاسازی‌شده داخل آن برای پوشش همه پایه‌ها استفاده می‌کند. Flash حتی به صورت موفقی برای محتوای fallback به جای ویدئوی HTML5 نیز استفاده شده است؛ اما این وضعیت امروز دیگر چندان ضروری تلقی نمی‌شود.

اینک مثالی از <object> را بررسی می‌کنیم که یک PDF را در یک صفحه جاسازی می‌کند:

1<object data="mypdf.pdf" type="application/pdf"
2        width="800" height="1200" typemustmatch>
3  <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p>
4</object>

PDF-ها یک گام مهم بین اسناد کاغذی و دیجیتالی محسوب می‌شوند؛ اما چالش‌های دسترس‌پذیری زیادی را دارند و خواندن آن‌ها روی صفحه‌های کوچک دشوار است. استفاده از آن‌ها در برخی حلقه‌ها همچنان محبوبیت زیادی دارد؛ اما بهتر است ارائه آن‌ها به صورت ارائه لینکی برای دانلود و مطالعه روی یک صفحه مجزا باشد و جاسازی آن‌ها درون یک صفحه وب مناسب نیست.

معایب افزونه‌ها

زمانی بود که افزونه‌ها جزئی جداناپذیر از وب محسوب می‌شدند. آیا زمانی را به خاطر می‌آورید که برای تماشای یک ویدئوی آنلاین مجبور به نصب Adobe Flash Player بوده‌اید؟ در این زمان به طور مرتب هشدارهایی در مورد به‌روزرسانی Flash Player و Java Runtime Environment دریافت می‌کردید. فناوری‌های وب اینک بسیار رشد یافته‌اند و آن روزها سپری شده‌اند. در اغلب موارد ارائه محتوایی که وابسته به این افزونه‌ها است دیگر ضرورتی ندارد و باید شروع به استفاده از فناوری‌های وب جایگزین بکنیم و این کار چندین مزیت دارد که در ادامه ارائه شده است:

• دسترسی افراد مختلف به وب‌سایت شما افزایش می‌یابد: هر کس یک مرورگر دارد؛ اما افزونه‌ها امروزه به‌خصوص در میان کاربران موبایل بسیار نادر هستند. از آنجا که وب بدون وجود افزونه‌ها نیز تا حدود زیادی قابل استفاده است، افراد ترجیح می‌دهند که به وب‌سایت‌های رقیب که نیازی به افزونه ندارند مراجعه کنند.

• از شر افزونه‌ها رها می‌شوید: با کنار گذاشتن افزونه‌ها، مشکلات دسترس‌پذیری مختلفی که از Flash و دیگر افزونه ناشی می‌شد نیز رفع می‌شوند.

• از مخاطرات امنیتی اضافی دور می‌مانید: Adobe Flash حتی پس از وصله‌های بسیاری که دریافت کرد، یک نرم‌افزار کاملاً ناامن بود. در سال 2015 «الکس استاموس» (Alex Stamos) مدیر ارشد امنیتی فیسبوک از Adobe درخواست کرد که پروژه Flash را متوقف کند.

اینک سؤال این است که چه باید کرد؟ اگر به تعامل‌پذیری نیاز دارید، HTML و جاوا اسکریپت می‌توانند هر آن چه را که ممکن بود از اپلت‌های جاوا یا فناوری منسوخ ActiveX/BHO انتظار داشته باشید را به سهولت در اختیار شما قرار دهند. به جای تکیه بر روی Adobe Flash می‌توانید از ویدئوهای HTML5 برای نیازهای رسانه‌ای، از SVG برای گرافیک‌های برداری و از Canvas برای تصاویر پیچیده و انیمیشن‌ها استفاده کنید. «پیتر الست» (Peter Elst) سال‌ها قبل اشاره کرده است که Adobe Flash برای هر کاری به جز بازی‌سازی تخصصی و اپلیکیشن‌های تجاری که در نظر بگیرید، به ندرت ابزار مناسبی محسوب می‌شود. در مورد ActiveX هم باید گفت حتی مرورگر Edge مایکروسافت هم دیگر از آن پشتیبانی نمی‌کند.

جمع‌بندی

موضوع «جاسازی» (Embedding) محتوای دیگر در سندهای وب ممکن است به سرعت به موضوع پیچیده‌ای تبدیل شود. از این رو در این مقاله تلاش کردیم آن را به یک روش ساده و آشنا معرفی کنیم تا هم به راحتی درک شود و هم برخی از ویژگی‌های پیشرفته فناوری‌های درگیر در آن نیز تفهیم شوند. در آغاز شما به ندرت از جاسازی استفاده می‌کنید؛ مگر این که بخواهید یک نقشه یا ویدئویی را روی صفحه وب خود قرار دهید. با این وجود، زمانی که تجربه بیشتری در زمینه توسعه وب کسب کنید، احتمالاً کاربردهای بیشتری برای آن خواهید یافت.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

فناوری‌های زیاد دیگری به جز آن‌هایی که در این مقاله معرفی کردیم نیز وجود دارند که برای جاسازی محتوای خارجی در صفحه‌های وب استفاده می‌شوند. برخی از آن‌ها را مانند <video> ،<audio> ،<img> در مقالات قبلی این سری آموزشی معرفی کردیم، اما موارد دیگری مانند <canvas> برای گرافیک‌های 2 بعدی و 3 بعدی تولیدشده از سوی جاوا اسکریپت و <svg> برای جاسازی گرافیک‌های برداری وجود دارند که باید آن‌ها را نیز بیاموزید. در بخش بعدی این سری مقالات آموزشی به بررسی SVG خواهیم پرداخت.

برای مطالعه قسمت بعدی این مجموعه مطلب آموزشی می‌توانید روی لینک زیر کلیک کنید:

• افزودن گرافیک برداری (SVG) به صفحات وب --- راهنمای کاربردی

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش طراحی سایت با HTML و CSS
• آموزش طراحی وب با HTML – مقدماتی
• مجموعه آموزش های طراحی سایت
• HTML و هر آنچه باید پیش از شروع یادگیری آن بدانید — راهنمای مقدماتی و کاربردی
• آشنایی مقدماتی با HTML — به زبان ساده
• محتوای ویدیویی و صوتی در HTML — راهنمای کاربردی

==