❗ چرا React جلوی XSS را به‌طور کامل نگرفت؟

1 . مکانیسم پیش‌فرض React

خود React از طراحی JSX‌ استفاده می‌کند که به‌طور خودکار کاراکترهای خطرناک مثل <, &, > را در خروجی HTML رمزگذاری می‌کند؛ این باعث می‌شود داده‌های پویا به شکل متن خنثی (plain text) نمایش داده شوند نه HTML قابل اجرا.

همچنین Virtual DOM باعث می‌شود دستکاری مستقیم DOM کمتر انجام شود و نفوذهای XSS محدود شود.

2 . نقطه‌ی ضعف: استفاده از dangerouslySetInnerHTML

اگر توسعه‌دهنده از ویژگی dangerouslySetInnerHTML برای تزریق مستقیم HTML استفاده کند، React دیگر محافظت‌های داخلی را دور می‌زند. این یعنی اگر محتوا توسط کاربر تأمین‌شده و بدون بررسی وارد DOM شود، اسکریپت‌های مخرب اجرا می‌شوند

3 . راه‌حل مناسب: استفاده از کتابخانه‌های sanitization

برای جلوگیری از XSS هنگام استفاده از HTML کاربری، باید از کتابخانه‌هایی مانند DOMPurify استفاده شود. این ابزار HTML ورودی را پاک‌سازی کرده و تنها تگ‌های امن مثل <b>, <i>, <p> را نگه می‌دارد.

4 . اهمیت امنیت در بخش خدمات مالی

در بانکداری آنلاین، حملات injection مبتنی بر JavaScript در سال‌های اخیر بسیار رایج شده‌اند. یکی از کمپین‌های بزرگ مخرب در مارس ۲۰۲۳ بیش از ۵۰ هزار کاربر را در بیش از ۴۰ بانک مختلف هدف گرفت و با شناسایی ساختار صفحات بانکی، اسکریپت‌های داینامیک مخرب برای ربودن رمزهای عبور و توکن‌های OTP تزریق کرد

✅ جمع‌بندی نهایی

بنابرین React به‌طور پیش‌فرض محافظت خوبی در برابر XSS دارد، اما به شرطی که دولوپرها و توسعه‌دهندگان از مکانیسم‌های ناایمن استفاده نکنند.

استفاده از dangerouslySetInnerHTML بدون پاک‌سازی (sanitize) ورودی، می‌تواند برنامه را در برابر حمله XSS بسیار آسیب‌پذیر کند.

توصیه می‌شود: اگر نیاز به قرار دادن HTML ورودی کاربر دارید، حتماً آن را از طریق ابزارهایی مانند DOMPurify پاک‌سازی کنید تا امنیت اپلیکیشن حفظ شود.