نوشته های Navid Barsalari

CORS: راهنمای جامع از مفاهیم پایه تا Security Best Practices

Navid Barsalari — Fri, 22 May 2026 12:15:10 +0330

مقدمه: مشکلی که CORS حل می‌کندفرض کنید وبسایت evil.com بدون اجازه شما بخواهد به bank.com درخواست بزند و موجودی حسابتان را بخواند. مرورگر چطور جلوی این کار را بگیرد؟پاسخ: Same-Origin Policy و CORS.۱. Same-Origin Policy: دیوار امنیتی مرورگرها۱.۱ تعریف OriginOrigin = Protocol + Domain + Porthttps://api.example.com:443/users└─┬─┘ └──────┬──────┘ └┬┘│ │ │Protocol Domain Portمثال‌های Same-Origin:// Origin: https://example.com ✅ https://example.com/api/users // Same ✅ https://example.com:443/data // Port 443 پیش‌فرض HTTPS ❌ http://example.com // Protocol متفاوت ❌ https://api.example.com // Subdomain متفاوت ❌ https://example.com:8080 // Port متفاوت ❌ https://example.org // Domain متفاوت ۱.۲ چرا این محدودیت وجود دارد؟سناریوی حمله بدون Same-Origin Policy:// کاربر لاگین است در bank.com // حالا وارد evil.com می‌شود // evil.com می‌تواند این کار را بکند: fetch('https://bank.com/api/account/balance', { credentials: 'include' // Cookie های bank.com ارسال می‌شود }) .then(res => res.json()) .then(data => { // 💀 موجودی حساب کاربر را می‌دزدد sendToAttacker(data.balance); });Same-Origin Policy جلوی این حمله را می‌گیرد:مرورگر درخواست را ارسال می‌کند (نمی‌تواند جلوگیری کند)سرور پاسخ می‌دهدمرورگر پاسخ را به JavaScript نمی‌دهد ❌۲.۱ نحوه کار CORS┌─────────────┐ ┌─────────────┐│ Frontend │ │ Backend ││ (Browser) │ │ Server │└──────┬──────┘ └──────┬──────┘│ ││ GET /api/users ││ Origin: https://frontend.com │├─────────────────────────────────>││ ││ │ ✅ بررسی Origin│ ││ 200 OK ││ Access-Control-Allow-Origin: ││ https://frontend.com ││<─────────────────────────────────┤│ │✅ مرورگر │پاسخ را تحویل │JavaScript می‌دهد │اگر Header نباشد:// Console Error: // Access to fetch at 'https://api.example.com/users' // from origin 'https://frontend.com' has been blocked // by CORS policy: No 'Access-Control-Allow-Origin' // header is present on the requested resource.۳. انواع درخواست‌های CORS۳.۱ Simple Requestsدرخواست‌هایی که بدون Preflight اجرا می‌شوند:شرایط:Method: فقط GET, POST, HEADHeaders: فقط Safe Headers مثل Content-Type, AcceptContent-Type: فقط application/x-www-form-urlencoded, multipart/form-data, text/plainمثال:// ✅ Simple Request fetch('https://api.example.com/users', { method: 'GET', headers: { 'Accept': 'application/json' } })پاسخ سرور:HTTP/1.1 200 OK Access-Control-Allow-Origin: https://frontend.com Content-Type: application/json {"users": [...]۳.۲ Preflight Requestsدرخواست‌هایی که قبل از ارسال اصلی، یک درخواست OPTIONS ارسال می‌شود.چه زمانی Preflight اتفاق می‌افتد؟Method: PUT, DELETE, PATCHHeaders سفارشی: Authorization, X-Custom-HeaderContent-Type: application/jsonمثال:// ❌ Preflight Request fetch('https://api.example.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer token123' }, body: JSON.stringify({ name: 'Ali' }) }); جریان کامل:┌─────────────┐ ┌─────────────┐│ Browser │ │ Server │└──────┬──────┘ └──────┬──────┘│ ││ 1️⃣ OPTIONS /api/users (Preflight)││ Origin: https://frontend.com ││ Access-Control-Request-Method: ││ POST ││ Access-Control-Request-Headers: ││ Authorization, Content-Type │├─────────────────────────────────>││ ││ │ ✅ بررسی│ ││ 200 OK ││ Access-Control-Allow-Origin: ││ https://frontend.com ││ Access-Control-Allow-Methods: ││ POST, GET, OPTIONS ││ Access-Control-Allow-Headers: ││ Authorization, Content-Type ││ Access-Control-Max-Age: 86400 ││<─────────────────────────────────┤│ ││ 2️⃣ POST /api/users (Actual) ││ Authorization: Bearer token123 ││ Content-Type: application/json ││ Body: {“name”: “Ali”} │├─────────────────────────────────>││ ││ 201 Created ││ Access-Control-Allow-Origin: ││ https://frontend.com ││<─────────────────────────────────┤۴. CORS Headers: راهنمای کامل۴.۱ Response Headers (سرور به مرورگر)Access-Control-Allow-Origin ⭐مهم‌ترین Header - مشخص می‌کند کدام Origin مجاز است.# ✅ یک Origin خاص Access-Control-Allow-Origin: https://frontend.com # ⚠️ همه (خطرناک برای API های حساس) Access-Control-Allow-Origin: * # ❌ چند Origin (غیرمجاز - باید Dynamic باشد) Access-Control-Allow-Origin: https://app1.com, https://app2.com پیاده‌سازی Dynamic:// NestJS @Controller('users') export class UsersController { @Get() getUsers(@Req() req: Request, @Res() res: Response) { const allowedOrigins = [ 'https://frontend.com', 'https://app.frontend.com' ]; const origin = req.headers.origin; if (allowedOrigins.includes(origin)) { res.setHeader('Access-Control-Allow-Origin', origin); } return res.json({ users: [...] }); } } Access-Control-Allow-MethodsMethod های مجاز را مشخص می‌کند.Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONSHeader های سفارشی مجاز.Access-Control-Allow-Headers: Authorization, Content-Type, X-Request-ID Access-Control-Allow-Credentials 🔐اجازه ارسال Cookie و Authentication Headers.Access-Control-Allow-Credentials: true ⚠️ نکته امنیتی:# ❌ ترکیب خطرناک Access-Control-Allow-Origin: * Access-Control-Allow-Credentials: true # این ترکیب مجاز نیست! مرورگر Error می‌دهد.✅ روش صحیح:Access-Control-Allow-Origin: https://frontend.com Access-Control-Allow-Credentials: true// Frontend fetch('https://api.example.com/profile', { credentials: 'include' // Cookie ها ارسال می‌شود }); Access-Control-Max-Ageمدت زمان Cache کردن Preflight (ثانیه).Access-Control-Max-Age: 86400 # 24 ساعت Header هایی که JavaScript می‌تواند بخواند.Access-Control-Expose-Headers: X-Total-Count, X-Page-Number بدون این Header:fetch('https://api.example.com/users') .then(res => { console.log(res.headers.get('X-Total-Count')); // ❌ null });با این Header:// ✅ مقدار را می‌خواند console.log(res.headers.get('X-Total-Count')); // "150"۴.۲ Request Headers (مرورگر به سرور)Originمرورگر خودکار اضافه می‌کند.Origin: https://frontend.comAccess-Control-Request-Method (Preflight)Access-Control-Request-Method: DELETEAccess-Control-Request-Headers (Preflight)Access-Control-Request-Headers: Authorization, X-Custom-Header۵. چرا CORS فقط در مرورگر است؟۵.۱ تفاوت Browser vs Postman/cURL// ✅ Postman/cURL - بدون محدودیت curl https://bank.com/api/balance // پاسخ را می‌گیرد حتی بدون CORS Headers // ❌ Browser - با محدودیت fetch('https://bank.com/api/balance') // Error: CORS policy blocked چرا؟سناریوی خطرناک (فقط در Browser):// کاربر در gmail.com لاگین است // evil.com این کد را اجرا می‌کند: fetch('https://gmail.com/api/emails', { credentials: 'include' // Cookie های Gmail ارسال می‌شود }) .then(res => res.json()) .then(emails => { // 💀 ایمیل‌های کاربر را می‌دزدد sendToAttacker(emails); });CORS جلوی این حمله را می‌گیرد چون:مرورگر درخواست را می‌فرستد (با Cookie)Gmail پاسخ می‌دهدمرورگر چک می‌کند: آیا Access-Control-Allow-Origin شامل evil.com است؟❌ خیر → پاسخ را به JavaScript نمی‌دهد// Backend (Node.js) const axios = require('axios'); // ✅ بدون مشکل const response = await axios.get('https://api.example.com/users');دلیل:Backend Context کاربر نداردCookie های کاربر ارسال نمی‌شودحمله CSRF/XSS معنا ندارد۶. پیاده‌سازی CORS در Backend۶.۱ NestJS// main.ts import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); // ✅ روش 1: ساده (Development) app.enableCors(); // ✅ روش 2: پیشرفته (Production) app.enableCors({ origin: ['https://frontend.com', 'https://app.frontend.com'], methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'], allowedHeaders: ['Content-Type', 'Authorization'], credentials: true, maxAge: 3600, }); // ✅ روش 3: Dynamic app.enableCors({ origin: (origin, callback) => { const allowedOrigins = [ 'https://frontend.com', /\.example\.com$/, // همه subdomain های example.com ]; if (!origin || allowedOrigins.some(allowed => typeof allowed === 'string' ? allowed === origin : allowed.test(origin) )) { callback(null, true); } else { callback(new Error('Not allowed by CORS')); } }, credentials: true, }); await app.listen(3000); } bootstrap(); ۶.۲ Express.jsconst express = require('express'); const cors = require('cors'); const app = express(); // ✅ روش 1: همه Origins app.use(cors()); // ✅ روش 2: محدود app.use(cors({ origin: 'https://frontend.com', credentials: true, optionsSuccessStatus: 200 })); // ✅ روش 3: چند Origin const allowedOrigins = [ 'https://frontend.com', 'https://app.frontend.com' ]; app.use(cors({ origin: (origin, callback) => { if (!origin || allowedOrigins.includes(origin)) { callback(null, true); } else { callback(new Error('Not allowed by CORS')); } }, credentials: true })); // ✅ روش 4: Per-Route app.get('/public', cors(), (req, res) => { res.json({ message: 'Public API' }); }); app.get('/private', cors({ origin: 'https://frontend.com', credentials: true }), (req, res) => { res.json({ message: 'Private API' }); }); ۶.۳ Django (Python)# settings.py INSTALLED_APPS = [ 'corsheaders', ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] # ✅ Development CORS_ALLOW_ALL_ORIGINS = True # ✅ Production CORS_ALLOWED_ORIGINS = [ "https://frontend.com", "https://app.frontend.com", ] CORS_ALLOW_CREDENTIALS = True CORS_ALLOW_METHODS = [ 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', ] CORS_ALLOW_HEADERS = [ 'accept', 'authorization', 'content-type', 'x-csrf-token', ] ۶.۴ Laravel (PHP)// config/cors.php return [ 'paths' => ['api/*'], 'allowed_methods' => ['*'], 'allowed_origins' => [ 'https://frontend.com', 'https://app.frontend.com', ], 'allowed_origins_patterns' => [ '/\.example\.com$/', ], 'allowed_headers' => ['*'], 'exposed_headers' => ['X-Total-Count'], 'max_age' => 3600, 'supports_credentials' => true, ]; ۷. مشکلات رایج و راه‌حل۷.۱ Error: No ‘Access-Control-Allow-Origin’ headerAccess to fetch at ‘https://api.example.com/users’from origin ‘https://frontend.com’ has been blockedby CORS policy: No ‘Access-Control-Allow-Origin’header is present on the requested resource.راه‌حل:// Backend app.use(cors({ origin: 'https://frontend.com' }));**۷.۲ Error: Credentials flag is true, but Allow-Origin is *کد اشتباه:// ❌ Backend app.use(cors({ origin: '*', credentials: true })); // Frontend fetch('https://api.example.com/profile', { credentials: 'include' });Error:The value of the ‘Access-Control-Allow-Origin’ headermust not be the wildcard ‘*’ when the request’scredentials mode is ‘include’.راه‌حل: javascript// ✅ Backend app.use(cors({ origin: 'https://frontend.com', // Origin مشخص credentials: true }));۷.۳ Preflight OPTIONS درخواست 403 می‌دهدمشکل: Middleware های Authentication قبل از CORS اجرا می‌شوند.// ❌ ترتیب اشتباه app.use(authMiddleware); // OPTIONS را Block می‌کند app.use(cors()); // ✅ ترتیب صحیح app.use(cors()); app.use(authMiddleware); یا:app.use((req, res, next) => { if (req.method === 'OPTIONS') { return res.sendStatus(200); // Preflight را بدون Auth پاس کن } next(); }); app.use(authMiddleware);۷.۴ localhost با Port های مختلف// Frontend: http://localhost:3000 // Backend: http://localhost:4000 // ❌ این کار نمی‌کند fetch('http://localhost:4000/api/users'); // Error: CORS // ✅ Backend باید اجازه بدهد app.use(cors({ origin: 'http://localhost:3000' }));۷.۵ Custom Headers در Preflight// Frontend fetch('https://api.example.com/users', { headers: { 'X-Custom-Header': 'value' } });Error:Request header field X-Custom-Header is not allowedby Access-Control-Allow-Headers in preflight response.راه‌حل:// Backend app.use(cors({ allowedHeaders: ['Content-Type', 'Authorization', 'X-Custom-Header'] }));۸. Security Best Practices۸.۱ هرگز origin: '*' با credentials: true استفاده نکنید// 💀 خطرناک app.use(cors({ origin: '*', credentials: true })); چرا؟ هر سایتی می‌تواند با Cookie های کاربر به API شما درخواست بزند.۸.۲ Whitelist Origins را محدود کنید// ✅ فقط Origin های مجاز const allowedOrigins = [ 'https://frontend.com', 'https://app.frontend.com', process.env.NODE_ENV === 'development' && 'http://localhost:3000' ].filter(Boolean); app.use(cors({ origin: (origin, callback) => { if (!origin || allowedOrigins.includes(origin)) { callback(null, true); } else { callback(new Error('Not allowed by CORS')); } } }));۸.۳ Preflight Cachingapp.use(cors({ maxAge: 86400 // 24 ساعت }));فایده: کاهش ۹۰٪ درخواست‌های OPTIONS.۸.۴ محدود کردن Methods// ✅ فقط Method های مورد نیاز app.use(cors({ methods: ['GET', 'POST', 'PUT', 'DELETE'] })); // ❌ همه Method ها app.use(cors({ methods: '*' }));۸.۵ HTTPS اجباری در Productionapp.use(cors({ origin: (origin, callback) => { if (process.env.NODE_ENV === 'production' && origin && !origin.startsWith('https://')) { callback(new Error('HTTPS required')); } else { callback(null, true); } } }));۹. CORS vs Proxy۹.۱ مشکل CORS در Developmentjavascript// Frontend (localhost:3000) fetch('https://api.example.com/users'); // Error: CORS راه‌حل 1: فعال کردن CORS در Backendjavascript// Backend app.use(cors({ origin: 'http://localhost:3000' })); راه‌حل 2: استفاده از Proxy (بدون تغییر Backend)javascript// vite.config.js (Vite) export default { server: { proxy: { '/api': { target: 'https://api.example.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } } // Frontend fetch('/api/users'); // ✅ بدون CORS Error // Vite آن را به https://api.example.com/users تبدیل می‌کند javascript// webpack.config.js (React/Webpack) module.exports = { devServer: { proxy: { '/api': { target: 'https://api.example.com', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } مقایسه:CORS:✅ Production-ready✅ کنترل دقیق❌ نیاز به تغییر BackendProxy:✅ فقط Development✅ بدون تغییر Backend❌ در Production کار نمی‌کند۱۰. CORS در معماری Microservices۱۰.۱ API Gateway Pattern┌──────────┐│ Frontend │└────┬─────┘││ https://api.example.com│┌────▼─────────┐│ API Gateway │ ← فقط اینجا CORS فعال است└────┬─────────┘│├──────────┬──────────┬──────────┐│ │ │ │┌────▼────┐ ┌──▼───┐ ┌────▼────┐ ┌───▼────┐│ Auth │ │ User │ │ Order │ │ Payment││ Service │ │Service│ │ Service │ │Service │└─────────┘ └──────┘ └─────────┘ └────────┘↑ ↑ ↑ ↑└──────────┴──────────┴──────────┘Internal (بدون CORS)پیاده‌سازی: content_copy javascript// API Gateway (NestJS) async function bootstrap() { const app = await NestFactory.create(AppModule); app.enableCors({ origin: 'https://frontend.com', credentials: true }); await app.listen(3000); } // Microservices (بدون CORS) // auth-service, user-service, order-service // هیچ CORS config ندارند چون فقط از Gateway صدا زده می‌شوند ۱۱. Testing CORS۱۱.۱ Manual Testing با cURL content_copy bash# Preflight Request curl -X OPTIONS https://api.example.com/users \ -H "Origin: https://frontend.com" \ -H "Access-Control-Request-Method: POST" \ -H "Access-Control-Request-Headers: Authorization" \ -v # بررسی Response Headers: # Access-Control-Allow-Origin: https://frontend.com # Access-Control-Allow-Methods: POST, GET, OPTIONS # Access-Control-Allow-Headers: Authorization content_copy bash# Actual Request curl -X POST https://api.example.com/users \ -H "Origin: https://frontend.com" \ -H "Authorization: Bearer token" \ -H "Content-Type: application/json" \ -d '{"name":"Ali"}' \ -v ۱۱.۲ Automated Testing (Jest) content_copy typescript// cors.spec.ts import { Test } from '@nestjs/testing'; import { INestApplication } from '@nestjs/common'; import * as request from 'supertest'; import { AppModule } from './app.module'; describe('CORS', () => { let app: INestApplication; beforeAll(async () => { const moduleRef = await Test.createTestingModule({ imports: [AppModule], }).compile(); app = moduleRef.createNestApplication(); app.enableCors({ origin: 'https://frontend.com', credentials: true, }); await app.init(); }); it('should allow requests from allowed origin', () => { return request(app.getHttpServer()) .get('/users') .set('Origin', 'https://frontend.com') .expect(200) .expect('Access-Control-Allow-Origin', 'https://frontend.com'); }); it('should block requests from disallowed origin', () => { return request(app.getHttpServer()) .get('/users') .set('Origin', 'https://evil.com') .expect((res) => { expect(res.headers['access-control-allow-origin']).toBeUndefined(); }); }); it('should handle preflight correctly', () => { return request(app.getHttpServer()) .options('/users') .set('Origin', 'https://frontend.com') .set('Access-Control-Request-Method', 'POST') .set('Access-Control-Request-Headers', 'Authorization') .expect(200) .expect('Access-Control-Allow-Methods', /POST/) .expect('Access-Control-Allow-Headers', /Authorization/); }); afterAll(async () => { await app.close(); }); }); ۱۲. سوالات مصاحبهسطح Junior:Q1: CORS چیست و چرا وجود دارد؟A: مکانیزمی برای کنترل دسترسی Cross-Origin در مرورگر.جلوی حملات XSS/CSRF را می‌گی

Set و WeakSet در JavaScript: راهنمای جامع از مبتدی تا حرفه‌ای

Navid Barsalari — Sun, 10 May 2026 13:51:26 +0330

مقدمه: چرا Array کافی نیست؟فرض کنید می‌خواهید لیستی از کاربران آنلاین را نگه دارید. با Array می‌نویسید:const onlineUsers = []; function addUser(userId) { if (!onlineUsers.includes(userId)) { onlineUsers.push(userId); } } addUser(101); addUser(102); addUser(101); // تکراری! مشکل چیست؟Performance: ()includes باید کل آرایه را بگردد → O(n)تکرار: باید خودمان چک کنیم که آیتم تکراری نباشدحذف: ()splice برای حذف یک آیتم خاص کند استراه حل: Set - یک ساختار داده که فقط مقادیر یکتا نگه می‌دارد و عملیات‌هایش O(1) است.بخش ۱: Set - مجموعه‌های یکتا۱.۱ ایجاد و استفاده پایه// ایجاد Set خالی const mySet = new Set(); // ایجاد با مقادیر اولیه const numbers = new Set([1, 2, 3, 3, 4]); // {1, 2, 3, 4} // اضافه کردن mySet.add(10); mySet.add(20); mySet.add(10); // تکراری، اضافه نمی‌شود console.log(mySet.size); // 2 // چک کردن وجود console.log(mySet.has(10)); // true // حذف mySet.delete(10); // پاک کردن همه mySet.clear(); ۱.۲ تفاوت Set با Arrayمقادیر تکراری:Array: مجاز است، می‌توانید چندین بار یک مقدار را اضافه کنیدSet: غیرمجاز، هر مقدار فقط یک بار ذخیره می‌شوددسترسی با Index:Array: arr[0] برای دسترسی به اولین عنصرSet: ندارد، باید با Iterator یا تبدیل به Array دسترسی پیدا کنیدجستجو (has یا includes):Array: پیچیدگی )O(n) - باید کل آرایه را بگرددSet: پیچیدگی O(1) - جستجوی فوری با Hash Tableحذف عنصر:Array: پیچیدگی O(n) - باید پیدا کند و Index ها را جابجا کندSet: پیچیدگی O(1) - حذف فوریحفظ ترتیب:هر دو ترتیب اضافه شدن (insertion order) را حفظ می‌کنندبخش ۲: کاربردهای واقعی Set۲.۱ حذف تکراری از آرایه// روش قدیمی (کند) function removeDuplicates(arr) { return arr.filter((item, index) => arr.indexOf(item) === index); } // روش حرفه‌ای با Set function removeDuplicatesFast(arr) { return [...new Set(arr)]; } const numbers = [1, 2, 2, 3, 4, 4, 5]; console.log(removeDuplicatesFast(numbers)); // [1, 2, 3, 4, 5] Performance:Array method: O(n^2) Set method:O(n)۲.۲ عملیات ریاضی روی مجموعه‌ها// اجتماع (Union) function union(setA, setB) { return new Set([...setA, ...setB]); } // اشتراک (Intersection) function intersection(setA, setB) { return new Set([...setA].filter(x => setB.has(x))); } // تفاضل (Difference) function difference(setA, setB) { return new Set([...setA].filter(x => !setB.has(x))); } // مثال const admins = new Set(['user1', 'user2', 'user3']); const moderators = new Set(['user2', 'user3', 'user4']); console.log(union(admins, moderators)); // Set {'user1', 'user2', 'user3', 'user4'} console.log(intersection(admins, moderators)); // Set {'user2', 'user3'} console.log(difference(admins, moderators)); // Set {'user1'} ۲.۳ ردیابی کاربران آنلاین (Real-time)class OnlineUsersTracker { constructor() { this.onlineUsers = new Set(); } userConnected(userId) { this.onlineUsers.add(userId); console.log(`User ${userId} is online. Total: ${this.onlineUsers.size}`); } userDisconnected(userId) { this.onlineUsers.delete(userId); console.log(`User ${userId} went offline. Total: ${this.onlineUsers.size}`); } isOnline(userId) { return this.onlineUsers.has(userId); // O(1) } getOnlineCount() { return this.onlineUsers.size; } } // استفاده در WebSocket const tracker = new OnlineUsersTracker(); tracker.userConnected(101); tracker.userConnected(102); tracker.userConnected(101); // تکراری، اثری ندارد console.log(tracker.isOnline(101)); // true ۲.۴ جلوگیری از Callback تکراریclass EventEmitter { constructor() { this.listeners = new Map(); // event -> Set of callbacks } on(event, callback) { if (!this.listeners.has(event)) { this.listeners.set(event, new Set()); } this.listeners.get(event).add(callback); } off(event, callback) { if (this.listeners.has(event)) { this.listeners.get(event).delete(callback); } } emit(event, data) { if (this.listeners.has(event)) { this.listeners.get(event).forEach(callback => callback(data)); } } } // استفاده const emitter = new EventEmitter(); const handler = (data) => console.log('Received:', data); emitter.on('message', handler); emitter.on('message', handler); // تکراری، فقط یک بار اضافه می‌شود emitter.emit('message', 'Hello'); // فقط یک بار اجرا می‌شود بخش ۳: WeakSet - مدیریت حافظه هوشمند۳.۱ تفاوت Set و WeakSetنوع مقادیر:Set: هر نوع داده‌ای (number, string, object, …)WeakSet: فقط Object (نمی‌توان primitive اضافه کرد)Garbage Collection:Set: رفرنس قوی نگه می‌دارد، مانع آزادسازی حافظه می‌شودWeakSet: رفرنس ضعیف، اجازه می‌دهد Garbage Collector حافظه را آزاد کندقابلیت Iterate:Set: بله، می‌توان با for...of یا forEach پیمایش کردWeakSet: خیر، غیرقابل پیمایش استمتدهای موجود:Set: add, has, delete, clear, sizeWeakSet: فقط add, has, delete (بدون clear و size)کاربرد اصلی:Set: ذخیره دائمی داده‌های یکتاWeakSet: ذخیره موقت برای Metadata و Tracking۳.۲ مشکل Memory Leak با Set// ❌ مشکل: Memory Leak let user = { id: 1, name: 'Gholi' }; const processedUsers = new Set(); processedUsers.add(user); user = null; // می‌خواهیم user را آزاد کنیم // اما Set هنوز رفرنس دارد! // Garbage Collector نمی‌تواند حافظه را آزاد کند console.log(processedUsers.size); // 1 -------- // ✅ راه حل: WeakSet let user = { id: 1, name: 'Gholi' }; const processedUsers = new WeakSet(); processedUsers.add(user); user = null; // حالا Garbage Collector می‌تواند حافظه را آزاد کند // WeakSet به صورت خودکار آبجکت را حذف می‌کند ۳.۳ کاربرد واقعی: ردیابی DOM Elementsclass DOMTracker { constructor() { this.trackedElements = new WeakSet(); } track(element) { if (!(element instanceof HTMLElement)) { throw new Error('Only DOM elements can be tracked'); } this.trackedElements.add(element); console.log('Element tracked'); } isTracked(element) { return this.trackedElements.has(element); } } // استفاده const tracker = new DOMTracker(); let button = document.createElement('button'); tracker.track(button); console.log(tracker.isTracked(button)); // true // وقتی button از DOM حذف شود button.remove(); button = null; // WeakSet به صورت خودکار حافظه را آزاد می‌کند // Memory Leak نداریم! ۳.۴ کاربرد: Private Data Patternconst privateData = new WeakSet(); class SecureUser { constructor(name) { this.name = name; privateData.add(this); // علامت‌گذاری به عنوان معتبر } static isValid(user) { return privateData.has(user); } } // استفاده const user1 = new SecureUser('Gholi'); const fakeUser = { name: 'Hacker' }; console.log(SecureUser.isValid(user1)); // true console.log(SecureUser.isValid(fakeUser)); // false ۳.۵ کاربرد: جلوگیری از Circular Referencefunction deepClone(obj, cloned = new WeakSet()) { // جلوگیری از Infinite Loop if (cloned.has(obj)) { throw new Error('Circular reference detected'); } if (typeof obj !== 'object' || obj === null) { return obj; } cloned.add(obj); const clone = Array.isArray(obj) ? [] : {}; for (let key in obj) { clone[key] = deepClone(obj[key], cloned); } return clone; } // مثال با Circular Reference const user = { name: 'Gholi' }; user.self = user; // Circular! try { deepClone(user); } catch (e) { console.log(e.message); // "Circular reference detected" } بخش ۴: نکات Performance و بهینه‌سازی۴.۱ مقایسه سرعت// Benchmark: جستجو در 1 میلیون آیتم const size = 1_000_000; // Array const arr = Array.from({ length: size }, (_, i) => i); console.time('Array includes'); arr.includes(999_999); console.timeEnd('Array includes'); // ~10ms // Set const set = new Set(arr); console.time('Set has'); set.has(999_999); console.timeEnd('Set has'); // ~0.001ms (1000x سریع‌تر!) ۴.۲ مصرف حافظه// Array: 8 bytes per item (number) + overhead const arr = new Array(1_000_000).fill(1); // Set: ~24 bytes per item (hash table overhead) const set = new Set(arr); // نتیجه: Set حافظه بیشتری مصرف می‌کند // اما سرعت بالاتری دارد قانون کلی:اگر داده‌ها کمتر از ۱۰۰۰ آیتم: Array کافی استاگر نیاز به جستجوی مکرر: Setاگر نیاز به Index: Arrayاگر نیاز به Garbage Collection: WeakSet۴.۳ بهینه‌سازی: Bulk Operations// ❌ کند: اضافه کردن تک تک const set = new Set(); for (let i = 0; i < 10000; i++) { set.add(i); } // ✅ سریع: ایجاد با آرایه const fastSet = new Set(Array.from({ length: 10000 }, (_, i) => i)); بخش ۵: نکات امنیتی۵.۱ جلوگیری از Prototype Pollution// ❌ خطرناک const userRoles = new Set(); userRoles.add('admin'); // حمله Object.prototype.isAdmin = true; console.log(userRoles.isAdmin); // true (خطرناک!) // ✅ امن function hasRole(set, role) { return set.has(role); // فقط از متدهای Set استفاده کن } ۵.۲ Sanitization ورودیclass SecureSet { constructor() { this.data = new Set(); } add(value) { // فقط مقادیر معتبر if (typeof value === 'string' && value.length < 100) { this.data.add(value); } else { throw new Error('Invalid input'); } } has(value) { return this.data.has(value); } } ۵.۳ Rate Limiting با Setclass RateLimiter { constructor(maxRequests, windowMs) { this.maxRequests = maxRequests; this.windowMs = windowMs; this.requests = new Map(); // IP -> Set of timestamps } isAllowed(ip) { const now = Date.now(); if (!this.requests.has(ip)) { this.requests.set(ip, new Set()); } const userRequests = this.requests.get(ip); // حذف timestamp های قدیمی for (let timestamp of userRequests) { if (now - timestamp > this.windowMs) { userRequests.delete(timestamp); } } if (userRequests.size >= this.maxRequests) { return false; // Rate limit exceeded } userRequests.add(now); return true; } } // استفاده const limiter = new RateLimiter(5, 60000); // 5 requests per minute console.log(limiter.isAllowed('192.168.1.1')); // true // ... 5 بار دیگر console.log(limiter.isAllowed('192.168.1.1')); // false (blocked) بخش ۶: سوالات مصاحبهسوال ۱: تفاوت Set و Array چیست؟پاسخ:Set فقط مقادیر یکتا نگه می‌داردعملیات has, add, delete در Set: O(1)O(1)O(1)، در Array: O(n)O(n)O(n)Set Index ندارد، Array داردSet برای جستجوی سریع، Array برای ترتیب و دسترسی Indexسوال ۲: چه زمانی از WeakSet استفاده کنیم؟پاسخ:وقتی می‌خواهیم Object ها را Track کنیم بدون اینکه مانع Garbage Collection شویممثال: ردیابی DOM Elements، Private Data، جلوگیری از Circular Referenceسوال ۳: چرا WeakSet قابل Iterate نیست؟پاسخ:چون Garbage Collector می‌تواند هر لحظه آبجکت‌ها را حذف کند. اگر Iterate می‌شد، نتیجه غیرقابل پیش‌بینی بود.سوال ۴: کد زیر چه خروجی دارد؟const set = new Set([1, 2, 3]); set.add(1); set.add('1'); console.log(set.size);پاسخ: 4چون 1 (number) و '1' (string) دو مقدار متفاوت هستند (strict equality).سوال ۵: چطور Set را به Array تبدیل کنیم؟const set = new Set([1, 2, 3]); // روش 1: Spread const arr1 = [...set]; // روش 2: Array.from const arr2 = Array.from(set); // روش 3: Loop const arr3 = []; set.forEach(item => arr3.push(item)); سوال ۶: پیاده‌سازی Set با Objectclass MySet { constructor() { this.items = {}; this.length = 0; } add(value) { if (!this.has(value)) { this.items[value] = true; this.length++; } return this; } has(value) { return this.items.hasOwnProperty(value); } delete(value) { if (this.has(value)) { delete this.items[value]; this.length--; return true; } return false; } clear() { this.items = {}; this.length = 0; } get size() { return this.length; } } بخش ۷: Best Practices✅ استفاده صحیح// 1. برای یکتاسازی const uniqueIds = new Set(arrayWithDuplicates); // 2. برای جستجوی سریع const allowedUsers = new Set(['user1', 'user2', 'user3']); if (allowedUsers.has(currentUser)) { /* ... */ } // 3. برای عملیات مجموعه‌ای const admins = new Set([...]); const moderators = new Set([...]); const allStaff = new Set([...admins, ...moderators]); // 4. WeakSet برای DOM tracking const clickedElements = new WeakSet(); element.addEventListener('click', () => { clickedElements.add(element); }); ❌ استفاده نادرست// 1. استفاده از Set برای داده‌های کم const smallList = new Set([1, 2, 3]); // Array بهتر است // 2. نیاز به Index const set = new Set([1, 2, 3]); // set[0] ❌ کار نمی‌کند // 3. WeakSet با Primitive const weak = new WeakSet(); weak.add(123); // ❌ TypeError // 4. Iterate روی WeakSet const weak = new WeakSet(); for (let item of weak) { } // ❌ TypeError جمع‌بندیSet:برای مقادیر یکتاPerformance بالا O(1)قابل Iterateمصرف حافظه بیشتر از ArrayWeakSet:فقط ObjectGarbage Collection دوستانهغیرقابل Iterateبرای Metadata و Trackingچه زمانی استفاده کنیم؟حذف تکراری از آرایه:const unique = [...new Set(array)];انتخاب: Setجستجوی مکرر (بیش از ۱۰۰۰ بار):if (mySet.has(value)) { }انتخاب: Setترتیب مهم است + نیاز به Index:const item = arr[5];انتخاب: ArrayTrack کردن Objects بدون Memory Leak:const processed = new WeakSet(); processed.add(obj);انتخاب: WeakSetDOM Element tracking:const clicked = new WeakSet(); element.addEventListener('click', () => clicked.add(element)); انتخاب: WeakSetداده‌های کمتر از ۱۰۰۰ آیتم:const smallList = [1, 2, 3];انتخاب: Array (سادگی مهم‌تر از Performance)Rate Limiting:const requests = new Map(); // IP -> Set of timestampsنکته نهایی: Set و WeakSet ابزارهای قدرتمندی هستند، اما باید در جای مناسب استفاده شوند. همیشه Performance و Memory را با هم در نظر بگیرید.

الگوریتم در گولنگ (قسمت سوم): Valid Parentheses و فرار از تله‌های Tech Lead!

Navid Barsalari — Sat, 09 May 2026 12:50:36 +0330

در قسمت قبلی با هم الگوریتم Two Sum را شخم زدیم و دیدیم چطور یک HashMap ساده می‌تواند ما را از شر حلقه‌های تودرتو و نگاه‌های سنگین Tech Lead نجات دهد. قصد داریم در این مجموعه مقاله، مسیر حل الگوریتم‌ها را با همین فرمون جلو برویم.الگوریتم دومی که مورد بحث قرار می‌دهیم، یکی دیگر از غول‌های مرحله اول (Screening) مصاحبه‌های بین‌المللی است: Valid Parentheses (پرانتزهای معتبر).صورت سوالValid ParenthesesGiven a string s containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.An input string is valid if:Open brackets must be closed by the same type of brackets.Open brackets must be closed in the correct order.Every close bracket has a corresponding open bracket of the same type.Input: s = “()”Output: trueInput: s = “()[]{}”Output: trueInput: s = “(]”Output: falseInput: s = “([)]”Output: falseConstraints:1≤ s.length ≤10 ^4s consists of parentheses only '()[]{}'.درک مسئله: ذهن انسان در برابر ماشینبیایید بی‌درنگ برویم سراغ مسئله. اگر به عنوان یک انسان به رشته "{[()]}" نگاه کنیم، مغز ما به طور خودکار تقارن را تشخیص می‌دهد. چشم ما از وسط شروع می‌کند، می‌بیند () کنار هم هستند، بعد [] آن‌ها را احاطه کرده و در نهایت {}. در کسری از ثانیه می‌گوییم “معتبر است!”.اما کامپیوتر کورِ بیچاره تقارن سرش نمی‌شود. او رشته را مثل یک تونل تاریک می‌بیند و فقط می‌تواند کاراکترها را یکی‌یکی از چپ به راست بخواند (پیمایش کند).پس ذهن برخی از برنامه‌نویسان تازه‌کار می‌رود سراغ یک ایده ظاهراً هوشمندانه: «خب، اگر رشته معتبر باشه، حتماً یک جایی توش () یا [] یا {} چسبیده به هم وجود داره. بیایم تو یه حلقه، هی این جفت‌ها رو پیدا کنیم و حذفشون کنیم. اگر در نهایت هیچی نموند، یعنی رشته معتبره!»اگر بخواهیم این منطق را تبدیل به کد گولنگ کنیم، به چیزی شبیه به این می‌رسیم:package main import ( "fmt" "strings" ) // Bad Practice: String manipulation in a loop func isValidBad(s string) bool { // Keep looping as long as we find a valid pair for strings.Contains(s, "()") || strings.Contains(s, "[]") || strings.Contains(s, "{}") { s = strings.ReplaceAll(s, "()", "") s = strings.ReplaceAll(s, "[]", "") s = strings.ReplaceAll(s, "{}", "") } // If the string is completely empty, it was valid return len(s) == 0 } func main() { fmt.Println(isValidBad("{[()]}")) // true } کد کار کرد! اما… (ورود مجدد Tech Lead 😠)شما با غرور کد را ران می‌کنید، خروجی درست است و فکر می‌کنید الگوریتم را هک کرده‌اید! اما وقتی Tech Lead کد را می‌بیند، دستش را روی پیشانی‌اش می‌گذارد و درخواست یک جلسه 1-on-1 می‌دهد.چرا این کد در یک مصاحبه واقعی درجا رد می‌شود؟۱. فاجعه پرفورمنس و تخصیص حافظه (Memory Allocation):در گولنگ (و خیلی از زبان‌های دیگر)، استرینگ‌ها Immutable (تغییرناپذیر) هستند. یعنی وقتی شما strings.ReplaceAll را صدا می‌زنید، گولنگ رشته قبلی را تغییر نمی‌دهد، بلکه یک رشته کاملاً جدید در حافظه می‌سازد! اگر طول رشته ما 10410^4104 باشد (طبق محدودیت‌ها)، شما دارید هزاران رشته جدید می‌سازید و Garbage Collector را به مرز جنون می‌رسانید.۲. زمان اجرای وحشتناک (Time Complexity):هر بار که strings.Contains یا ReplaceAll اجرا می‌شود، کل رشته از اول اسکن می‌شود. پیچیدگی زمانی این روش در بدترین حالت نزدیک به O(n2)O(n^2)O(n2) است.تغییر زاویه دید: ترفند طلاییتک‌لید به شما می‌گوید: «به جای اینکه هی رشته رو بسازی و خراب کنی، از ساختار داده‌ای استفاده کن که دقیقاً برای همین کار ساخته شده: Stack (پشته).»پشته یا LIFO (Last In, First Out) مثل یک دسته بشقاب است. آخرین بشقابی که روی هم می‌گذارید، اولین بشقابی است که برمی‌دارید. در مسئله ما: آخرین براکتی که باز شده، باید اولین براکتی باشد که بسته می‌شود.فرض کنید رشته ما "{ [ } ]" است:کاراکتر { را می‌بینیم. چون باز است، می‌گذاریمش توی پشته.کاراکتر [ را می‌بینیم. باز است، می‌رود روی پشته (الان بالاترین عنصر پشته [ است).کاراکتر } را می‌بینیم. این یک براکت بسته است! باید بررسی کنیم آیا با بالاترین عنصر پشته جفت می‌شود؟ بالاترین عنصر [ است. آیا } با [ جفت است؟ خیر! پس رشته نامعتبر است.با این روش، فقط یک بار روی رشته حرکت می‌کنیم (Single Pass).راه‌حل بهینه و حرفه‌ای (The Optimal Solution)در گولنگ ساختار داده اختصاصی به نام Stack نداریم، اما نیازی هم نداریم! اسلایس‌ها (Slices) در گولنگ به راحتی نقش یک پشته را بازی می‌کنند.کدمان را به شکلی می‌نویسیم که پیچیدگی زمانی آن O(n) و پیچیدگی فضایی آن حداکثر O(n) باشد.func isValid(s string) bool { // Base check: If the length is odd, it's impossible to be valid if len(s)%2 != 0 { return false } // Map to keep track of matching brackets // Key: Closing bracket, Value: Corresponding Opening bracket brackets := map[rune]rune{ ')': '(', '}': '{', ']': '[', } // Our stack (using a slice of runes) var stack []rune for _, char := range s { // Is it a closing bracket? (Checking if it exists as a key in our map) if openBracket, isClose := brackets[char]; isClose { // 1. Stack must not be empty // 2. The top of the stack must match the required opening bracket if len(stack) > 0 && stack[len(stack)-1] == openBracket { // Pop: Remove the top element from the stack stack = stack[:len(stack)-1] } else { // Mismatch or empty stack with a closing bracket return false } } else { // It's an opening bracket, push it onto the stack stack = append(stack, char) } } // If the stack is empty at the end, all brackets were matched perfectly! return len(stack) == 0 } کالبدشکافی خط به خط:if len(s)%2 != 0:این یک نکته طلایی (Early Return) است. اگر طول رشته فرد باشد (مثلاً ۳)، محال است تمام براکت‌ها جفت شوند. با همین یک خط (O(1)O(1)O(1))، کلی از ورودی‌های غلط را بدون محاسبات سنگین فیلتر می‌کنیم. مصاحبه‌گرها عاشق این بهینه‌سازی‌های کوچک هستند!brackets := map[rune]rune{ ... }:استفاده از مپ باعث می‌شود اگر فردا روزی مدیر محصول گفت «براکت‌های < > را هم ساپورت کنید»، کدهای ما پر از if/else های زشت نشود.var stack []rune:ما پشته خود را به صورت یک اسلایس از نوع rune (نماینده کاراکترهای یونیکد در گو) تعریف می‌کنیم.if openBracket, isClose := brackets[char]; isClose:یک تیر و دو نشان! هم چک می‌کنیم کاراکتر فعلی جزو براکت‌های بسته (کلیدهای مپ) هست یا نه، و هم براکتِ بازِ متناظرش را می‌گیریم.stack[len(stack)-1]:این دستور دقیقاً بالاترین (آخرین) عنصر پشته را می‌خواند.stack = stack[:len(stack)-1]:این عملیات Pop در گولنگ است! با استفاده از قابلیت Slicing، به گولنگ می‌گوییم: «یک اسلایس جدید بساز که شامل همه عناصر قبلی باشد، به جز آخری.»return len(stack) == 0:این هندل‌کننده یکی از خبیثانه‌ترین تله‌های مصاحبه است! فرض کنید ورودی ("(((") باشد. هیچ خطایی در طول حلقه نمی‌خوریم، اما در نهایت پشته پر می‌ماند. اگر پشته خالی بود، یعنی همه چی به درستی جفت و حذف شده است.تست کیس‌ها (Edge Cases) و اثبات کددوباره سراغ Table-Driven Tests می‌رویم تا به Tech Lead ثابت کنیم کدمان ضدگلوله است.package main import "testing" func TestIsValid(t *testing.T) { tests := []struct { name string input string expected bool }{ {"Empty string", "", true}, {"Simple valid", "()", true}, {"Multiple valid", "()[]{}", true}, {"Nested valid", "{[()]}", true}, {"Simple invalid", "(]", false}, {"Wrong order", "([)]", false}, {"Odd length", "()[", false}, // Killer Case 1 {"Start with close", "][", false}, // Killer Case 2 {"Only open brackets", "((((", false}, // Killer Case 3 {"Only close brackets", "))))", false}, // Killer Case 4 } for _, tt := range tests { t.Run(tt.name, func(t *testing.T) { result := isValid(tt.input) if result != tt.expected { t.Errorf("isValid(%q) = %v; want %v", tt.input, result, tt.expected) } }) } } جمع‌بندی نکات این الگوریتم:قدرت پشته (Stack): هرجا در الگوریتم‌ها با مفاهیمی مثل “ترتیب معکوس”، “تقارن تو در تو” یا “Undo” مواجه شدید، اول از همه به Stack فکر کنید.فرار از String Manipulation: دستکاری رشته‌ها در حلقه‌های طولانی یک قاتل خاموش پرفورمنس است.مدیریت Edge Case ها: حالت‌هایی مثل شروع شدن با براکت بسته ]، یا پر ماندن پشته در انتها ((( دقیقاً همان جاهایی هستند که تفاوت یک جونیور و سنیور را در مصاحبه مشخص می‌کنند.

ترجمه کتاب JavaScript: The Definitive Guide, 7th Edition

Navid Barsalari — Sun, 03 May 2026 17:32:07 +0330

۱.۱ کاوش در جاوااسکریپتوقتی در حال یادگیری یک زبان برنامهنویسی جدید هستید، مهم است که مثالهای موجود در کتاب را اجرا کنید، سپس آنها را تغییر دهید و دوباره امتحان کنید تا درکتان از زبان را بیازمایید. برای انجام این کار، به یک مفسر جاوااسکریپت نیاز دارید.سادهترین راه برای امتحان کردن چند خط کد جاوااسکریپت این است که ابزارهای توسعهدهندهٔ مرورگر وب خود را باز کنید (با فشردن یکی از کلیدهای F12، ترکیب Ctrl+Shift+I یا Command+Option+I)، سپس به زبانهٔ «Console» بروید. در آنجا میتوانید کد مورد نظر خود را در خط فرمان وارد کنید و نتیجه را همان لحظه مشاهده کنید.ابزارهای توسعهدهندهٔ مرورگر معمولاً به صورت یک پنل در پایین یا سمت راست پنجرهٔ مرورگر نمایش داده میشوند، اما اغلب میتوانید آنها را جدا کرده و در یک پنجرهٔ مستقل نمایش دهید (همانطور که در شکل ۱‑۱ نشان داده شده است)، که این حالت معمولاً کار را راحتتر میکند.شکل ۱‑۱راه دیگری برای امتحان کردن کدهای جاوااسکریپت این است که Node را از آدرسhttps://nodejs.org دانلود و نصب کنید.پس از نصب Node روی سیستم، کافی است یک پنجرهٔ ترمینال باز کنید و دستور node را وارد کنید تا یک نشست تعاملی (Interactive Session) جاوااسکریپت مانند نمونهٔ زیر آغاز شود:$ node Welcome to Node.js v12.13.0. Type ".help" for more information. > .help .break Sometimes you get stuck, this gets you out .clear Alias for .break .editor Enter editor mode .exit Exit the repl .help Print this help message .load Load JS from a file into the REPL session .save Save all evaluated commands in this REPL session to a file Press ^C to abort current expression, ^D to exit the repl > let x = 2, y = 3; undefined > x + y 5 > (x === 2) && (y === 3) true > (x > 3) || ۱.۲ سلام دنیا (Hello World)وقتی آماده شدید که با بخشهای طولانیتری از کد کار کنید، محیطهای تعاملی خطبهخط دیگر چندان مناسب نخواهند بود و احتمالاً ترجیح میدهید کدهای خود را در یک ویرایشگر متن بنویسید. از آنجا میتوانید کد را کپی کرده و در کنسول جاوااسکریپت یا در یک نشست Node جایگذاری کنید.یا میتوانید کد خود را در یک فایل ذخیره کنید (پسوند رایج فایلهای جاوااسکریپت js. است) و سپس آن فایل را با استفاده از Node اجرا نمایید:$ node snippet.jsاگر از Node بهصورت غیرتعاملی (مانند روش قبلی) استفاده کنید، مقدار کدهایی را که اجرا میکنید بهطور خودکار چاپ نمیکند؛ بنابراین لازم است خودتان این کار را انجام دهید. میتوانید از تابع console.log() برای نمایش متن و سایر مقادیر جاوااسکریپت در پنجرهٔ ترمینال یا در کنسول ابزارهای توسعهدهندهٔ مرورگر استفاده کنید.برای مثال، اگر فایلی به نام hello.js بسازید و این خط کد را در آن قرار دهید:console.log("Hello World!");و اگر این فایل را با دستور node hello.js اجرا کنید، پیام «Hello World!» را خواهید دید که در خروجی چاپ شده است.اگر بخواهید همین پیام را در کنسول جاوااسکریپت یک مرورگر وب مشاهده کنید، یک فایل جدید به نام hello.html بسازید و متن زیر را در آن قرار دهید: