rel=”noopener” چیست؟ چرا به لینک‌های وردپرس اضافه می‌شه؟

اگه موقع بررسی کد یکی از لینک‌های سایتتون با عبارت rel="noopener" روبه‌رو شدید، احتمالاً می‌خواید بدونید این عبارت از کجا اومده و آیا حذفش روی سئو یا امنیت سایت اثر می‌ذاره. جواب کوتاه اینه که noopener یک ویژگی امنیتی برای لینک‌هایی هست که صفحه‌ای رو در تب جدید باز می‌کنن. این ویژگی اجازه نمی‌ده صفحه جدید از راه window.opener صفحه قبلی رو کنترل کنه.

توی این راهنما معنی بخش‌های مختلف این کد، خطر Reverse Tabnabbing، رفتار مرورگرهای امروزی و وضعیت فعلی وردپرس رو خیلی ساده بررسی می‌کنیم. بعد هم یاد می‌گیرید چطور خروجی واقعی لینک رو ببینید و تفاوت noopener با noreferrer و nofollow رو تشخیص بدید.

rel=”noopener” چیست و چه کاری انجام می‌ده؟

برای فهمیدن rel noopener چیست، بهتره اول اجزای یک لینک رو جدا کنیم. ویژگی target="_blank" به مرورگر می‌گه مقصد لینک رو در یک تب یا پنجره جدید باز کنه. ویژگی rel هم رابطه صفحه فعلی با مقصد لینک رو مشخص می‌کنه. مقدار noopener یعنی صفحه جدید نباید به صفحه‌ای که اون رو باز کرده دسترسی داشته باشه.

یک لینک ساده با این ویژگی به شکل زیر نوشته می‌شه:

<a href="https://example.com" target="_blank" rel="noopener">مشاهده سایت نمونه</a>

توی این نمونه، مقصد در تب جدید باز می‌شه و noopener ارتباطی رو که ممکنه از راه window.opener ایجاد بشه قطع می‌کنه. خود لینک همچنان عادی کار می‌کنه و کاربر هم وارد همون نشانی می‌شه.

چرا noopener برای امنیت لینک‌ها مهمه؟

موضوع اصلی به ارتباط بین تب قبلی و تب جدید برمی‌گرده. اگه صفحه جدید به صفحه بازکننده دسترسی داشته باشه، ممکنه تلاش کنه نشانی تب قبلی رو عوض کنه. noopener این ارتباط رو قطع می‌کنه و جلوی این مدل دست‌کاری رو می‌گیره.

window.opener چیه؟

window.opener یک ویژگی در JavaScript هست. صفحه‌ای که در تب جدید باز شده، در بعضی شرایط می‌تونه با کمک اون به پنجره یا تب بازکننده اشاره کنه. به زبان ساده، تب جدید متوجه می‌شه کدوم صفحه اون رو باز کرده.

البته سیاست امنیتی مرورگر که با نام Same-Origin Policy شناخته می‌شه، دسترسی کامل دو سایت با مبدأ متفاوت رو محدود می‌کنه. مبدأ یعنی ترکیب پروتکل، دامنه و پورت یک نشانی. بااین‌حال، بعضی عملیات محدود مثل تلاش برای تغییر نشانی تب قبلی می‌تونن خطرساز بشن. پس بهتره این محدودیت رو با مجوز دسترسی کامل اشتباه نگیرید.

حمله Reverse Tabnabbing چطور اتفاق می‌افته؟

Reverse Tabnabbing یا «دست‌کاری تب قبلی» سناریویی هست که توی اون، صفحه بازشده تلاش می‌کنه تب اولیه رو به یک نشانی جعلی بفرسته. برای نمونه، کاربر روی لینکی کلیک می‌کنه و مقصد در تب جدید باز می‌شه. وقتی حواس کاربر به تب جدید هست، صفحه مقصد نشانی تب قبلی رو به یک صفحه ورود جعلی تغییر می‌ده.

اگه ظاهر صفحه جعلی شبیه سایت اصلی باشه، ممکنه کاربر فکر کنه نشست ورودش تموم شده و دوباره نام کاربری و رمز عبورش رو وارد کنه. noopener باعث می‌شه صفحه مقصد مرجعی به پنجره بازکننده نداشته باشه و این مسیر حمله بسته بشه.

آیا مرورگرهای امروزی هنوز به noopener نیاز دارن؟

طبق استاندارد فعلی HTML، استفاده از target="_blank" در مرورگرهای امروزی به‌صورت ضمنی رفتار noopener رو فعال می‌کنه. یعنی حتی اگه این مقدار داخل کد دیده نشه، مرورگرهای به‌روز معمولاً ارتباط صفحه جدید با صفحه بازکننده رو قطع می‌کنن.

بااین‌حال، نوشتن صریح rel="noopener" هنوز کد رو روشن‌تر می‌کنه. اگه واقعاً به ارتباط صفحه جدید با بازکننده نیاز داشته باشید، مقدار rel="opener" می‌تونه اون رفتار رو برگردونه؛ ولی بهتره بدون یک نیاز فنی مشخص ازش استفاده نکنید.

دیدن noopener در کد هم الزاماً نشونه مشکل نیست. ممکنه اون لینک با نسخه قدیمی‌تر وردپرس ساخته شده باشه یا ویرایشگر، قالب و یکی از افزونه‌ها این مقدار رو به خروجی اضافه کرده باشن.

وردپرس چرا rel=”noopener” رو به لینک‌ها اضافه می‌کرد؟

وردپرس در نسخه‌های قدیمی‌تر، noopener رو به لینک‌هایی اضافه می‌کرد که با target="_blank" در تب جدید باز می‌شدن. هدف این کار کم‌کردن خطر دست‌کاری تب قبلی بود؛ نه تغییر رتبه سایت یا نحوه انتقال اعتبار لینک.

طبق مستندات رسمی وردپرس، از وردپرس ۶.۷ هسته وردپرس افزودن خودکار noopener رو متوقف کرده، چون مرورگرهای امروزی این رفتار امنیتی رو به‌صورت پیش‌فرض برای target="_blank" اجرا می‌کنن. پس نباید فرض کنید هر لینک تازه‌ای که در وردپرس می‌سازید حتماً این عبارت رو داخل HTML داره.

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

چطور noopener رو در وردپرس بررسی یا اضافه کنیم؟

ساخت لینک در ویرایشگر بلوکی وردپرس

1. نوشته یا برگه موردنظرتون رو باز کنید و متن لینک رو انتخاب کنید.
2. روی آیکن لینک بزنید، نشانی مقصد رو وارد کنید و در صورت نیاز گزینه بازکردن در تب جدید رو فعال کنید.
3. نوشته رو ذخیره یا پیش‌نمایش کنید. بعد روی صفحه نهایی کلیک راست کنید، گزینه بررسی یا Inspect رو بزنید و تگ <a> مربوط به لینک رو پیدا کنید.

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

اضافه‌کردن دستی noopener به کد لینک

اگه لینک با target="_blank" ساخته شده و می‌خواید noopener رو صریح بنویسید، کد اون می‌تونه این شکل باشه:

<a href="https://example.com" target="_blank" rel="noopener">بازکردن سایت نمونه</a>

ویژگی rel می‌تونه چند مقدار داشته باشه. اگه لینک از قبل مقداری مثل nofollow داره، اون رو پاک نکنید و noopener رو با یک فاصله کنارش بنویسید:

<a href="https://example.com" target="_blank" rel="nofollow noopener">مشاهده لینک</a>

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

تفاوت noopener با noreferrer چیه؟

noopener دسترسی صفحه جدید به window.opener رو قطع می‌کنه. noreferrer علاوه بر ایجاد همین اثر امنیتی، از فرستاده‌شدن اطلاعات ارجاع یا Referrer هم جلوگیری می‌کنه. اطلاعات ارجاع معمولاً به سایت مقصد کمک می‌کنه بفهمه بازدیدکننده از کدوم صفحه اومده.

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

تفاوت noopener با nofollow چیه؟

noopener یک کاربرد امنیتی در مرورگر داره، ولی nofollow نشونه‌ای برای موتورهای جستجو هست. گوگل nofollow رو به‌عنوان یک نشونه بررسی می‌کنه؛ پس معنی اون «فرمان قطعی برای دنبال‌نکردن لینک» نیست.

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

این مقدارها می‌تونن هم‌زمان توی یک ویژگی rel قرار بگیرن. برای نمونه، یک لینک تبلیغاتی که در تب جدید باز می‌شه می‌تونه چنین کدی داشته باشه:

<a href="https://example.com" target="_blank" rel="sponsored noopener">مشاهده پیشنهاد</a>

آیا noopener روی سئوی سایت اثر می‌ذاره؟

noopener به‌خودی‌خود نقشی در انتقال اعتبار لینک یا رتبه صفحه نداره. وظیفه اون مدیریت ارتباط امنیتی بین صفحه بازشده و صفحه بازکننده هست. بنابراین اضافه‌کردن یا حذف‌کردن این مقدار نباید با تصمیم‌های مربوط به nofollow، sponsored یا ugc قاطی بشه.

برای تصمیم درست، سه موضوع رو جدا ببینید: noopener به امنیت تب‌ها مربوطه، noreferrer روی اطلاعات ارجاع اثر می‌ذاره و مقادیری مثل nofollow رابطه لینک با موتور جستجو رو توضیح می‌دن. هرکدوم رو فقط وقتی استفاده کنید که واقعاً به همون رفتار نیاز دارید.

اشتباه‌های رایج موقع استفاده از rel در لینک‌ها

• یکی‌دونستن noopener، noreferrer و nofollow: این سه مقدار هدف یکسانی ندارن. یکی ارتباط تب‌ها رو قطع می‌کنه، یکی اطلاعات ارجاع رو نمی‌فرسته و دیگری نشونه‌ای برای موتورهای جستجو هست.
• فرض افزودن خودکار noopener به همه لینک‌ها: وردپرس ۶.۷ به بعد اون رو به‌صورت خودکار اضافه نمی‌کنه و این موضوع از اول هم به لینک‌های دارای target="_blank" مربوط بوده.
• پاک‌کردن مقدارهای قبلی rel: موقع افزودن مقدار جدید، اول کاربرد مقدارهای فعلی رو بررسی کنید. چند مقدار می‌تونن با فاصله کنار هم قرار بگیرن.
• بازکردن همه لینک‌ها در تب جدید: این کار همیشه تجربه بهتری نمی‌سازه. برای لینک‌های داخلی معمولاً بهتره انتخاب تب رو به کاربر بسپارید، مگر اینکه دلیل روشنی برای حفظ صفحه فعلی داشته باشید.

جمع‌بندی

اگه لینکی با target="_blank" در تب جدید باز می‌شه، مرورگرهای امروزی معمولاً رفتار noopener رو به‌صورت پیش‌فرض اجرا می‌کنن. بااین‌حال، نوشتن صریح rel="noopener" هنوز روش روشنی برای بیان همین رفتار هست.

قبل از هر تغییری، خروجی واقعی لینک رو بررسی کنید. وجود noopener مشکلی برای سئو ایجاد نمی‌کنه و معمولاً دلیلی برای حذفش ندارید. فقط یادتون باشه noreferrer و nofollow هدف‌های متفاوتی دارن و نباید بدون بررسی جای هم استفاده بشن.

سؤال‌های متداول درباره rel=”noopener”

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.