فریم‌ها یا همان قاب‌ها یکی از روش‌های سنتی قرار دادن یک پرونده وب درون پرونده دیگر هستند. استفاده از فریم‌ها بیشتر در زبان HTML نسخه 4 معمول بود و امروز بسیاری از تگ‌های فریم از جمله تگ frame و frameset در نسخه جدید پشتیبانی نمی‌شوند. چرا که مشکلات امنیتی زیادی ایجاد کرده، از طرفی امکان ریسپانسیو (واکنشگرا کردن در مقابل تغییر ابعاد صفحه نمایشگر در حالت موبایل یا دسکتاپ) بسیار سخت می‌شد.
با این وجود یکی از تگ‌های فریم‌ها به نام iframe امروزه نیز استفاده می‌شود و از قضا جزو تگ‌هایی است که در apiها و درج داده‌هایی مانند نقشه‌ها و ویدئوها از سایت‌های اشتراک‌گذاری ویدئو بسیار پرکاربرد می‌باشد. مثلا می‌توانید در قسمت به اشتراک‌گذاری فایل‌های آپارات، از گزینه Embed، یک تگ iframe را ایجاد کرده و در هر قسمت از سایت خود درج کنید.
در این تگ با استفاده از صفت‌های خاصی می‌توان امنیت فریم‌ها را بیشتر کرده و از بارگذاری فریم‌های غیر امن یا ارسال داده‌های غیر ضروری جلوگیری کرد.
این تگ یک تگ زوج می‌باشد. ساختار کلی این تگ به شرح زیر است :
<iframe src="آدرس صفحه وب"></iframe>
برای ایجاد این فریم، در یک پوشه مانند projects، دو فایل html با نام دلخواه بسازید. به عنوان مثال، فایل container.html و frame-A.html.
در فایل container.html، تگ‌های اصلی را ایجاد کرده و درون تگ body آن، فایل frame-A.html را فراخوانی نمایید. شکل کد container.html اینگونه خواهد بود :
<!doctype html>
<html>
<head>
<title>Container Page</title>
</head>
<body>
<iframe src="./frame-A.html"></iframe>
</body>
</html>حال کدهای فایل frame-A.html را باز کرده و درون آن هر محتوایی که دوست دارید وارد نمایید. این فایل را ذخیره کرده، سپس با استفاده از مرورگر، فایل container.html را باز نمایید. همانگونه که مشاهده می‌کنید، درون یک کادر، محتوایی که در frame-A.html درج کرده‌اید را مشاهده می‌کنید.
به غیر از صفت src، مهم‌ترین صفت‌هایی که این برچسب می‌تواند دریافت کند عبارتند از :
صفت title
مانند سایر تگ‌ها، این تگ نیز صفت title را دریافت می‌کند که باعث نمایش یک کادر متنی کوچک (Tooltip) هنگام بردن ماوس روی عنصر مورد نظر می‌شود.
صفت width و height
مانند برچسب img، این دو صفت برای عرض و ارتفاع کادر عنصر تعریف می‌شوند و به دو حالت ثابت (اعداد) و یا درصدی (اعداد به همراه درصد) هستند.
صفت name
می‌توان برای فریم‌ها در صفحه وب، نامی به صورت یک عبارت متنی تعریف کرد. از این صفت می‌توان برای باز کردن مقصد پیوندها در فریمی که نام آن تعریف شده است استفاده کرد.
برای این کار، در فایل container.html کدهای زیر را وارد کنید :
<!doctype html>
<html>
<head>
<title>Container Page</title>
</head>
<body>
<iframe src="./frame-A.html" name="myframe"></iframe>
<a href="https://kelaseno.ir" target="myframe">کلیک کنید</a>
</body>
</html>در فایل frame-A.html نیز هر محتوای دلخواهی را وارد کرده و ذخیره کنید. حال فایل container.html را اجرا نمایید. در این حالت، محتوای frame-A.html درون فایل container.html نمایش داده می‌شود. سپس روی پیوند کلیک نمایید تا محتوای وب‌سایت کلاسنو به جای محتوای frame-A.html درون فریم نمایش داده شود.
همچنین می‌توان از این صفت برای تزریق اطلاعات فرم‌ها به فریم‌ها استفاده کرد. این صفت برای اجرای دستورات اسکریپتی نیز کارایی دارد.
صفت sandbox
همانگونه که در ابتدای مبحث گفته شد، با استفاده از پروتکل‌هایی که امروز تعریف شده می‌توان مشکل امنیتی تگ‌های iframe را تا حد زیادی مرتفع کرد. این صفت یکی از گزینه‌هایی است که باعث افزایش امنیت فریم‌ها خواهد شد. اگر از این صفت، بدون مقدار استفاده شود، محتواهای حساس فریم مانند ارسال اطلاعات توسط فرم‌ها، کدهای اسکریپت، پیوندهای خارجی و … از کار خواهد افتاد.
<iframe src="https://kelaseno.ir" snadbox></iframe>
یا اگر بخواهیم فقط کدهای اسکریپت درون فریم فعال باشند از مقدار allow-scripts استفاده می‌کنیم.
<iframe src="https://kelaseno.ir" snadbox="allow-scripts"></iframe>
این حالت باعث افزوده شدن امکان ارسال اطلاعات فرم‌های درون فریم می‌گردد :
<iframe src="https://kelaseno.ir" snadbox="allow-forms"></iframe>
صفت referrerpolicy
از روش‌های دیگری که می‌توان باعث ارتقای امنیت فریم‌ها شد، استفاده از صفت referrerpolicy است. فرض کنید می‌خواهید درون صفحه وب خود یک فریم ایجاد کرده و یک سایت دیگر را داخل آن باز کنید که برای خودتان نیست. چیزی به شکل زیر :
<!doctype html>
<html>
<head>
<title>Container Page</title>
</head>
<body>
<iframe src="https://w3schools.com" name="myframe"></iframe>
</body>
</html>در قطعه کد بالا، صفحه ما درخواستی به سایت w3schools.com ارسال کرده و محتوای این سایت درون فریم نمایش داده می‌شود. به این ارسال درخواست HTTP REQUEST گفته می‌شود.
علاوه بر این درخواست، اطلاعاتی از وب‌سایت ما نیز به سایت w3schools.com ارسال می‌شود. این اطلاعات در بسته‌ای به نام head یا همان سرایند ارسال می‌شوند. وب‌سرورها می‌توانند با استفاده از این سرایند، اطلاعاتی شامل سایت فراخوان‌کننده، کاربران سایت، آی‌پی و داده‌های ترافیکی و … را استخراج کنند. ما می‌توانیم با استفاده از تعریف صفت referrerpolicy نحوه ارسال اطلاعات سرایند را کنترل نماییم.
در مثال زیر، مقدار صفت مربوطه no-referrer تعریف شده که به این معناست که درخواست به سایت w3schools.com ارسال شده ولی هیچ سرایندی را ارسال نمی‌کند.
<iframe src="https://w3schools.com" referrerpolicy="no-referrer"></iframe>
خط کد زیر، مانند مثال بالاست با این تفاوت که اگر وب‌سایت ما از پروتکل https باشد و وب‌سایت فراخوانی شده از پروتکل http فقط در این صورت سرایندی ارسال نمی‌شود.
<iframe src="https://w3schools.com" referrerpolicy="no-referrer-when-downgrade"></iframe>
نکته : برای مطالعه بیشتر این صفت، به این وب‌سایت مراجعه نمایید.
پیوندها و فریم‌ها
می‌توان درون هر فریم، یک فریم دیگر ایجاد کرده و این کار را در چند لایه و به صورت قاب‌های تودرتو نیز انجام داد. یعنی درون frame-A.html نیز یک تگ iframe تعریف کرد و یک فایل دیگر مثل frame-B.html را درون آن فراخوانی کرد. در این حالت، frame-A.html، فایل والد frame-B.html خواهد بود.
فرض کنید سه فایل را به شکل زیر ایجاد کرده‌ایم :
درون فایل container.html، یک فریم برای فراخوانی فایل frame-A.html ایجاد می‌کنیم :
<!doctype html>
<html>
<head>
<title>Container Page</title>
</head>
<body>
<iframe src="./frame-A.html"></iframe>
</body>
</html>درون فایل frame-A.html هم یک فریم دیگر ایجاد کرده و فایل frame-B.html را فراخوانی می‌کنیم.
<!doctype html>
<html>
<head>
<title>Frame A Page</title>
</head>
<body>
<iframe src="./frame-B.html"></iframe>
</body>
</html>اکنون در فایل frame-B.html، یک پیوند ایجاد کرده و صفت target آن را self_ قرار می‌دهیم :
<!doctype html>
<html>
<head>
<title>Frame B Page</title>
</head>
<body>
<a href="https://kelaseno.ir" target="_self">کلیک کنید</a>
</body>
</html>حال، فایل container.html را با مرورگر اجرا نمایید. می‌بینید که درون آن یک فریم است (frame-A.html) و درون آن فریم هم یکی دیگر (frame-B.html). روی لینک کلیک کنید. چون صفت target برابر self_ است، سایت کلاسنو در همان فریم باز می‌شود.
اکنون مقدار target را parent_ قرار داده و بار دیگر همین فایل را با مرورگر اجرا کنید. این‌بار با کلیک روی لینک، صفحه کلاسنو در فریم بالادستی (frame-A.html) باز خواهد شد.
با تعریف مقدار target به صورت top_ پس از کلیک روی لینک، سایت کلاسنو در صفحه اصلی (container.html) نمایش داده می‌شود.
