تاريخ النشر: 5 تشرين الثاني (نوفمبر) 2018
تحظر سياسة المصدر نفسه في المتصفّح قراءة مصدر من مصدر مختلف. تمنع هذه الآلية المواقع الإلكترونية الضارة من قراءة بيانات المواقع الإلكترونية الأخرى، ولكنها تمنع أيضًا الاستخدامات المشروعة.
غالبًا ما تحتاج تطبيقات الويب الحديثة إلى الحصول على موارد من مصدر مختلف، مثل استرداد بيانات JSON من نطاق مختلف أو تحميل صور من موقع إلكتروني آخر إلى عنصر <canvas>. يمكن أن تكون هذه الموارد عامة ومتاحة لأي شخص لقراءتها، ولكن سياسة المصدر نفسه تمنع استخدامها. وقد استخدم المطوّرون في السابق حلولاً بديلة، مثل
JSONP.
تعمل مشاركة المراجع مع نطاقات خارجية (CORS) على حلّ هذه المشكلة بطريقة موحّدة. يتيح تفعيل سياسة مشاركة الموارد المتعددة المصادر (CORS) للخادم إخبار المتصفّح بأنّه يمكنه استخدام مصدر إضافي.
كيف يعمل طلب الموارد على الويب؟
يمكن للمتصفح والخادم تبادل البيانات عبر الشبكة باستخدام بروتوكول نقل الروابط النصية (HTTP). يحدّد بروتوكول HTTP قواعد التواصل بين مقدّم الطلب والمستجيب، بما في ذلك المعلومات المطلوبة للحصول على مورد.
يتفاوض عنوان HTTP على تبادل الرسائل بين العميل والخادم، ويُستخدَم لتحديد إذن الوصول. يتم تقسيم كل من طلب المتصفّح ورسالة استجابة الخادم إلى رأس ونص.
العنوان
معلومات حول الرسالة، مثل نوع الرسالة أو ترميزها يمكن أن يتضمّن العنوان مجموعة متنوّعة من المعلومات المعروضة كأزواج مفاتيح وقيم. يحتوي عنوان الطلب وعنوان الاستجابة على معلومات مختلفة.
نموذج لعنوان الطلب
Accept: text/html
Cookie: Version=1
هذا العنوان مكافئ لعبارة "أريد تلقّي HTML في الردّ". إليك ملف تعريف ارتباط لديّ".
نموذج عنوان الاستجابة
Content-Encoding: gzip
Cache-Control: no-store
هذا العنوان مكافئ للعبارة "تم ترميز البيانات في هذه الاستجابة باستخدام gzip". لا تخزِّن هذا المحتوى مؤقتًا".
النص
الرسالة نفسها يمكن أن يكون ذلك نصًا عاديًا أو بيانات ثنائية للصورة أو JSON أو HTML أو العديد من التنسيقات الأخرى.
كيف تعمل مشاركة الموارد من مصادر متعددة؟
تطلب سياسة المصدر نفسه من المتصفّح حظر الطلبات المتعدّدة المصادر. عندما تحتاج إلى مورد عام من مصدر مختلف، يخبر الخادم الذي يوفّر المورد المتصفّح بأنّ المصدر الذي يرسل الطلب يمكنه الوصول إلى المورد. يتذكّر المتصفّح ذلك ويسمح بمشاركة المراجع متعدّدة المصادر لهذا المرجع.
الخطوة 1: طلب العميل (المتصفّح)
عندما يرسل المتصفّح طلبًا متعدّد المصادر، يضيف المتصفّح عنوان Origin يتضمّن المصدر الحالي (النظام والمضيف والمنفذ).
الخطوة 2: استجابة الخادم
عندما يرى الخادم هذا العنوان ويريد السماح بالوصول، يضيف العنوان Access-Control-Allow-Origin إلى الرد لتحديد المصدر الذي أرسل الطلب (أو * للسماح بأي مصدر).
الخطوة 3: يتلقّى المتصفّح الردّ
عندما يرى المتصفّح هذه الاستجابة مع عنوان Access-Control-Allow-Origin مناسب، يشارك بيانات الاستجابة مع الموقع الإلكتروني للعميل.
مشاركة بيانات الاعتماد مع CORS
لأسباب تتعلّق بالخصوصية، يتم عادةً استخدام سياسة مشاركة الموارد المتعددة المصادر (CORS) للطلبات المجهولة المصدر التي لا يتم فيها تحديد هوية مقدّم الطلب. إذا كنت تريد إرسال ملفات تعريف الارتباط عند استخدام CORS، والتي يمكنها تحديد هوية المرسل، عليك إضافة عناوين إضافية إلى الطلب والرد.
طلب
أضِف credentials: 'include' إلى خيارات الجلب كما في المثال التالي.
ويشمل ذلك ملف تعريف الارتباط مع الطلب على النحو التالي:
fetch('https://example.com', {
mode: 'cors',
credentials: 'include'
})
الردّ
يجب ضبط Access-Control-Allow-Origin على مصدر محدّد (بدون استخدام حرف البدل *) وضبط Access-Control-Allow-Credentials على true.
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
الطلبات المبدئية لمكالمات HTTP المعقّدة
عندما يقدّم تطبيق ويب طلب HTTP معقّدًا، يضيف المتصفّح طلبًا مسبقًا إلى بداية سلسلة الطلبات.
تحدّد مواصفات CORS الطلب المعقّد على النحو التالي:
- طلب يستخدم طرقًا أخرى غير GET أو POST أو HEAD
- طلب يتضمّن عناوين غير
AcceptأوAccept-LanguageأوContent-Language - طلب يتضمّن عنوان
Content-Typeغيرapplication/x-www-form-urlencodedأوmultipart/form-dataأوtext/plain
تنشئ المتصفّحات تلقائيًا أي طلبات مسبقة ضرورية وترسلها قبل رسالة الطلب الفعلية. طلب التحقّق المسبق هو طلب OPTIONS، مثل المثال التالي:
OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: DELETE
من جهة الخادم، يستجيب التطبيق الذي يتلقّى الطلب لطلب التحقّق المسبق من خلال تقديم معلومات حول الطرق التي يقبلها التطبيق من هذا المصدر:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS
يمكن أن تتضمّن استجابة الخادم أيضًا عنوان Access-Control-Max-Age لتحديد المدة بالثواني التي سيتم خلالها تخزين نتائج الطلب المسبق مؤقتًا. يتيح ذلك للعميل إرسال طلبات معقّدة متعدّدة بدون الحاجة إلى تكرار طلب التحقّق المسبق.