Sotoon Logo

📄 قوانین مسیر: تنظیمات CORS

CORS چیست و چرا به آن نیاز داریم؟

برای درک CORS، ابتدا باید با یک قانون امنیتی مهم در دنیای وب آشنا شویم: قانون یکسانی مبدأ (Same-Origin Policy).

مشکل: قانون یکسانی مبدأ

مرورگرهای وب برای محافظت از اطلاعات شما، یک قانون سخت‌گیرانه دارند. این قانون می‌گوید: “یک وب‌سایت فقط می‌تواند به منابعی (مثل API یا فایل‌ها) دسترسی داشته باشد که دقیقاً از همان مبدأ (Origin) خودش بارگذاری شده باشند.”

مبدأ (Origin) چیست؟ ترکیبی از سه بخش: پروتکل (http/https), دامنه (example.com) و پورت (80, 443).

برای مثال، این‌ها همه مبدأهای متفاوتی هستند:

  • http://example.com (پروتکل http)

  • https://example.com (پروتکل https)

  • https://www.example.com (زیردامنه www)

  • https://api.example.com (زیردامنه api)

این قانون امنیتی بسیار مفید است، چون جلوی سرقت اطلاعات را می‌گیرد. برای مثال، یک اسکریپت مخرب در سایت evil.com نمی‌تواند مستقیماً به API بانک شما در mybank.com درخواست بفرستد و اطلاعات حساب شما را بخواند.

اما این قانون، گاهی جلوی کارهای کاملاً درست و ضروری را هم می‌گیرد. تصور کنید وب‌اپلیکیشن شما روی دامنه my-app.com قرار دارد و می‌خواهد اطلاعاتی را از سرویس API شما روی api.my-service.com دریافت کند. طبق قانون یکسانی مبدأ، مرورگر این درخواست را مسدود می‌کند!

راه حل: CORS

CORS مخفف Cross-Origin Resource Sharing به معنی “اشتراک‌گذاری منابع بین مبدأهای مختلف” است. CORS یک مکانیزم امنیتی است که به سرور اجازه می‌دهد به مرورگر بگوید: “من به وب‌سایت‌هایی با مبدأ مشخص، اجازه می‌دهم به منابع من دسترسی داشته باشند.”

به زبان ساده، CORS یک توافق‌نامه بین سرور و مرورگر است که قانون یکسانی مبدأ را به صورت کنترل‌شده و امن، کمی انعطاف‌پذیرتر می‌کند. این توافق از طریق هدرهای HTTP انجام می‌شود.

پیکربندی CORS در پنل ستون

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

در ادامه، هر یک از این تنظیمات را به زبان ساده توضیح می‌دهیم:

1. Allow Origins (مبدأهای مجاز)

  • این چیست؟ مهم‌ترین بخش تنظیمات. در این فیلد، آدرس دقیق وب‌سایت‌هایی را وارد می‌کنید که می‌خواهید به منابع شما دسترسی داشته باشند.

  • مثال: اگر اپلیکیشن شما روی https://my-awesome-app.com است، باید همین آدرس را در این فیلد وارد کنید.

  • نکات مهم:

    • می‌توانید از * استفاده کنید تا به همه وب‌سایت‌ها اجازه دسترسی بدهید. این کار از نظر امنیتی بسیار خطرناک است و فقط در موارد خاص (مثلاً برای APIهای کاملاً عمومی) باید استفاده شود.

    • می‌توانید از الگوها استفاده کنید، مثلا https://*.my-company.com به تمام زیردامنه‌های my-company.com اجازه دسترسی می‌دهد.

2. Allow Methods (متدهای مجاز)

  • این چیست؟ مشخص می‌کند که مبدأهای مجاز، اجازه استفاده از کدام متدهای HTTP را دارند.

  • مثال: اگر API شما فقط برای خواندن اطلاعات است، می‌توانید آن را به GET و HEAD محدود کنید. اگر امکان ثبت اطلاعات هم وجود دارد، باید POST را نیز اضافه کنید. PUT، PATCH و DELETE برای ویرایش و حذف اطلاعات هستند.

  • نکته: همیشه متد OPTIONS را نیز به لیست اضافه کنید، زیرا مرورگرها برای درخواست‌های پیچیده از این متد برای “پیش‌بازرسی” (Preflight) استفاده می‌کنند.

3. Allow Headers (هدرهای مجاز)

  • این چیست؟ اگر کدهای سمت کاربر (JavaScript) شما هنگام ارسال درخواست، هدرهای خاصی را به آن اضافه می‌کنند (مثل هدر Authorization برای ارسال توکن)، باید نام آن هدرها را در این بخش لیست کنید.

  • مثال: اگر برای احراز هویت از Authorization و برای نوع محتوا از Content-Type استفاده می‌کنید، باید این دو را در این فیلد وارد کنید.

  • نکته: اگر این فیلد را خالی بگذارید، مرورگر فقط اجازه ارسال هدرهای ساده و استاندارد را می‌دهد.

4. Allow Credentials (اجازه دسترسی به کوکی‌ها)

  • این چیست؟ اگر این گزینه را فعال کنید، به مرورگر اجازه می‌دهید که کوکی‌ها و اطلاعات احراز هویت (مانند HTTP Authentication) را همراه با درخواست‌های بین-مبدأ ارسال کند.

  • مثال: اگر سیستم لاگین شما بر پایه کوکی کار می‌کند، برای درخواست‌های API از یک دامنه دیگر، باید این گزینه را فعال کنید.

  • قانون مهم: اگر این گزینه فعال باشد، نمی‌توانید از * در بخش Allow Origins استفاده کنید. باید آدرس دقیق مبدأ را مشخص کنید. این یک قانون امنیتی در مرورگرهاست.

5. Expose Headers (هدرهای قابل مشاهده برای کلاینت)

  • این چیست؟ به طور پیش‌فرض، کدهای JavaScript در مرورگر فقط به تعداد محدودی از هدرهای پاسخ سرور دسترسی دارند. اگر سرور شما هدرهای سفارشی در پاسخ ارسال می‌کند (مثلاً X-Total-Count برای تعداد کل نتایج در یک لیست)، و شما می‌خواهید JavaScript شما بتواند آن را بخواند، باید نام آن هدر را در این بخش وارد کنید.

  • مثال: X-Pagination-Page, ETag.

6. Max Age (مدت زمان اعتبار)

  • این چیست؟ این یک تنظیم برای بهینه‌سازی عملکرد است. وقتی مرورگر یک درخواست “پیش‌بازرسی” (Preflight) با متد OPTIONS ارسال می‌کند، سرور پاسخ می‌دهد که چه متدها و هدرهایی مجاز هستند. این فیلد به مرورگر می‌گوید که نتیجه این بازرسی را برای چند ثانیه در حافظه خود نگه دارد و برای درخواست‌های بعدی دوباره سؤال نپرسد.

  • مثال: مقدار 86400 یعنی مرورگر تا یک روز (۲۴ ساعت) نتیجه را کش می‌کند. این کار تعداد درخواست‌های OPTIONS را به شدت کاهش می‌دهد.

یک سناریوی واقعی

فرض کنید:

  • یک وب‌سایت SPA (Single Page Application) روی https://app.my-site.com دارید.

  • یک API برای این وب‌سایت روی https://api.my-site.com قرار دارد.

  • برای لاگین، کاربر یک توکن را در هدر Authorization ارسال می‌کند و API از کوکی هم استفاده می‌کند.

  • API شما از متدهای GET, POST, PUT, DELETE پشتیبانی می‌کند.

تنظیمات CORS شما به شکل زیر خواهد بود:

  • Allow Origins: https://app.my-site.com

  • Allow Methods: GET, POST, PUT, DELETE, OPTIONS

  • Allow Headers: Content-Type, Authorization

  • Allow Credentials: فعال (چون از کوکی استفاده می‌شود)

  • Expose Headers: (خالی، مگر اینکه هدر سفارشی خاصی داشته باشید)

  • Max Age: 86400

به زبان ساده‌تر، ویژگی CORS یا Cross-Origin Resource Sharing این امکان را فراهم می‌کند تا دامنه‌ها درخواست خود را برای یک منبع به یک دامنه دیگر بفرستند. برای مثال سایت A.com می‌خواهد تصویری را از سایت B.com نمایش دهد. در حالت معمول مرورگر جلوی نمایش این تصویر را می‌گیرد، مگر اینکه سایت B.com در پاسخ خود به طور مشخص به سایت A.com اجازه دسترسی به تصویر درخواستی را داده باشد. موارد قابل تنظیم این بخش عبارتند از:

در حال حاضر هر دو نوع درخواست‌های Simple و Preflighted پشتیبانی می‌شوند.