‏سورس‌مپ‌ها چطور کل کدت رو لو می‌دن

نویسنده توضیح می‌ده که وقتی یه اپ React رو منتشر می‌کنی، مرورگر کدی که نوشتی رو اجرا نمی‌کنه؛ ابزار build خروجی مینیفای و باندل‌شده با اسم‌های کوتاه تولید می‌کنه. یه خطای production مثل bundle.min.js:1:48211 هیچ اطلاعات مفیدی بهت نمی‌ده. سورس‌مپ یه فایل JSON هست که این کد مینیفای‌شده رو به فایل، خط، ستون و اسم متغیر اصلی برمی‌گردونه. فیلدهای کلیدیش sources (مسیر فایل‌های اصلی)، names (اسم‌های اصلی که مینیفایر عوض کرده)، mappings (نگاشت موقعیت‌ها به فرمت base64 VLQ) و مهم‌تر از همه sourcesContent هست.

نکتهٔ امنیتی اصلی همین sourcesContent هست. به گفتهٔ نویسنده، خیلی‌ها فکر می‌کنن سورس‌مپ فقط یه جدول نازکه، ولی اکثر باندلرهای مدرن به‌صورت پیش‌فرض متن کامل فایل‌های سورس اصلی رو همراه با کامنت‌ها داخل sourcesContent جاسازی می‌کنن. یعنی اگه این فایل map رو منتشر کنی، کل کد قابل‌خوندنت در اختیار هر کسی که به فایل .map دسترسی داره قرار می‌گیره. مینیفای فقط حجم کد رو کم می‌کنه، نه این‌که منطق یا اطلاعات حساس رو پنهان کنه.

مرورگر سورس‌مپ رو از دو راه پیدا می‌کنه: یا باندل با یه کامنت //# sourceMappingURL=... به اون اشاره می‌کنه، یا سرور یه هدر HTTP به اسم SourceMap می‌فرسته. هر دو حالت، آدرس فایل عمومیه و هر چیزی که DevTools می‌تونه بگیره، curl هم می‌تونه. فایل .map معمولاً کنار اسکریپت‌ها تو همون پوشهٔ assets استاتیک قرار می‌گیره چون ابزار build اون‌جا گذاشتتش و قدم deploy کل پوشه رو بالا برده.

نویسنده دو نمونهٔ واقعی می‌آره. اول اپل که موقع راه‌اندازی نسخهٔ بازطراحی‌شدهٔ وب App Store با سورس‌مپ فعال به production رفت و کل کد فرانت‌اندش لو رفت. دوم Anthropic که تو پکیج npm به اسم @anthropic-ai/claude-code یه فایل cli.js.map حدود ۵۹.۸ مگابایتی منتشر کرد که حدود ۱۹۰۰ فایل و بیش از ۵۱۲ هزار خط تایپ‌اسکریپت رو نگاشت می‌کرد. به گفتهٔ نویسنده، فرقش با اپل این بود که پکیج npm بلافاصله دانلود و کش و mirror می‌شه و دیگه هیچ کانفیگی نمی‌تونه نسخهٔ منتشرشده رو از همهٔ کش‌ها پاک کنه. دلیلش هم این بود که build اون‌ها روی Bun اجرا می‌شد که به‌صورت پیش‌فرض سورس‌مپ تولید می‌کنه و کسی *.map رو به .npmignore اضافه نکرده بود یا فیلد files رو تو package.json پین نکرده بود.

نویسنده تأکید می‌کنه که حتی «فقط کد فرانت‌اند» هم بی‌خطر نیست: لو رفتنش ساختار پوشه‌ها، اسم ماژول‌ها، کامنت‌ها، شکل APIها، endpointها و فلگ‌های فیچر رو فاش می‌کنه، و گاهی حتی کلیدهای API و سکرت‌هایی که اشتباهاً تو کد کلاینت inline شدن. کسایی هم که دنبال این اشتباهات می‌گردن هابی‌ست نیستن، باندل‌های production سایت‌های بزرگ رو scrape می‌کنن.

برای جلوگیری، نویسنده چهار لایه پیشنهاد می‌ده. اول، از خود باندلر شروع کن و تولید سورس‌مپ رو تو build‌های production خاموش کن:

// next.config.js
module.exports = {
  productionBrowserSourceMaps: false,
};

نویسنده می‌گه false تو Vite و Next.js پیش‌فرضه، پس هر دو شرکت یه کاری کرده بودن که اینو روشن کنن. لایهٔ دوم اینه که اگه برای ردیابی خطا بهش نیاز داری، با گزینه‌هایی مثل sourcemap: 'hidden' تو Vite یا devtool: 'hidden-source-map' تو Webpack فایل رو بسازی ولی کامنت اشاره‌گر رو حذف کنی، بعد فقط به ابزار مانیتورینگ مثل Sentry آپلودش کنی. لایهٔ سوم یه backstop روی سروره؛ مثلاً تو nginx برای هر درخواست .map یه 404 برگردونی:

location ~* \.map$ {
  return 404;
}

لایهٔ چهارم و مهم‌ترین، اتوماسیونه: نویسنده می‌گه دونستن قانون کافی نیست چون هر دو شرکت تیم امنیتی داشتن، فلگ یه جایی روشن شد و چیزی موقع خروج نگرفتش. پس باید یه قدم تو CI/CD بذاری که اگه فایل .map با sourcesContent تو خروجی build پیدا شد، pipeline رو fail کنه. حتی یه اسکریپت ساده تو postbuild یا predeploy این کار رو تکرارپذیر و فراموش‌نشدنی می‌کنه.

نکات کلیدی:

• سورس‌مپ کد مینیفای‌شده رو به فایل/خط/ستون/اسم اصلی نگاشت می‌کنه و فیلد sourcesContent متن کامل سورس رو inline داره
• اکثر باندلرها به‌صورت پیش‌فرض sourcesContent رو پر می‌کنن، پس فایل map عمومی یعنی کد اصلی عمومی
• اشتباه اپل (وب App Store) و Anthropic (پکیج npm کلاد کد) از همین نقص ساده بود
• پکیج npm بدتره چون نسخهٔ منتشرشده تو کش‌ها و mirrorها می‌مونه و قابل پاک‌شدن نیست
• چهار لایهٔ دفاع: خاموش‌کردن سورس‌مپ production، hidden map برای Sentry، قانون 404 روی سرور، و یه چک خودکار تو CI