CORS و CSP

CORS و CSP: دو خط دفاعی مرورگر در برابر درخواست‌ها و محتوای ناخواسته

در درس قبل با XSS آشنا شدید که ناشی از ورودی کاربر و نحوه‌ی برخورد جاوااسکریپت با آن است. در این درس، دو مکانیزم امنیتی دیگر بررسی می‌شود که این‌بار توسط خود مرورگر و بر اساس سیاست‌هایی که سرور تعریف می‌کند اجرا می‌شوند: CORS که دسترسی به منابع میان دامنه‌ها را کنترل می‌کند، و CSP که مشخص می‌کند چه محتوایی اصلاً مجاز است در صفحه اجرا یا بارگذاری شود.

Same-Origin Policy: قانون پایه‌ی امنیت مرورگر

پیش از بررسی CORS، باید با قانونی به نام Same-Origin Policy آشنا شد: به‌طور پیش‌فرض، جاوااسکریپت در یک صفحه فقط اجازه دارد با سرورهایی از همان origin (ترکیب پروتکل، دامنه و پورت) ارتباط برقرار کند. برای مثال، صفحه‌ای که از https://greendata.ir بارگذاری شده، به‌طور پیش‌فرض نمی‌تواند با https://api.example.com درخواست fetch موفقی داشته باشد، حتی اگر خود درخواست از نظر فنی درست باشد.

CORS: مکانیزم اجازه‌ی صریح برای دسترسی میان دامنه‌ها

CORS (مخفف Cross-Origin Resource Sharing) روشی است که سرور مقصد می‌تواند از طریق آن، صراحتاً اجازه دهد صفحاتی از دامنه‌های دیگر به منابع آن دسترسی داشته باشند؛ این اجازه از طریق هدرهای HTTP خاصی در پاسخ سرور اعلام می‌شود:

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => {
    // اگر سرور هدر CORS مناسب را ارسال نکند،
    // این درخواست با خطایی مشابه زیر مواجه می‌شود:
    // Access to fetch at '...' has been blocked by CORS policy
    console.log("خطای CORS یا شبکه:", error.message);
  });

نکته‌ی مهمی که در فصل ۱۸ نیز اشاره شد این است که این نوع خطا، خطای شبکه‌ای واقعی محسوب می‌شود و توسط بلوک catch گرفته می‌شود؛ اما جزئیات دقیق دلیل مسدود شدن درخواست، معمولاً فقط در کنسول مرورگر و نه در خود شیء خطای جاوااسکریپت قابل مشاهده است.

هدر کلیدی: Access-Control-Allow-Origin

سرور با ارسال هدر Access-Control-Allow-Origin در پاسخ خود، مشخص می‌کند کدام origin ها اجازه‌ی دسترسی به آن منبع را دارند:

مقدار هدر	معنی
Access-Control-Allow-Origin: *	هر دامنه‌ای اجازه‌ی دسترسی دارد
Access-Control-Allow-Origin: https://greendata.ir	فقط همین دامنه‌ی مشخص اجازه‌ی دسترسی دارد
عدم وجود این هدر	درخواست میان دامنه‌ای مسدود می‌شود

نکته‌ی مهمی که باید در نظر داشت این است که تنظیم CORS کاملاً در سمت سرور انجام می‌شود؛ هیچ کد جاوااسکریپتی در سمت کلاینت نمی‌تواند این محدودیت را دور بزند، چون خود مرورگر—نه سرور و نه کد صفحه—مسئول اجرای این سیاست امنیتی است.

CSP: تعیین منابع مجاز برای اجرا و بارگذاری در صفحه

CSP (مخفف Content Security Policy) مکانیزم دیگری است که این‌بار مشخص می‌کند چه نوع محتوایی—اسکریپت، تصویر، فونت و غیره—اصلاً مجاز است در یک صفحه بارگذاری یا اجرا شود. این سیاست معمولاً از طریق یک هدر HTTP یا یک تگ meta تعریف می‌شود:

<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' https://trusted-cdn.com">

این سیاست مشخص مثال، به مرورگر می‌گوید که فقط اسکریپت‌هایی از همان دامنه‌ی صفحه ('self') یا از https://trusted-cdn.com مجاز به اجرا هستند؛ هر اسکریپت دیگری، از جمله اسکریپت‌های درون‌خطی (inline) که ممکن است از طریق یک حمله‌ی XSS تزریق شده باشند، به‌طور خودکار توسط مرورگر مسدود می‌شود.

نقش تکمیلی CSP در برابر XSS

CSP به‌عنوان یک لایه‌ی دفاعی دوم در کنار تکنیک‌هایی که در درس قبل دیدید (مثل استفاده از textContent به‌جای innerHTML) عمل می‌کند. حتی اگر به هر دلیلی کدی موفق به تزریق یک تگ script در صفحه شود، اگر سیاست CSP اسکریپت‌های درون‌خطی را ممنوع کرده باشد، آن اسکریپت هرگز اجرا نخواهد شد:

// این نمونه صرفاً برای نمایش ساختار CSP است، نه اجرای واقعی در مرورگر

const cspHeader = "default-src 'self'; script-src 'self'; object-src 'none'";

// معنای این سیاست:
// - default-src 'self': به‌طور پیش‌فرض فقط منابع همان دامنه مجازند
// - script-src 'self': فقط اسکریپت‌های همان دامنه اجرا می‌شوند؛ inline script مسدود است
// - object-src 'none': هیچ عنصر object یا embed ای مجاز نیست

console.log("این سیاست، حتی در صورت موفقیت یک تزریق XSS، از اجرای آن جلوگیری می‌کند");

جدول مقایسه‌ی CORS و CSP

ویژگی	CORS	CSP
هدف اصلی	کنترل دسترسی جاوااسکریپت به منابع در دامنه‌های دیگر	کنترل نوع محتوایی که اصلاً مجاز به بارگذاری یا اجرا در صفحه است
چه کسی تنظیم می‌کند	سرور مقصد، از طریق هدر پاسخ	سرور میزبان صفحه، از طریق هدر یا تگ meta
نقش اصلی در امنیت	جلوگیری از دسترسی ناخواسته‌ی سایت‌های دیگر به API شما	کاهش اثر حملاتی مثل XSS، حتی اگر تزریق موفق شود

نکات کلیدی

• Same-Origin Policy به‌طور پیش‌فرض جاوااسکریپت را از دسترسی به منابع دامنه‌های دیگر محدود می‌کند.
• CORS با هدرهایی مثل Access-Control-Allow-Origin، اجازه‌ی صریح دسترسی میان دامنه‌ای را از سمت سرور اعلام می‌کند.
• تنظیم CORS کاملاً سمت سرور است و هیچ کد جاوااسکریپتی در کلاینت نمی‌تواند آن را دور بزند.
• CSP به‌عنوان لایه‌ی دفاعی دوم، حتی در صورت موفقیت یک حمله‌ی XSS، از اجرای واقعی اسکریپت مخرب جلوگیری می‌کند.

جمع‌بندی

CORS و CSP دو مکانیزم مکمل هستند که هر دو توسط مرورگر و بر اساس سیاست‌های تعریف‌شده از سمت سرور اجرا می‌شوند: CORS مشخص می‌کند چه کسی اجازه‌ی دسترسی به منابع را دارد، و CSP مشخص می‌کند چه محتوایی اصلاً مجاز به اجرا در صفحه است. درک این دو مکانیزم، همراه با تکنیک‌های سمت کلاینت مثل استفاده‌ی درست از textContent، مجموعه‌ای کامل از دفاع‌های چندلایه در برابر رایج‌ترین آسیب‌پذیری‌های وب فراهم می‌کند.