🛡 امنیت وب برای توسعه دهندگان فرانت اند: راهنمای ساده و کاربردی

🎯 چرا امنیت وب برای توسعه دهندگان فرانت اند مهم است؟

یک سایت رو مثل یه خونه تصور کن:

• 🏠 بک اند = اتاق ها و وسایل باارزش داخل خونه.

• 🚪 فرانت اند = درها و پنجره ها.

👉 اگر درها و پنجره ها (فرم ها، فیلدهای ورودی و دکمه ها) ضعیف باشند، هر کسی میتونه وارد خونه بشه.

🚨 قانون طلایی امنیت وب

❗ به مرورگر اعتماد نکن!

هر چیزی که از سمت کاربر میاد — فرم ها، آدرس URL، کوکی ها، فایل های آپلودی — میتونه آلوده باشه.

✅ همیشه داده ها رو اعتبارسنجی (Validate) و پاکسازی (Sanitize) کن قبل از اینکه به سرور بفرستی یا روی صفحه نمایش بدهی.

🕵️♂️ مهم ترین تهدیدهای امنیتی که باید بشناسی: به زبان ساده

این ها ترفندهای معروف هکرها هستند.

1. XSS (Cross-Site Scripting) 🕷

چی هست؟ هکرها کدهای مخرب (معمولاً جاوااسکریپت) را وارد سایتت میکنند.

چرا خطرناک است؟ این کد در مرورگر کاربران به اسم سایت تو اجرا میشود — کوکی میدزدد، لاگین میکند یا حتی کاربران را به سایتهای فیشینگ میفرستد.

یک سناریوی ساده:

[ هکر کامنت میگذارد: کد مخرب ]
        ↓
[ کاربر صفحه را باز میکند → مرورگر اسکریپت را اجرا میکند ]
        ↓
[ اطلاعات کاربر به دست هکر میافتد ]

✅ راهکار برای فرانت اند:

• ورودی کاربر را به صورت HTML خام رندر نکن.

• از فریمورک ها (React، Vue، Angular) استفاده کن — اینها داده رو به صورت امن escape می کنن.

• تگ های خطرناک مثل ، <iframe>، <object> رو حذف کن.

2. CSRF (Cross-Site Request Forgery) 🎭

این تهدید چی هست؟ هکر کاری میکنه کاربر واردشده (Logged in) ناخواسته یک کار مهم انجام بده — مثل انتقال پول.

چطور کار میکنه؟

1. تو وارد سایت بانکت هستی.

2. ایمیلی میگیری: «🎁 برای هدیه رایگان کلیک کن!»

3. لینک درواقع یک فرم مخفی انتقال پول هست.

4. مرورگر کوکی لاگین تو رو اتوماتیک میفرسته.

5. 💸 پول میره توی حساب هکر.

✅ راهکار برای فرانت اند:

• برای هر فرم CSRF Token بگذار.

• هرجا ممکن بود کوکی ها رو با ویژگی SameSite ست کن.

3. SQL Injection (تزریق SQL) — بیشتر مشکل بک اند 💉

مسئولیت کیه؟ بیشتر توسعه دهندگان بک اند.

خطر: هکر متن عجیب داخل فیلد وارد میکن تا کوئری دیتابیس خراب شه.

💡 مثال:
اگر بک اند این کد را اجرا کند:

✅ وظیفه فرانت اند: داده های عجیب و مشکوک رو قبل از ارسال به بک اند فیلتر کنه.

⚠️ چند تهدید دیگر که باید اسمشونو بدونی

• Clickjacking: هکر صفحه اش رو پشت سایت تو مخفی میکنه. در این صورت وقتی کاربر روی دکمه “پخش ویدیو” کلیک میکنه درواقع دکمه “خرید” رو فشار داده!

• DoS (Denial of Service): هکر با درخواست های زیاد سایتت رو از کار میاندازه.

• ترفندهای فایل (File Inclusion & Directory Traversal): هکرها میخوان فایلهای مهم رو بخونن یا اجرا کنن.

🛠 چک لیست امنیت برای توسعه دهندگان فرانت اند

✅ ۱. پاکسازی و اعتبارسنجی همه داده ها
به فرم ها، query string، کوکی ها و فایل های آپلود شده اعتماد نکن.

✅ ۲. اصرار روی HTTPS
سایت بدون HTTPS یعنی داده های ورودی راحت دزدیده میشن.

✅ ۳. از قابلیتهای امنیتی فریمورک ها استفاده کن
React / Vue / Angular به طور پیشفرض داده ها وا امن رندر میکنن — از dangerouslySetInnerHTML فقط در مواقع خاص استفاده کن.

✅ ۴. هدرهای امنیتی اضافه کن (با همکاری تیم بک اند)

• CSP (Content Security Policy): چه اسکریپ تهایی اجازه اجرا دارند.

• X-Frame-Options: جلوی clickjacking رو میگیره.

✅ ۵. اعتبارسنجی سمت کاربر
مثلاً اگر یک فیلد ایمیل میخواد، چک کن فرمتش حتما شبیه ایمیل باشد.

✅ ۶. آپدیت نگه داشتن کتابخانه ها
پکیج های قدیمی npm = درهای باز برای هکرها.

🏆 جمع بندی
✅ XSS و CSRF بزرگترین تهدیدهایی هستند که باید یادبگیری.
✅ از HTTPS، توکن CSRF، هدرهای امنیتی و قابلیت های پیشفرض فریمورک ها استفاده کن.