Clickjacking

پشت پرده حمله Clickjacking؛ وقتی هکرها کلیک تو را می‌دزدند 🖱️

وارد یک وب‌سایت می‌شوی. یک گردونه شانس جذاب یا یک دکمه بزرگ و درخشان وسط صفحه خودنمایی می‌کند: «برای دریافت 10 گیگابایت اینترنت رایگان کلیک کن 🎁»

ساده‌لوحانه روی دکمه کلیک می‌کنی. صفحه برای چند لحظه می‌چرخد، اما خبری از اینترنت رایگان نیست. فکر می‌کنی یک تبلیغ اسپم ساده بوده و صفحه را می‌بندی...

اما پشت صحنه داستان دیگری رخ داده است.

در همان میلی‌ثانیه‌ای که انگشتت روی کلیک فشار داده شد، تو روی دکمه دریافت جایزه کلیک نکردی! در واقع تو بدون اینکه بدانی، دکمه «تأیید انتقال وجه»، «حذف حساب کاربری» یا «تغییر ایمیل بازیابی» را در یک سایت دیگر فشار دادی.

به دنیای Clickjacking خوش آمدی؛ جایی که چشم‌هایت یک چیز می‌بینند، اما کلیکت جای دیگری فرود می‌آید.

راز ماجرا چیست؟ 🤔

حمله Clickjacking (یا UI Redress Attack) نوعی فریب بصری در مرورگر است. در این حمله، هکر با کدهای ساده فرانت‌اند، یک «لایه نامرئی» روی صفحه جذاب خود می‌کشد.

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

در Clickjacking، چشم تو دکمه‌ی بی‌خطرِ هکر را می‌بیند، اما مرورگر، کلیکِ تو را روی دکمه‌ی نامرئیِ سایتِ هدف ثبت می‌کند.

🎭 پشت پرده حمله؛ مرحله‌به‌مرحله چه اتفاقی می‌افتد؟

مرحله اول: ساخت صحنه 🎬 مهاجم یک صفحه وب ظاهراً جذاب و بی‌خطر می‌سازد؛ مثلاً یک بازی آنلاین رایگان یا دکمه دریافت جایزه.

مرحله دوم: پنهان کردن هدف 👻 مهاجم صفحه حساس یک سایت دیگر (مثلاً پنل کاربری یا تنظیمات حساب) را به صورت نامرئی روی صفحه خود قرار می‌دهد.

مرحله سوم: بازی با چشم کاربر 👁️ مهاجم با تنظیمات دقیق CSS، دکمه «دریافت جایزه» را دقیقاً زیر دکمه حساس سایت هدف (مثل دکمه «حذف حساب») تراز می‌کند.

مرحله چهارم: لحظه کلیک 🖱️ کاربر با اطمینان روی دکمه ظاهری کلیک می‌کند.

مرحله پنجم: اتفاق واقعی ⚠️ چون لایه سایت هدف روی لایه ظاهری قرار دارد، مرورگر کلیک را روی سایت هدف ثبت می‌کند و دستور هکر اجرا می‌شود!

iframe دقیقاً چه نقشی دارد؟ 🪟

برای درک این حمله، باید با iframe آشنا شوی.

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

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

هکرها از همین ویژگی استفاده می‌کنند: سایت هدف را داخل یک iframe بارگذاری کرده، شفافیت (opacity) آن را صفر می‌کنند تا کاملاً نامرئی شود، و آن را روی عناصر صفحه خود می‌چینند!

یک مثال آموزشی امن 💻

برای اینکه متوجه شوی هکرها چگونه در ظاهر و ساختار لایه‌ها تفاوت ایجاد می‌کنند، به این ساختار مفهومی HTML/CSS نگاه کن:

<!-- ساختار مفهومی لایه‌بندی در وب -->
<div class="container" style="position: relative;">
  
  <!-- لایه اول: دکمه ظاهری که کاربر می‌بیند -->
  <button style="position: absolute; z-index: 1;">
    🎁 برای دریافت جایزه کلیک کن!
  </button>

  <!-- لایه دوم: قاب نامرئی که روی دکمه اول قرار می‌گیرد -->
  <iframe src="https://example.com/settings" 
          style="position: absolute; z-index: 2; opacity: 0; width: 200px; height: 50px;">
  </iframe>

</div>

مفاهیم کلیدی در این ساختار:

• position: absolute:

امکان قرار دادن عناصر دقیقاً روی یکدیگر را فراهم می‌کند.

• z-index:

اولویت لایه‌ها را مشخص می‌کند. عنصری که z-index بالاتری دارد (اینجا iframe)، روی عنصر دیگر قرار می‌گیرد.

• opacity: 0:

عنصر رویی را کاملاً شفاف و نامرئی می‌کند، اما این عنصر همچنان رویدادهای کلیک را دریافت می‌کند!

Clickjacking

با

Phishing

یکی نیست! 🚨

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

🎣 فیشینگ (Phishing): مهاجم یک صفحه جعلی شبیه به بانک یا شبکه‌های اجتماعی می‌سازد تا تو اطلاعات ورودت (نام کاربری و رمز عبور) را دستی وارد کنی.

🎭 کلیک‌جکینگ (Clickjacking): مهاجم نیازی به رمز عبور تو ندارد! تو قبلاً وارد حساب واقعی خود شده‌ای. مهاجم فقط از «اعتبار فعال» تو استفاده می‌کند و کلیکت را روی همان سایت واقعی می‌دزدد.

در Phishing ممکن است چیزی را ببینی که واقعی نیست؛ در Clickjacking ممکن است چیزی را واقعی ببینی، اما روی چیزی کلیک کنی که نمی‌بینی.

سپر دفاعی سایت‌ها 🛡️

توسعه‌دهندگان وب چگونه می‌توانند از کاربران خود در برابر این حمله محافظت کنند؟ با استفاده از هدرهای امنیتی مرورگر:

🔒 1. هدر X-Frame-Options این هدر قدیمی‌تر اما بسیار موثر به مرورگر می‌گوید که آیا اجازه دارد این صفحه را داخل یک iframe قرار دهد یا خیر.

مقدار DENY: به هیچ سایتی (حتی خود شما) اجازه نمی‌دهد صفحه را داخل iframe ببرد.X-Frame-Options: DENY
مقدار SAMEORIGIN: فقط به همین دامنه اجازه می‌دهد صفحه را داخل iframe بارگذاری کند.X-Frame-Options: SAMEORIGIN

🛡️ 2. هدر Content-Security-Policy (CSP) روش مدرن‌تر و قدرتمندتر، استفاده از دستور frame-ancestors در هدر CSP است. این دستور مشخص می‌کند چه دامنه‌هایی مجاز به قاب‌بندی (framing) صفحه هستند:

Content-Security-Policy: frame-ancestors 'self';

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

⚡ اگر توسعه‌دهنده وب هستی، همین الان این موارد را چک کن

برای اطمینان از امنیت برنامه‌ات، این چک‌لیست کاربردی را مرور کن:

• [ ] آیا صفحه من اجازه دارد توسط هر سایتی داخل iframe نمایش داده شود؟
• [ ] آیا X-Frame-Options به درستی تنظیم شده است؟
• [ ] آیا CSP و دستور frame-ancestors را بررسی و فعال کرده‌ام؟
• [ ] آیا صفحات حساس مثل تنظیمات حساب، پرداخت یا عملیات تغییر کلمه عبور محافظت شده‌اند؟
• [ ] آیا وابستگی به رفتارهای قدیمی مرورگرها را بررسی کرده‌ام؟
• [ ] آیا سیاست نمایش صفحه در iframe را آگاهانه تعیین کرده‌ام؟

پایان ماجرا 🔥

وب جایی است که ظاهر و باطن آن همیشه یکی نیست. کلیک ساده‌ای که روی یک دکمه انجام می‌دهی، ممکن است با دستورهای کدهای پشت صحنه، معنای کاملاً متفاوتی پیدا کند.

همیشه به یاد داشته باش: همیشه چیزی که می‌بینی، همان چیزی نیست که روی آن کلیک می‌کنی.