ایجاد لینک‌های وب

مقدمه

در این درس در مورد یکی از مهمترین عناصر وب یعنی لینک‌ها صحبت می‌کنیم که امکان جابجایی در بین اسناد یا صفحات وب را فراهم می‌کنند. به این ترتیب که کاربران با کلیک روی یک لینک به مقصد مورد نظر منتقل می‌شوند. این مقصد می‌تواند یک صفحه‌ی وب دیگر یا بخشی از صفحه‌ی جاری و یا یک آدرس ایمیل و هر فایلی که در وب پشتیبانی می‌شود، باشد. البته همانطور که در این درس خواهیم دید، مقصد یک لینک می‌تواند مبتنی بر پروتکل‌های دیگری به جز HTTP مانند tel و email نیز باشد. عنصری که وظیفه‌ی ایجاد لینک‌ها را بر عهده دارد، عنصری است با نام a که از عبارت anchor گرفته شده و مقصد لینک با استفاده از صفت href مشخص می‌شود. در این درس، عنصر a و صفت‌های این عنصر را معرفی و بررسی می‌کنیم و به این ترتیب، با روش‌های ایجاد انواع لینک‌های وب آشنا می‌شویم.

صفت‌های عنصر a

در HTML عنصری کلیدی و بسیار کاربردی با نام a وجود دارد که برای ایجاد لینک در صفحه کاربرد دارد. این عنصر می‌تواند برای ایجاد انواع مختلفی از لینک‌ها به کار رود. مقصد لینک و نوع سند لینک‌شده از مهمترین مواردی هستند که باید با استفاده از صفت‌های عنصر a تعیین شوند. تعیین این دو مورد به زبان ساده یعنی اینکه مشخص کنیم که لینک به چه منبعی اشاره می‌کند و آن منبع نسبت به صفحه‌ی جاری چه نقشی دارد. در جدول زیر می‌توانید لیست صفت‌های عنصر a را ببینید و در ادامه به بررسی این صفت‌ها می‌پردازیم.

در جدول بالا توضیح مختصری راجع به هریک از صفت‌های عنصر a ارائه شده و در ادامه، این صفت‌ها را به همان ترتیبی که در جدول بالا ارائه شده‌اند، بررسی می‌کنیم.

تعیین مقصد لینک با صفت href

اولین موضوعی که هنگام ایجاد لینک باید مشخص شود، مقصد لینک است. مقصد لینک، مکانی است که کاربر با کلیک روی عبارت لینک به آنجا منتقل می‌شود. برای تعیین این مقصد از صفت href استفاده می‌شود. مقدار این صفت یک آدرس url است که معرف مکانی است که کاربر باید با کلیک روی لینک به آنجا منتقل شود. این آدرس url می‌تواند مبتنی بر پروتکل‌های دیگری به جز HTTP هم باشد. در ادامه، با بررسی مقادیر قابل تخصیص به صفت href، با انواع لینک‌های قابل ایجاد در صفحات وب آشنا می‌شویم.

لینک به یک فایل در وب

‌اگر بخواهیم لینکی به یک سند وب دیگر و یا هر نوع فایل مورد پشتیبانی در وب، از فایل‌های مالتی‌مدیا مانند تصاویر و فیلم‌ها گرفته تا اسناد متنی مورد پشتیبانی در وب مانند فایل‌های XML و JSON و استایل‌شیت‌ها و اسکریپت‌ها و غیره ایجاد کنیم، باید از آدرس‌های url مبتنی بر HTTP استفاده کنیم. چنین آدرسی می‌تواند به صورت مطلق (absolute) یا نسبی (relative) نوشته شود که در ادامه با ذکر مثال، تفاوت این دو نوع آدرس و موارد استفاده‌ی هر یک را نشان می‌دهیم. درکدهای زیر، نحوه‌ی استفاده از آدرس‌های url مطلق برای ارجاع به صفحات وب دیگر را می‌بینید.

HTML

<ul>
  <li><a href="https://fifa.com">FIFA</a></li>
  <li><a href="https://fifa.com/fifa-world-ranking">World Ranking</a></li>
  <li><a href="https://uefa.com/insideuefa/about-uefa/news/newsid=2623335.html">UEFA news</a></li>
  <li><a href="https://variety.com">Variety</a></li>
</ul>

همانطور که می‌بینید، یک آدرس مطلق با http یا https که بیانگر استفاده از پروتکل HTTP یا نسخه‌ی امن آن یعنی HTTPS است، شروع شده و با نام دامنه‌ی (domain name) سایت مورد نظر و مسیر فایل مورد نظر در دایرکتوری مربوط به آن سایت، ادامه می‌یابد. به عنوان مثال، لینک اول به صفحه‌ی اصلی وبسایت فدراسیون جهانی فوتبال اشاره دارد و لینک دوم، به صفحه‌ی دیگری از این وبسایت اشاره می‌کند که به رتبه‌بندی (ranking) تیم‌های ملی فوتبال اختصاص دارد.

اما در بسیاری از مواقع می‌توانیم از یک آدرس نسبی استفاده کنیم. عبارت نسبی نشان می‌دهد که این آدرس‌ها باید نسبت به چیزی سنجیده شوند. در حقیقت، یک آدرس نسبی می‌تواند نسبت به پروتکل، مبدأ و یا مکان فعلی سنجیده شود. یعنی یک لینک نسبی می‌تواند همانند لینک اول مثال زیر، یک لینک protocol-relative باشد و نسبت به پروتکل سنجیده شود یا همانند لینک دوم، یک لینک origin-relative باشد و نسبت به مبدأ سنجیده شود و یا مثل لینک‌های سوم و چهارم، یک لینک Directory-relative باشد که نسبت به دایرکتوری سنجیده می‌شود.

HTML

<a href="//example.com">Protocol-relative URL</a>
<a href="/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>
<a href="../../projects">Directory-relative URL</a>

یک مرورگر در هنگام مواجهه با لینک اول مثال بالا، از پروتکل صفحه‌ی جاری برای صفحه‌ی مقصد نیز استفاده می کند. توجه داشته باشید که در مورد این نوع لینک‌ها، پروتکل‌های HTTP و HTTPS متفاوت در نظر گرفته می‌شوند. یعنی اگر مثلاً صفحه‌ی جاری دارای پروتکل HTTP باشد و صفحه‌ی مقصد دارای پروتکل HTTPS باشد و ما از یک آدرس protocol-relative استفاده کنیم، مرورگر صفحه‌ی مقصد را پیدا نمی‌کند.

در مورد لینک دوم، از آدرس نسبی نسبت به مبدأ استفاده شده که در اینجا منظور از مبدأ همان دایرکتوری root وبسایت جاری است. در این حالت، مرورگر علاوه بر پروتکل، نام دامنه را نیز از روی صفحه‌ی جاری می‌خواند. در این نوع لینک‌ها از یک کاراکتر اسلش / برای اشاره به دایرکتوری root استفاده می‌شود و مسیر فایل مورد نظر نسبت به دایرکتوری root در ادامه وارد می‌شود.

لینک‌های سوم و چهارم مثال بالا نسبت به دایرکتوری جاری سنجیده می‌شوند و همانطور که احتمالاً می‌دانید، یک کاراکتر نقطه به دایرکتوری جاری و دو کاراکتر نقطه‌ی مجاور به دایرکتوری والد (parent) اشاره می‌کنند.

لینک به قسمتی از یک فایل

نوع دیگری از لینک‌های قابل تعریف در اسناد وب، لینک‌‌هایی هستند که برای انتقال کاربر به بخشی از صفحه یا فایل مورد نظر کاربرد دارند. در این صورت، باید از یک آدرس url تکه‌ای (fragment url) به عنوان مقدار صفت href استفاده کنیم. این نوع از آدرس‌های url شامل آدرس یک فایل منبع اصلی هستند که در ادامه با یک کاراکتر # و سپس، روشی برای اشاره به قسمتی از آن فایل همراه هستند. روشِ اشاره به بخش مورد نظر به نوع فایل ( و به طور دقیق‌تر به MIME Type) بستگی دارد.

ساده‌ترین مثال از این نوع لینک‌ها، لینکی است که به بخشی از فایل یا صفحه‌ی جاری اشاره می‌کند. برای ایجاد چنین لینکی در یک صفحه، مانند مثال زیر از صفت id عنصر هدف یعنی عنصری که مقصد لینک تلقی می‌شود، استفاده می‌کنیم. در حقیقت، در مثال زیر به مرورگر اعلام شده که کاربر با کلیک روی لینک، به بخشی از صفحه منتقل شود که عنصری با id=c20 قرار دارد.

HTML

<p><a href="#c20">Jump to chapter 20</a></p>

اگر بخواهیم به جای صفحه‌ی جاری به بخشی از یک صفحه‌ی وب دیگر لینک دهیم، کافیست مشابه مثال بالا از مقدار صفت id عنصر مورد نظر در صفحه‌ی مقصد استفاده کنیم و عبارت #idname را در انتهای آدرس url مربوط به آن صفحه قرار دهیم.

HTML

<p><a href="https://example.com/test/onepage.html#demo">Go to one part of target page</a>span class="punctuation"></p>

با کلیک روی لینک بالا، کاربر به عنصری از صفحه‌ی تعیین شده منتقل می‌شود که مقدار صفت id آن برابر با demo است.

لینک‌های مربوط به برقراری تماس

یک نوع دیگر از لینک‌هایی که می‌توان در اسناد وب ایجاد کرد، لینک‌های click to call هستند. در حقیقت، با وجودی که بسیاری از مرورگرهای موبایل، شماره‌تلفن‌ها را شناسایی کرده و این امکان را فراهم می‌کنند که کلیک روی هر شماره تلفن، منجر به برقراری تماس شود، بهتر است این کار را به صورت دستی انجام دهیم. برای تعیین یک شماره تلفن به عنوان یک لینک باید از پروتکل tel: مانند مثال زیر استفاده کنیم.

HTML

<p>
  NIST Telephone Time-of-Day Service 
  <a href="tel:+1-303-499-7111">+1 (303) 499-7111</a>
</p>

اگر یک کاربر موبایل یا هر دستگاه دارای قابلیت تماس صوتی روی این لینک کلیک کند، بسته به مرورگر کاربر یا بلافاصله تماس برقرار می‌شود و یا ابتدا از کاربر سوال می‌شود و در صورت تأیید، شماره‌گیری انجام می‌شود. اما چنانچه کاربری از دستگاه‌هایی که از قابلیت تماس صوتی برخوردار نیستند، مانند کامپیوترهای دسکتاپ، صفحه را مشاهده کرده و روی لینک کلیک کند، اپلیکیشن تلفنی پیش‌فرض روی کامپیوتر او مانند Google Voice و یا Microsoft Communicator اجرا می‌شود.

البته برخی از مرورگرهای موبایل مانند Mobile Safari به طور خودکار شماره‌تلفن را به لینک تبدیل می‌کنند و استایل پیش‌فرض لینک‌ها را نیز روی آنها اعمال می‌کنند. برای جلوگیری از این اتفاق، می‌توان از یک تگ متا به صورت زیر استفاده کرد:

HTML

<meta name="format-detection" content="telephone=no">

نکته‌ی دیگر در مورد لینک‌های click to call این است که بهتر است همیشه از فرمت شماره‌گیری استاندارد بین‌المللی استفاده کنید. مطابق این فرمت استاندارد، هر شماره‌تلفن با یک علامت + شروع شده و سپس کد کشور، کد محلی و شماره‌تلفن آورده می‌شود. در ضمن، با وجودی که اجباری در این کار نیست اما بهتر است از کاراکتر خط‌فاصله (hyphen) برای جدا کردن بخش‌های مختلف این فرمت استفاده کنید.

بسیار خوب. با صفت href و کارکرد آن و مقادیری که می‌توان به این صفت اختصاص داد، آشنا شدیم. در ادامه، کار بررسی صفت‌های عنصر a را با معرفی و بررسی صفت hreflang پی می‌گیریم.

تعیین زبان فایل لینک‌شده با صفت hreflang

با استفاده از صفت hreflang می‌توانیم زبان عمومی فایل لینک‌شده را اعلام کنیم. مثال زیر را ببینید.

HTML

<a href="https://nasa.com" hreflang="en">content</a>

این صفت همانند صفت عمومی lang می‌تواند یک کد زبانی را به عنوان مقدار دریافت کند. کدهاي مربوط به زبان‌ها به طور رسمی تحت استاندارد ISO 639 تعریف شده‌اند و لیست این کدها را می‌توانید در صفحه‌ی Language Codes ببینید.

تعیین نوع فایل مقصد با صفت type

برای تعیین نوع فایل مقصدِ یک لینک از صفتی به نام type استفاده می‌شود. مقداری که این صفت می‌تواند دریافت کند یک MIME type است که استانداردی است برای تعیین ماهیت و فرمت یک سند یا فایل. یک MIME type که media type یا content type نیز نامیده می‌شود، دارای فرم کلی زیر است:

type/subtype

در اینجا type مشخص‌کننده‌ی رسته (category) عمومی مانند video و text است که فایل یا سند مورد نظر به آن تعلق دارد و subtype مشخص‌کننده‌ی نوع دقیق فایل یا سند است. به جای واژه‌ی type می‌توانیم از نوع و به جای subtype نیز می‌توانیم از زیرنوع استفاده کنیم.

HTML

<a href="https://fifa.com" type="text/html">FIFA</a>

نوع یا MIME type یک فایل pdf برابر با application/pdf است و یا یک سند HTML دارای نوع text/html است. یک فایل ویدیویی mp4 دارای نوع video/mp4 است و یک فایل png دارای نوع image/png است. در صفحه‌ی MIME Types می‌توانید به لیست کامل MIME types دسترسی داشته باشید.

البته امکان افزودن یک پارامتر دلخواه نیز به MIME type وجود دارد. هدف از این کار، فراهم کردن جزئیات بیشتر است و به فرم کلی زیر قابل انجام است:

type/subtype;parameter=value

به عنوان مثال، برای هر MIME type از نوع عمومی text می‌توانیم از یک پارمتر با نام charset برای تعیین مجموعه‌ی کاراکتری استفاده کنیم که در حالت پیش‌فرض روی مجموعه‌ی ASCII تنظیم شده است (مگر اینکه این پارامتر توسط مرورگر بازنویسی یا override شده باشد). برای تعیین utf-8 به عنوان مجموعه‌ی کاراکتری استفاده شده در یک فایل متنی ساده از text/plain;charset=UTF-8 استفاده می‌شود.

نکته‌ی پایانی که در مورد MIME types باید بدان اشاره شود، این است که این نوع‌ها در دو گروه کلی جای می‌گیرند: گروه اول نوع‌های discrete هستند که نشان‌دهنده‌ی یک فایل یا سند هستند و گروه دوم نوع‌های multipart هستند که از چندین مولفه‌ی جداگانه تشکیل شده‌اند که هر یک می‌تواند نوع خودش را داشته باشد. نوع‌هایی مانند video، audio، text و image از گروه discrete هستند و بارزترین مثال از نوع‌های multipart فایل‌های مختلفی هستند که به یک ایمیل ضمیمه شده‌اند.

دانلود فایل با صفت download

اگر بخواهیم فایلی که با استفاده از یک صفت href به آن اشاره شده، به جای تفسیر و بارگذاری توسط مرورگر، دانلود شود، می‌توانیم از صفتی با نام download استفاده کنیم.

HTML

<p>Click on the below link to download image</p>
<a href="https://github.com/LearnClasico/html-full-tutorial/tree/main/chapter-05/lesson-01/ex-04/demo.png" download>a demo image</a>

اگر همانند مثال بالا، مقداری را برای این صفت تنظیم نکنیم، مرورگر بر اساس مکانیزم‌هایی که در اینجا قصد پرداختن به آنها را نداریم، یک نام و پسوند برای فایل مورد نظر پیشنهاد می‌دهد. اما اگر مقداری را برای این صفت فراهم کنیم، همان مقدار به عنوان نام فایل دانلود شده در نظر گرفته می‌شود. البته کاراکترهای / و \ به کاراکتر ـ تبدیل شده و چنانچه از کاراکترهایی استفاده کرده باشیم که از نظر سیستم فایل (File System) استفاده از آنها در نام فایل‌ها مجاز نباشد، خود مرورگر تغییرات لازم را انجام می‌دهد.

تعیین محل باز شدن لینک با صفت target

برای درک دقیق صفت target ابتدا باید با مفهومی به نام browsing context یا bc آشنا شویم. یک bc محیطی است که مرورگر، سند را درون آن نمایش می‌دهد. این محیط در مرورگرهای مدرن معمولاً‌ یک زبانه (tab) است اما می‌تواند یک پنجره و یا بخشی از یک صفحه مانند یک frame یا iframe نیز باشد.

به طور پیش‌فرض، وقتی روی لینکی کلیک می‌کنیم، سند لینک‌شده در bc فعلی باز می‌شود. اما در صورت تمایل، می‌توانیم این رفتار پیش‌فرض را تغییر دهیم و صفت target صفتی است که به همین منظور معرفی شده است. در واقع، این صفت، تعیین‌کننده‌ی محل باز شدن سند لینک‌شده است. این صفت می‌تواند یکی از مقادیر زیر را دریافت کند:

• _self: این مقدار با حالت پیش‌فرض معادل است و باعث باز شدن سند لینک‌شده در bc فعلی می‌شود.
• _blank: این مقدار باعث می‌شود که سند لینک‌شده در یک زبانه‌ی جدید باز شود اما در صورت تمایل، می‌توانیم تنظیمات مرورگر را طوری تغییر دهیم که سند در یک پنجره‌ی جدید نمایش داده شود.
• _parent: این مقدار باعث می‌شود که سند لینک‌شده در bc والد bc فعلی نمایش داده شود. در غیاب یک والد، این مقدار مانند _self عمل می‌کند.
• _top: این مقدار باعث نمایش سند لینک شده در بالاترین والد bc نسبت به bc فعلی می‌شود. در غیاب یک چنین bc این مقدار نیز مانند _self عمل می‌کند.

تعیین رابطه بین سند فعلی و ستد لینک‌شده با صفت rel

صفت rel یکی از مهمترین صفت‌های عنصر a است که از عبارت relationship گرفته شده و مشخص‌کننده‌ی رابطه‌ی بین سند جاری و سند یا فایل لینک‌شده است. موتورهای جستجو از این صفت برای کسب اطلاعات بیشتر در مورد لینک استفاده می‌کنند. به این صفت می‌توان یک یا چند مورد از مقادیر زیر را اختصاص داد:

• alternate: چنانچه سند لینک‌شده یک جایگزین برای سند فعلی باشد، این مقدار را به صفت rel اختصاص می‌دهیم. یک نسخه‌ی pdf از صفحه‌ی فعلی یا یک ترجمه از این صفحه در زمره‌ی اسناد جایگزین صفحه به شمار می‌روند.
• author: اگر سند لینک‌شده صفحه‌ای در مورد نویسنده‌ی صفحه‌ی فعلی (مثلاً صفحه‌ی نویسنده در شبکه‌های اجتماعی) و احیاناً حاوی روش‌هایی برای برقراری تماس با وی باشد، این مقدار را به صفت rel اختصاص می‌دهیم.
• license: اگر سند لینک‌شده حاوی اطلاعات مربوط به لایسنس صفحه‌ی جاری باشد، این مقدار را برای صفت rel در نظر می‌گیریم.
• external: اگر سند لینک‌شده صفحه ای از سایت جاری نباشد و کاربر با دنبال کردن آن از سایت خارج شود، این مقدار را به صفت rel اختصاص می‌دهیم.
• next: چنانچه یک دنباله‌ی ترتیبی از سندها داشته باشیم که در بین این اسناد، سند جاری سند شماره‌ی n و سند لینک‌شده سند شماره‌ی n+1 باشد، از این مقدار برای صفت rel استفاده می‌کنیم.
• prev: چنانچه یک دنباله‌ی ترتیبی از سندها داشته باشیم که در بین این اسناد، سند جاری سند شماره‌ی n و سند لینک‌شده سند شماره‌ی n-1 باشد، از این مقدار برای صفت rel استفاده می‌کنیم.
• nofollow: اگر سند لینک‌شده متعلق به سایت ما نباشد و کنترلی روی آن نداشته باشیم و یا پای یک رابطه‌ی تجاری و لینک تبلیغاتی در میان باشد، این مقدار را به صفت rel اختصاص می‌دهیم تا موتورهای جستجو را از دنبال کردن این لینک منع کنیم.
• noopener: اگر بخواهیم مانع دستیابی سند لینک‌شده به سند فعلی و به طور خاص مانع دستکاری شیء window.opener توسط مالک آن سند شویم، این مقدار را به صفت rel اختصاص می‌دهیم.
• noreferrer: استفاده از این مقدار باعث می‌شود که مرورگر آدرس صفحه‌ی فعلی یا هر نوع طلاعات دیگر در مورد این صفحه را که به طور معمول در قالب یک http header به نام referer ذخیره می‌شود، به صفحه‌ی جدید ارسال نکند.
• help: اگر سند لینک‌شده حاوی اطلاعات بیشتری در مورد عنصر والد عنصر لینک فعلی و محتوای آن باشد، می‌توانیم این مقدار را به صفت rel اختصاص دهیم.
• search: اگر سند لینک شده صفحه‌ای باشد که رابط کاربری آن اختصاصاً‌ برای ارائه‌ی قابلیت جستجو در سند فعلی طراحی شده باشد، می‌توانیم این مقدار را به صفت rel اختصاص دهیم.

در مورد مقدار alternate توجه داشته باشید که اگر سند جایگزین مورد نظر که لینکی به آن ایجاد کرده‌ایم، یک نسخه از صفحه به فرمت دیگری مثل pdf باشد، باید صفت type را نیز برای لینک به کار بگیریم و نوع آن سند را اعلام کنیم و اگر سند لینک شده یک نسخه‌ی ترجمه شده از صفحه به زبانی دیگر باشد، باید از یک صفت hreflang نیز برای اعلام آن زبان استفاده کرد.

HTML

<a rel="alternate" href="persianVersion.html" hreflang="fa">Translated page</a>
<a rel="alternate" href="printVersion.pdf" type="application/pdf">pdf version</a>

توضیح بیشتر در مورد nopener و noreferrer

وقتی لینکی با target=_blank را در وبسایت خود قرار می‌دهیم، صفحه‌ی لینک‌شده در پروسه‌ی (process) یکسانی با صفحه‌ی ما اجرا می‌شود و این امر با دو مسئله همراه است که یکی به امنیت کاربران و دیگری به کارایی (performance) وبسایت ما مربوط است. آسیبی که می‌تواند به کارایی وبسایت ما وارد شود ناشی از این است که صفحه‌ی مقصد در همان پروسه‌ای اجرا می‌شود که سایت ما در حال اجراست و چنانچه این صفحه حاوی مقدار قابل توجهی اسکریپت باشد، روی کارایی سایت ما تأثیر منفی می‌گذارد.

مسئله‌ی امنیتی ایجاد شده این است که مالک سند لینک‌شده به بخشی از صفحه‌ی ما دسترسی پیدا می‌کند. این دسترسی از طریق شیء جاوااسکریپتی window.opener میسر می‌شود. مالک سند لینک‌شده می‌تواند پراپرتی window.opener.location را طوری دستکاری کند که کاربر به جای انتقال به صفحه‌ای که آدرسش را به عنوان مقدار صفت href تعیین کرده‌ایم، به صفحه‌ی دیگری منتقل شود. برای درک موضوع، سناریوی زیر را در نظر بگیرید:

شخصی یک صفحه‌ی آلوده ایجاد کرده و لینکی به این صفحه را روی شبکه‌های اجتماعی مانند فیسبوک قرار می‌دهد. وقتی کاربری روی این لینک کلیک می‌کند، وبسایت مخرب می‌تواند با استفاده از پراپرتی windows.opener.location کاربر را به صفحه‌ی دیگری هدایت کند که با ظاهری شبیه به صفحه‌ی ورود فیسبوک طراحی شده و پیامی را به کاربر نشان می‌دهد که از وی بخواهد مجدداً با وارد کردن یوزر و پسورد خود، عمل login را انجام دهد. به این ترتیب، کاربر قربانی یک حمله‌ی فیشینگ خواهد شد. البته این فقط یک مثال فرضی است، چون فیسبوک با تنظیم صفت rel با مقدار noopener مانع از دسترسی صفحه‌ی مخرب به صفحه‌ی خود می‌شود. بنابراین، در مورد لینک‌های غیرقابل اعتماد می‌توانیم با تنظیم مقدار noopener برای صفت rel مانع از دسترسی سند لینک‌شده به پراپرتی location و تغییر آن بشویم.

از طرف دیگر، وقتی کاربر با کلیک روی یک لینک از صفحه‌ی جاری به صفحه‌ای دیگر می‌رود، اطلاعاتی مثل آدرس صفحه‌ی قبلی در قالب یک http header با نام referer در دسترس صفحه‌ی جدید قرار می‌گیرد. برای جلوگیری از این امر می‌توانیم مقدار noreferrer را به صفت rel اختصاص دهیم. در حقیقت، noreferrer همانند noopener از دسترسی سند لینک‌شده به سند فعلی جلوگیری می‌کند اما علاوه بر این، از حمل اطلاعات مربوط به صفحه‌ی فعلی در قالب referer نیز ممانعت به عمل می‌آورد.

کنترل اطلاعات ارسالی توسط هدر referer

گفتیم که referer نام یک http header است که حاوی اطلاعاتی در مورد صفحه‌ی مبدأ (صفحه‌ی حاوی لینک) است که در اختیار صفحه‌ی مقصد (سند لینک‌شده) قرار می‌گیرد. همچنین، دیدیم که با اختصاص مقدار noreferrer به صفت rel یک لینک می‌توانیم از ارسال هرگونه اطلاعات در قالب این http header جلوگیری کنیم. اما عنصر a دارای صفتی با نام referrerpolicy است که به ما امکان می‌دهد کنترل بیشتری بر referer و اطلاعات ارسال‌شده توسط این http header داشته باشیم.

برای اینکه نقش این صفت و مقادیر قابل تخصیص به آن را به خوبی درک کنید، باید ابتدا با دو اصطلاح مربوط به درخواست و پاسخ‌های HTTP آشنا شوید. این اصطلاحات same-origin و cross-origin هستند. در مورد واژه‌ی origin یا مبدأ قبلاً صحبت کردیم اما از باب یادآوری عرض می‌کنم که مبدأ در وب به پروتکل، نام دامنه و پورت اطلاق می‌شود. به عبارت دیگر، سه بخش ابتدایی یک url را مبدأ‌ یا origin می‌گوییم. علاوه بر این، می‌دانیم که وقتی روی لینکی کلیک می‌شود، یک درخواست (request) برای سرور میزبان سند یا فایل مورد اشاره‌ی لینک ارسال می‌شود.

اگر لینکی که در یک صفحه قرار دارد، به سندی ارجاع دهد که پروتکل، نام دامنه و پورت یکسانی با صفحه‌ی فعلی (صفحه‌ی حاوی لینک) ‌داشته باشد، کلیک روی آن لینک منجر به ایجاد یک درخواست same-origin می‌شود؛ یعنی سند حاوی لینک و سند لینک شده دارای origin یا مبدأ‌ یکسانی هستند. اما چنانچه یکی از مولفه‌های پروتکل، دامنه و پورت بین این دو سند با هم یکی نباشد، کلک روی لینک منجر به ایجاد یک درخواست cross-origin می‌شود.

با استفاده از صفت referrerpolicy می‌توانیم روی اطلاعاتی که در قالب referer به صفحه‌ی مقصد ارسال می‌شود، کنترل داشته باشیم. این اطلاعات، بخش‌های مختلف url مربوط به سند فعلی هستند. به عبارتی، referer می‌تواند حاوی هر یک از بخش‌های مبدأ (پروتکل، دامنه، پورت)، مسیر (path) و پارامترهای اختیاری موجود در url سند فعلی باشد و صفت referrerpolicy تعیین می‌کند که referer حاوی کدام یک از این بخش‌ها باشد. مقادیری که صفت referrerpolicy می‌تواند دریافت کند، عبارتند از:

• no-referrer: این مقدار از ارسال هرگونه اطلاعات در قالب referer جلوگیری می‌کند.
• no-referrer-when-downgrade: استفاده از این مقدار به این معناست که همه‌ی بخش‌های url صفحه‌ی فعلی یعنی مبدأ، مسیر و پارامترهای احتمالی موجود در url صفحه‌ی فعلی برای صفحه‌ی مقصد در دسترس باشد به شرطی که سطح امنیتی آن صفحه از صفحه‌ی فعلی پایین‌تر نباشد. یعنی اگر پروتکل صفحه‌ی فعلی HTTPS و صفحه‌ی مقصد HTTP باشد، این اطلاعات در اختیار صفحه‌ی مقصد قرار نمی‌گیرد و در غیر این صورت، صفحه‌ی مقصد همه‌ی بخش‌های url صفحه‌ی فعلی را دریافت می‌کند.
• origin: استفاده از این مقدار باعث می‌شود که اطلاعات مربوط به مبدأ (پروتکل، نام دامنه و پورت) تنها اطلاعاتی باشند که توسط referer ارسال می شوند.
• origin-when-cross-origin: استفاده از این مقدار به این معناست که چنانچه با کلیک روی لینک یک درخواست same-origin ایجاد شود و پروتکل امنیتی سند لینک شده نسبت به پروتکل امنیتی سند فعلی سطح پایین‌تری نداشته باشد، referer حاوی همه‌ی بخش‌های url سند فعلی باشد. اما اگر یکی از این دو شرط برقرار نباشد، تنها اطلاعات مربوط به مبدأ در قالب referer ارسال شوند.
• same-origin: استفاده از این مقدار باعث می‌شود که برای درخواست‌های same-origin همه‌ی بخش‌های url سند فعلی در قلب referer ارسال شده و برای درخواست‌های cross-origin هیچ اطلاعاتی ارسال نشود.
• strict-origin: درصورتی که سطح امنیتی پروتکل‌های دو سند یکسان باشد، صفحه‌ی مقصد به اطلاعات مربوط به origin یعنی پروتکل، دامنه و پورت دسترسی داشته باشد و در غیر این صورت، اطلاعاتی در قالب referer ارسال نشود.
• strict-origin-when-cross-origin: استفاده از این مقدار به این معناست که در مورد یک درخواست same-origin اطلاعات مربوط به مبدأ، مسیر و پارامترها ارسال شود و در مورد درخواست‌های cross-origin در صورت یکسان بودن سطح امنیتی پروتکل، اطلاعات مربوط به مبدأ فرستاده شود و در غیر این صورت، هیچ گونه اطلاعاتی در قالب referer ارسال نشود.
• unsafe-url: اطلاعات مربوط به مبدأ، مسیر و پارامترها در هر درخواستی بدون توحه به امنیت آن ارسال شود.

در پایان این بخش، توجه شما را به دو نکته جلب می‌کنم. نکته‌ی اول اینکه سابقاً مقدار no-referrer-when-downgrade مقدار پیش‌فرض صفت referrerpolicy محسوب می‌شد اما از نوامبر 2020 به بعد، مقدار strict-origin-when-cross-origin به عنوان مقدار پیش‌فرض این صفت تعیین شده است. نکته‌ی دوم اینکه برای یک صفحه این امکان وجود دارد که با استفاده از یک تگ meta به صورت زیر وضعیت referer و اطلاعات موجود در آن را برای کل صفحه تعیین کنیم:

HTML

<meta name="referrer" content="origin">

البته به جای origin می‌توانیم از هر یک از مقادیر صفت referrerpolicy استفاده کنیم.