JSONP: ما هو، لماذا تم إنشاؤه، ولماذا حل محله CORS

JSONP: السلاح السري لمطوري الواجهات الأمامية في الماضي

تخيل أنك مطور ويب في عام 2010. تحتاج إلى الحصول على بيانات من خادم آخر، مثل توقعات الطقس أو أسعار العملات. تكتب طلب fetch بسيطًا، ولكن في وحدة تحكم المتصفح يظهر خطأ أحمر: «لا يوجد رأس 'Access-Control-Allow-Origin'». هل يبدو ذلك مألوفًا؟

هذه هي سياسة Same-Origin (سياسة المصدر نفسه) التي تمنع JavaScript الخاص بك من تجاوز النطاق الأصلي. ولكن كيف كانت تعمل أدوات الطقس، وأزرار «مشاركة»، وعدادات الزوار؟ الإجابة بسيطة: كانت تستخدم JSONP — وهي خدعة ذكية سنتحدث عنها اليوم.

في هذه المقالة، سنجيب على السؤال الشائع من Stack Overflow: «ما هو JSONP، ولماذا تم إنشاؤه؟» — بلغة بسيطة، مع أمثلة كود وبدون نظرية زائدة.

1. المشكلة: لماذا يحظر المتصفح الطلبات؟

المتصفح مصاب بجنون الارتياب. إنه يحمي المستخدم من هجمات XSS وسرقة البيانات. سياسة Same-Origin تسمح لـ JavaScript بقراءة الردود فقط من نفس النطاق والبروتوكول والمنفذ.

مثال على الحظر:

// هذا الكود سيسبب خطأ CORS\nfetch('https://api.distant-server.com/data')\n  .then(response => response.json())\n  .then(data => console.log(data));

ولكن هناك استثناء واحد: علامات <script>. المتصفح يقوم بتحميل البرامج النصية من أي نطاق بهدوء! هذه هي الثغرة التي يستخدمها JSONP.

2. الحل: JSONP — JSON مع Padding

JSONP (JSON with Padding) ليس تقنية ولا تنسيق بيانات، بل هو نمط (حل مؤقت) يتجاوز سياسة Same-Origin من خلال علامة <script>.

الفكرة بسيطة: بدلاً من إجراء طلب عبر XMLHttpRequest، نقوم بإنشاء عنصر <script> ديناميكيًا، ونحدد عنوان URL للخادم، ويعيد الخادم ليس JSON، بل كود JavaScript يستدعي دالتنا مع البيانات.

كيف يبدو JSON العادي:

// رد الخادم (JSON عادي)\n{"name": "PythonLib", "topic": "JSONP"}

كيف يبدو JSONP:

// رد الخادم (JSONP)\nmyCallback({"name": "PythonLib", "topic": "JSONP"});

الفرق هائل: في الحالة الثانية، يقوم الخادم بتغليف البيانات في استدعاء الدالة myCallback. هذا هو padding (الغلاف) المذكور.

3. التطبيق العملي: كتابة طلب JSONP بنفسك

لنقم بتنفيذ عميل JSONP باستخدام JavaScript الخالص. سيساعدنا هذا على فهم السحر.

function jsonp(url, callbackName) {\n  // 1. إنشاء دالة عامة (استدعاء)\n  window[callbackName] = function(data) {\n    console.log('تم استلام البيانات:', data);\n    delete window[callbackName]; // التنظيف بعدنا\n    document.body.removeChild(script);\n  };\n\n  // 2. إنشاء علامة script\n  const script = document.createElement('script');\n  script.src = `${url}?callback=${callbackName}`; // تمرير اسم الاستدعاء\n  script.onerror = function() {\n    console.error('خطأ في تحميل JSONP');\n    delete window[callbackName];\n    document.body.removeChild(script);\n  };\n\n  // 3. الإضافة إلى DOM — المتصفح يقوم فورًا بتحميل وتنفيذ البرنامج النصي\n  document.body.appendChild(script);\n}\n\n// الاستخدام:\njsonp('https://api.example.com/data', 'handleData');

كيف يعمل هذا خطوة بخطوة:

\n
• نقوم بإنشاء دالة عامة handleData.
\n
• نضيف علامة <script> مع عنوان URL للخادم. في عنوان URL، نمرر المعامل ?callback=handleData.
\n
• الخادم الذي يدعم JSONP يرى المعامل callback ويعيد ليس JSON، بل JavaScript: handleData({...}).
\n
• المتصفح ينفذ هذا البرنامج النصي، ويتم استدعاء دالتنا، ونحصل على البيانات.
\n

4. لماذا JSONP شرير؟ (العيوب)

إذا فكرت: «رائع، سأستخدمه في كل مكان» — توقف. JSONP له عيوب خطيرة:

\n
• الأمان: أنت تثق بشكل أعمى في أي خادم. إذا تم اختراق الخادم، يمكنه تنفيذ أي كود في موقعك.
\n
• لا يوجد معالجة للأخطاء: لا يمكنك معرفة ما إذا كان الطلب قد فشل (باستثناء المهلة الزمنية).
\n
• GET فقط: JSONP يعمل فقط مع طلبات GET. لا يمكنك إرسال POST أو PUT أو DELETE.
\n
• تلوث النطاق العام: يجب إنشاء دوال عامة، مما يزيد من خطر التعارضات.
\n

5. الخلاصة: CORS — البديل الحديث

اليوم، لا أحد يستخدم JSONP في المشاريع الجديدة. تم استبداله بـ CORS (Cross-Origin Resource Sharing) — وهو معيار رسمي للوصول إلى الموارد عبر النطاقات.

بدلاً من الحيل باستخدام العلامات <script>، يقوم الخادم بإرجاع رأس Access-Control-Allow-Origin، ويقوم المتصفح بالتحقق منه. هذا أكثر أمانًا ومرونة.

مثال على CORS (من جانب الخادم):

// رأس HTTP من الخادم\nAccess-Control-Allow-Origin: https://my-site.com

إذا كنت لا تزال بحاجة إلى دعم المتصفحات القديمة (Internet Explorer 8-9)، فقد يكون JSONP مفيدًا. ولكن في عام 2024، من الأفضل استخدام CORS أو وكيل الخادم.

الاستنتاجات الرئيسية:

\n
• JSONP هو حل مؤقت لتجاوز سياسة Same-Origin باستخدام علامة <script>.
\n
• يعمل فقط مع طلبات GET ويتطلب ثقة في الخادم.
\n
• تم استبدال JSONP بـ CORS — وهو معيار أكثر أمانًا وحداثة.
\n
• إذا كنت مطورًا مبتدئًا، ادرس CORS بدلاً من JSONP.
\n

نأمل أن تكون هذه المقالة قد ساعدتك في فهم JSONP. اترك أسئلتك في التعليقات!