frontend-interview-questions

1. چگونه جریان احراز هویت را در یک برنامه React با استفاده از OAuth 2.0 و ارائه‌دهنده شخص ثالث (مثل Google، Auth0) طراحی می‌کنید؟

از یک ارائه‌دهنده OAuth (مثل Auth0 یا Google) با جریان کد احراز هویت + PKCE برای برنامه‌های تک‌صفحه‌ای (SPA) استفاده کنید.

مراحل:

1. کاربر را به URL ورود ارائه‌دهنده هدایت کنید.
2. کد code را در URI هدایت دریافت کنید.
3. کد را از طریق بک‌اند امن یا SDK با توکن‌های دسترسی و تازه‌سازی مبادله کنید.
4. توکن‌ها را به‌صورت امن در حافظه یا کوکی‌های httpOnly ذخیره کنید.

2. رویکرد شما برای پیاده‌سازی احراز هویت مبتنی بر JWT در یک برنامه React، شامل ذخیره‌سازی توکن و مکانیزم‌های تازه‌سازی چیست؟

• توکن دسترسی: کوتاه‌مدت، ذخیره در حافظه یا sessionStorage.
• توکن تازه‌سازی: هرگز در localStorage. از کوکی httpOnly برای مدیریت امن استفاده کنید.

جریان:

1. در زمان ورود، توکن‌های دسترسی و تازه‌سازی دریافت کنید.
2. توکن دسترسی را در حافظه ذخیره کنید.
3. در صورت دریافت 401، نقطه پایانی تازه‌سازی را فراخوانی کنید (اگر توکن تازه‌سازی موجود باشد).
4. تازه‌سازی خودکار از طریق تایمر پس‌زمینه یا رهگیر.

3. چگونه احراز هویت چندمرحله‌ای (MFA) را در یک فرانت‌اند React مدیریت می‌کنید و چه ملاحظات تجربه کاربری را در اولویت قرار می‌دهید؟

جریان:

1. پس از احراز هویت موفق نام کاربری/رمز عبور، پرچم MFA را بررسی کنید.
2. ورودی MFA را نمایش دهید (TOTP، SMS).
3. در صورت موفقیت، توکن دسترسی کامل صادر کنید.

اولویت‌های تجربه کاربری:

• انتقال بدون وقفه از ورود به MFA.
• پشتیبانی از روش‌های جایگزین.
• پیام‌رسانی خطای واضح + امکان تلاش مجدد.

4. استراتژی شما برای مدیریت جلسات کاربر در یک برنامه تک‌صفحه‌ای (SPA) با React چیست؟

• استفاده از انقضای توکن و تایمرهای عدم فعالیت.
• ذخیره حداقل متادیتای کاربر در وضعیت جهانی (مثل Redux، Zustand).
• تازه‌سازی خودکار یا درخواست احراز هویت مجدد در زمان انقضای توکن.
• تداوم وضعیت احراز هویت در refresh از طریق کوکی‌های امن یا sessionStorage رمزگذاری‌شده.

5. چگونه یک سیستم کنترل دسترسی مبتنی بر نقش (RBAC) را در یک برنامه React با استفاده از داده‌های احراز هویت پیاده‌سازی می‌کنید؟

از نقش‌ها/مجوزها در JWT یا متادیتای کاربر استفاده کنید.

const hasPermission = (user, permission) =>
  user?.permissions?.includes(permission);

رندر شرطی کامپوننت‌ها یا مسیرها:

{
  hasPermission(user, "admin:view") && <AdminPanel />;
}

می‌توان آن را در سطح مسیر با استفاده از HOC یا نگهبان‌های مسیر سفارشی اعمال کرد.

6. چگونه مکانیزم خروج را در یک برنامه React طراحی می‌کنید که اطمینان دهد تمام وضعیت‌ها و توکن‌های سمت کلاینت به‌صورت امن پاک می‌شوند؟

• پاک کردن توکن‌ها (حافظه، ذخیره‌سازی).
• ابطال توکن تازه‌سازی در بک‌اند.
• هدایت به صفحه ورود.

اگر از کوکی استفاده می‌شود، یک نقطه پایانی بک‌اند را برای پاک کردن کوکی سرور فراخوانی کنید.

7. رویکرد شما برای مدیریت احراز هویت در یک برنامه React رندرشده سمت سرور (SSR) چیست؟

• استفاده از getServerSideProps برای بررسی وضعیت احراز هویت از طریق کوکی‌ها.
• توکن‌ها در کوکی‌های httpOnly برای سازگاری با SSR ذخیره می‌شوند.
• کاربران احراز هویت‌نشده را قبل از رندر صفحه هدایت کنید.

8. چگونه یک سیستم احراز هویت را با Redux یا Zustand برای مدیریت وضعیت جهانی ادغام می‌کنید؟

• اطلاعات کاربر (نه توکن‌ها) را در وضعیت جهانی ذخیره کنید.
• از میان‌افزار یا افکت‌ها برای رهگیری اقدامات احراز هویت (مثل تازه‌سازی توکن) استفاده کنید.

9. فرآیند شما برای مدیریت خطاهای احراز هویت (مثل توکن‌های منقضی‌شده، اعتبار نامعتبر) در یک برنامه React چیست؟

• استفاده از یک رهگیر مرکزی Axios/Fetch برای گرفتن 401ها.
• تلاش مجدد با توکن تازه‌سازی یا هدایت به صفحه ورود.

10. چگونه یک سیستم احراز هویت فرانت‌اند را برای پشتیبانی از سناریوهای چنددامنه‌ای یا چندمبدا (مثل میکروفرانت‌اندها) طراحی می‌کنید؟

• استفاده از کوکی‌های httpOnly مشترک (با CORS + credentials: true).
• سرویس احراز هویت متمرکز (مثل ارائه‌دهنده هویت).
• استفاده محتاطانه از postMessage یا ذخیره‌سازی iframe مشترک.

11. چالش‌برانگیزترین آسیب‌پذیری امنیتی که در یک برنامه فرانت‌اند با آن مواجه شدید چیست و چگونه آن را برطرف کردید؟

با یک آسیب‌پذیری XSS مواجه شدم که ورودی کاربر بدون پاک‌سازی در innerHTML تزریق می‌شد.

رفع: از DOMPurify برای پاک‌سازی سمت کلاینت استفاده کردم و بازسازی کردم تا هرگز از dangerouslySetInnerHTML استفاده نشود.

12. چگونه یک برنامه React را از حملات جعل درخواست بین‌سایتی (CSRF) محافظت می‌کنید؟

• استفاده از SameSite=Lax یا Strict برای کوکی‌ها.
• پیاده‌سازی توکن‌های CSRF برای درخواست‌های تغییر وضعیت.
• ترجیح کوکی‌های httpOnly به جای localStorage برای کاهش سرقت توکن.

13. رویکرد شما برای ایمن‌سازی فراخوانی‌های API از یک فرانت‌اند React برای جلوگیری از حملات مرد میانی (MITM) چیست؟

• استفاده انحصاری از HTTPS.
• اعتبارسنجی گواهینامه‌های SSL.
• ذخیره توکن‌ها در کوکی‌های httpOnly، بدون افشا به JS.
• فعال‌سازی هدرهای HSTS.

14. چگونه یک برنامه React را طراحی می‌کنید تا از افشای داده‌های حساس در مرورگر (مثل DOM یا کنسول) جلوگیری کند؟

• هرگز توکن‌ها یا اطلاعات شخصی را لاگ نکنید.
• از جاسازی اسرار در DOM یا بسته اپلیکیشن اجتناب کنید.
• داده‌ها را در پیام‌های خطا ماسک کنید و از مرزهای خطا استفاده کنید.

15. استراتژی شما برای ایمن‌سازی اسکریپت‌ها یا کتابخانه‌های شخص ثالث در یک برنامه React چیست؟

• استفاده از یکپارچگی زیرمنبع (SRI) در صورت امکان.
• ممیزی وابستگی‌ها با ابزارهایی مثل npm audit، Snyk.
• سفید کردن دامنه‌های امن از طریق سیاست امنیت محتوا (CSP).

16. چگونه اعتبارسنجی و پاک‌سازی ورودی را در یک فرانت‌اند React برای جلوگیری از حملات تزریقی (مثل XSS) پیاده‌سازی می‌کنید؟

• استفاده از کامپوننت‌های کنترل‌شده.
• پاک‌سازی خروجی HTML (مثل DOMPurify).
• فرار از تمام محتوای غیرقابل اعتماد.
• اعتبارسنجی ورودی‌ها در هر دو سمت فرانت‌اند و بک‌اند.

17. رویکرد شما برای طراحی یک سیاست امنیت محتوا (CSP) برای یک برنامه React چیست؟

Content-Security-Policy:
default-src 'self';
script-src 'self' https://trusted.cdn.com;
object-src 'none';

از nonces برای اسکریپت‌های درون‌خطی و حالت گزارش‌دهی در طول تست استفاده کنید.

18. چگونه امنیت را در یک برنامه React که در یک محیط بدون اعتماد مستقر شده مدیریت می‌کنید؟

• احراز هویت هر درخواست (JWT بدون حالت).
• رمزگذاری تمام ارتباطات (TLS).
• اصل حداقل امتیاز برای منابع قابل دسترسی فرانت‌اند.
• استفاده از توکن‌های دسترسی کوتاه‌مدت و CORS سخت‌گیرانه.

19. فرآیند شما برای انجام ممیزی امنیتی یک فرانت‌اند React قبل از انتشار عمده چیست؟

• تحلیل استاتیک با ESLint، Snyk یا SonarQube.
• اجرای npm audit و بررسی وابستگی‌ها.
• تست نفوذ جریان‌های احراز هویت و مناطق حساس.
• بررسی لاگ‌های کنسول و ابزارهای توسعه‌دهنده افشاشده.

20. چگونه یک سیستم فرانت‌اند را برای رعایت استانداردهای امنیتی مثل GDPR یا HIPAA طراحی می‌کنید؟

• حداقل‌سازی داده‌ها: فقط آنچه لازم است جمع‌آوری کنید.
• رضایت صریح برای کوکی‌ها + تحلیل‌ها.
• مکانیزم‌های دانلود/حذف داده‌های کاربر ارائه دهید.
• ذخیره رضایت به‌صورت قابل تأیید و امن.
• HIPAA: از ذخیره PHI در فرانت‌اند اجتناب کنید؛ تمام داده‌های حساس را در حالت استراحت و انتقال رمزگذاری کنید.

This site is open source. Improve this page.