آشنایی با CORS یا Cross-origin resource sharing

HTTP access control (CORS)

CORS کوتاه‌شده‌ی عبارت Cross-origin resource sharing است. محل کاربرد CORS در مرورگرهای مدرن و برای بررسی اجازه‌ی دسترسی از راه دور به منابع و سرویس‌های تحت وب است.
برای مثال در حالت عادی امکان استفاده از فایل‌های فونت از روی یک سرور دیگر وجود ندارد یا امکان ارسال یک درخواست AJAX از روی دامنه‌ای غیر از دامنه‌ی فعلی ناممکن است.CORS ابزاری است که روشی برای حذف این محدودیت در اختیار برنامه‌نویسان قرار می‌دهد.

برای روشن‌تر شدن موضوع به مثال زیر توجه کنید:
سایت A برای عملکردی خاص، به یک سرویس AJAX که در سایت B واقع شده، نیازمند است. در حالت عادی، ارسال درخواست AJAX به دلیل محدودیت‌های مرورگر ممکن نیست.
مرورگرهای مدرن که از CORS پشتیبانی می‌کنند، درخواست AJAX را با یک سرآمد اضافه به نام Origin به سایت B ارسال می‌کنند.

Origin: http://a.com

سایت B پس از بررسی Origin چنانچه درخواست را مجاز بداند، با سرآمد Access-Control-Allow-Origin پاسخی به مرورگر ارسال می‌کند و در نتیجه درخواست AJAX هرچند از راه دور ارسال شده، با موفقیت به انجام می‌رسد.

Access-Control-Allow-Origin: http://a.com

باز کردن دسترسی برای فایل‌های فونت

با توجه به اینکه فایل‌های ایستا توسط وب‌سرور پردازش و ارسال می‌شوند، تغییر سرآمدها نیز توسط وب‌سرور باید به انجام برسد. در وب‌سرور Apache با استفاده از دستورات زیر که داخل فایل htaccess باید نوشته شوند، می‌تواند دسترسی به فایل‌های فونت از راه دور را مجاز قرار داد.

<FilesMatch ".(eot|ttf|otf|woff)">
	Header set Access-Control-Allow-Origin "*"
</FilesMatch>

یک نمونه‌ی خوب از کاربرد CORS در Google Fonts که منبعی بزرگ برای فونت‌های همگانی است قابل مشاهده است. در حالی که به صورت عادی امکان استفاده‌ی فونت‌هایی خارج از سرور فعلی ممکن نیست.

درخواست‌های Preflight

برای حفظ امنیت، در درخواست‌هایی که روشی غیر از POST، GET و HEAD داشته باشند، مستقیما ارسال نمی‌شود. مرورگر ابتدا یک درخواست با نوع OPTIONS به سرور ارسال می‌کند. سرور پس از مشاهده‌ی این نوع درخواست باید، انواع دسترسی‌های مجاز برای سایت مبدا را به مرورگر برگرداند.
چنانچه نوع درخواست در لیست موارد مجاز باشد، فرمان اصلی اجرا خواهد شد.
به ارسال اولیه که از نوع OPTIONS است، درخواست Preflight گفته می‌شود.

انواع دسترسی‌های قابل تنظیم در CORS

در سیستم CORS دسترسی‌های گوناگونی قابل تنظیم هستند. این دسترسی‌ها عبارتند از

  • Access-Control-Allow-Origin – دسترسی بر اساس مبدا درخواست
  • Access-Control-Allow-Credentials – دسترسی برای ارسال کوکی‌ها
  • Access-Control-Expose-Headers – دسترسی برای تغییر سرآمدها
  • Access-Control-Max-Age – تعیین زمان Cache شدن درخواست‌های Preflight
  • Access-Control-Allow-Methods – تعیین انواع درخواست‌های مجاز( PUT، DELETE )
  • Access-Control-Allow-Headers – تعیین سرآمدهای قابل تغییر توسط درخواست دهنده( در Prefight )

ارسال سرآمدهای CORS در لاراول

یکی از بهترین محل‌ها برای بررسی این نوع درخواست‌ها، رویداد App::before است که در فایل filters قابل مقدار دهی است.

<?php
App::before(function($request) {
	// allow ajax calls from amib.ir subdomains
	if(
		Request::server( 'HTTP_ORIGIN' ) &&
		preg_match( '/https?:\/\/([a-z0-9-]+\.)?amib\.ir.*/', Request::server( 'HTTP_ORIGIN' ) )
	) {
		header( 'Access-Control-Allow-Origin: ' . Request::server( 'HTTP_ORIGIN' ) );
		header( 'Access-Control-Allow-Methods: GET, POST, OPTIONS' );
		header( 'Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Requested-With' );
		header( 'Access-Control-Allow-Credentials: true' );
	}
 
});
?>

قطع کد بالا در هر بار اجرای فریم‌ورک به اجرا درمی‌آید. برای صدور اجازه‌ی دسترسی، ابتدا وجود سرآمد Origin در درخواست بررسی می‌شود. سپس دامنه‌ی درخواست دهنده با لیست سفید «زیر دامنه‌های amib.ir» مقایسه می‌شود. این کار با استفاده از عبارت‌های با قاعده به انجام می‌رسد.
سپس سرآمدهای لازم برای صدور اجازه‌ی دسترسی در پاسخ به مرورگر ارسال می‌گردند.
اجازه‌های صادر شده در قطعه کد بالا عبارتند از:

  • درخواست‌ّهایی با نوع GET، POST و OPTIONS
  • تعیین سرآمدهای قابل تغییر توسط مشتری: Origin, Content-Type, Accept, Authorization, X-Requested-With
  • اجازه برای ارسال کوکی‌ها به سرور

CORS و JSONP

مهم‌ترین ویژگی CORS در مقایسه با JSONP امنیت است. در JSONP ناچار هستیم محتوای یک اسکریپت را در سایت خود اجرا کنیم. هرچند سایت مقصد ممکن است سایتی ایمن باشد، با هرگونه آسیب‌پذیری امنیتی سایت مقصد، سایت مشتری نیز در معرض خطر جدی قرار می‌گیرد.
مزیت دوم استفاده از CORS به جای JSONP امکان استفاده در دفعات مکرر و با انعطاف بیشتر است.
و برتری سوم CORS امکان ارسال درخواست‌هایی با انواع مختلف از جمله POST و PUT است. در JSONP تنها امکان استفاده از شیوه‌ی GET وجود دارد.

هشدارهای امنیتی

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

مرورگرهایی که از CORS پشتیبانی می‌کنند

فایرفاکس ۳.۵، گوگل کروم ۳، اینترنت اکسپلورر ۱۰، سافاری ۴ و اپرا ۱۲ نخستین نسخه از مرورگرهای مشهور هستند که از CORS پشتیبانی می‌کنند.
بنابراین چنانچه بخواهید از این فناوری استفاده کنید، می‌بایست از نگارش مرورگر مشتری به ویژه نگارش Internet Explorer مطمئن شوید.

برای مطالعه‌ی مطالب بیشتر در خصوص CORS به صفحه‌ی مربوط در MDN مراجعه کنید

این نوشته در HTML, امنیت, برنامه‌نویسی, عبارت‌های منظم, فناوری, لاراول ارسال و , , برچسب شده است. افزودن پیوند یکتا به علاقه‌مندی‌ها.

۹ دیدگاه برای آشنایی با CORS یا Cross-origin resource sharing

  1. وحید می‌گوید:

    خیلی عالی بود
    لطفا باز هم در مورد لاراول مطلب منتشر کنید♥

  2. MSM می‌گوید:

    عالی بود، ممنون

  3. متین می‌گوید:

    سلام ممنون میشم بگید که فایل htaccess رو کجای apache باید بذارم که اجازه دسترسی به فایل های فونت رو بده

    • امیرمسعود ایرانی می‌گوید:

      با سلام
      فایل htaccess مربوط را می‌توانید داخل شاخه‌ای که فونت‌ها موجود هستند قرار بدهید یا هر شاخه بالاتر از آن

  4. amir hedayati می‌گوید:

    یکی از بهترین توضیحات در مورد CORS که واقعا میشد فهمید که چطوری کارمیکنه و چطوری باید استفاده کرد خیلی استفاده کردیم امیر خان
    کارم راه افتاد
    موفق و پیروز باشید در تمام مراحل زندگی

  5. saeid می‌گوید:

    وقتی در اسکریپت یک پیج، با AJAX یک درخواست GET برای یک سایت مثلا گوگل میفرستیم ، ارور
    No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
    میاد.
    پیشنهادی دارید؟

    • امیرمسعود ایرانی می‌گوید:

      با سلام
      به نظر می‌آید به محلی درخواست ارسال کردید که اجازه‌ی انجامش را نداشتید
      ممکن است با استفاده از یک proxy بتوانید مشکل را حل کنید
      نوشتن کدهای مرتبط با این موضوع و رفع مشکل آن از حوزه‌ی این مطلب خارج است

  6. مهران می‌گوید:

    با اهدای سلام ،
    حقیقتا یکی از….یکی نمیشه گفت بلکه بهترین و تنها ترین توضیح قابل فهم در باره cors را از شما در این وبلاگ دریافت کردم که لازم به قدردانی است .
    اما اینکه من که مبتدی هستم ، هشدار امنیتی و استفاده نادرست از آن تا هنگام دانش بیشتر را اکنون چگونه برطرف کنم که مشکلم حل شود؟
    باز هم ممنونم جناب ایرانی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>