فصل ۲۳: نکات امنیتی و بهینه‌سازی کد جاوااسکریپت
چرا امنیت و بهینه‌سازی مهم هستند؟
- چون بیشتر سایت‌ها و اپلیکیشن‌ها (حتی پروژه‌های ساده!) هدف حمله و سؤاستفاده میشن.
- بهینه‌نبودن کدها هم باعث میشه سایتت کند یا سنگین اجرا بشه، که این یعنی تجربه بد برای کاربر و امتیاز کمتر سئو!
- رعایت این نکات نشون میده حرفه‌ای هستی.
۱. نکات امنیتی در جاوااسکریپت
الف) جلوگیری از تزریق کد (XSS)
XSS (Cross-Site Scripting): یعنی مهاجم بتونه کد مخرب رو تو سایت شما اجرا کنه.
مثال ساده:
اگر داده‌هایی که کاربر وارد می‌کنه رو مستقیم تو صفحه نشون بدی، ممکنه این کد وارد بشه:
<input value="<script>alert('هک شدی!')</script>">و اجرا بشه!
راه حل: همیشه داده ورودی کاربر را Sanitize یا Escape کن.
- از innerText به‌جای innerHTML استفاده کن…
element.innerText = userInput; // امن‌تر- یا از کتابخونه‌هایی مثل DOMPurify استفاده کن.
ب) همیشه از https استفاده کن
- ارتباط سایت با سرور رو امن کن تا داده‌ها وسط راه دزدیده نشن!
ج) اطلاعات حساس را هرگز در جاوااسکریپت سمت کلاینت ذخیره نکن
- مثلا کلیدهای دسترسی (API key) یا رمزعبور.
د) جلوگیری از حملات CSRF
اگر با سیستم‌های ارسال فرم کار می‌کنی، از توکن CSRF استفاده کن تا کسی نتونه از بیرون فرم رو سواستفاده کنه (این بیشتر مربوط به بک‌اند و جاوااسکریپت پیشرفته‌تر میشه، اما باید بدونی).
ه) محدود کردن دامنه‌های مجاز برای درخواست‌ها (CORS)
- سرور باید اجازه بده کدوم سایت‌ها بتونن اطلاعات بخونن.
۲. بهینه‌سازی کد جاوااسکریپت
الف) کاهش حجم کد (Minify)
ابزارهایی مثل UglifyJS یا Terser کد شما رو خلاصه و فشرده می‌کنن تا سریع‌تر لود بشه.
ب) بهینه‌سازی حلقه‌ها و عملیات سنگین
- اگر می‌تونی از map, forEach, filter به‌جای for عادی استفاده کن (معمولاً خواناتر و سریع‌تر).
- فقط جایی که لازم داری، حلقه تودرتو بذار.
ج) ترکیب و استفاده بهینه از تصاویر و منابع
- عکس‌ها را با حجم کم و فرمت webp استفاده کن.
- فونت‌ها و اسکریپت‌های اضافی را حذف یا فشرده کن.
د) استفاده از async و defer برای بارگذاری اسکریپت‌ها
<script src="script.js" defer></script>این کار باعث میشه اسکریپت‌ها بعد از پارس شدن HTML اجرا شن و سرعت سایت رو کم نکنن.
ه) ذخیره‌سازی داده در لوکال‌استوریج
اگر داده‌ای لازمه موقتاً نگه داری (مثل تنظیمات کاربر)، از localStorage/sessionStorage استفاده کن تا درخواست بیخود به سرور نزنی.
و) جلوگیری از memory leak (نشت حافظه)
- حواست باشه event listenerها رو بعد از نیاز پاک کنی.
- متغیرهای اضافه داخل window/global نساز.
۳. ابزارهایی برای بررسی و بهبود
- Lighthouse (افزونه کروم) برای بررسی سرعت و امنیت سایت
- ESLint: نمایش خطاهای سبکی و اشتباهات رایج در کدنویسی جاوااسکریپت
- DevTools از خود کروم برای دیدن Performance و Memory
چند نکته طلایی سریع
- همیشه کدهای نسخه توسعه و نسخه نهایی رو جداگانه بذار (فشرده و غیرفشرده).
- کدهای تکراری رو توابع کن و چندبار ننویس.
- برای کار با داده‌های حساس، همیشه پردازش اصلی رو سمت سرور انجام بده، نه کلاینت!
تمرین پیشنهادی
۱. یک قطعه کد بنویس که با استفاده از innerText به‌جای innerHTML داده کاربر را نشان می‌دهد (و امن‌تر است).
۲. چند فایل جاوااسکریپت کوچک را combine و minify کن و تفاوت حجم را بررسی کن.
۳. یک تکه کد با چرخه for عادی و map بنویس و راحتی خواندن را مقایسه کن.
جمع‌بندی فصل
- امنیت و سرعت کد، پایه‌ی اپلیکیشن خوبه.
- حتی کدهای ساده هم باید امن و سریع نوشته بشن.
- با رعایت این نکات، کاربر و خودت رو از خطرات و مشکلات بعدی نجات می‌دی!
