كيفية استخدام حشوة JSON (وخيارات أخرى) لتجاوز نفس سياسة الأصل

في هذه المقالة ، سننظر في ماهية JSONP وعيوبه وبعض البدائل لـ JSONP.

ربما تكون قد واجهت مواقف تجري فيها مكالمة API من أصل إلى آخر. على سبيل المثال ، لدينا صفحة يتم عرضها من المضيف المحلي: 3000 تستدعي واجهة برمجة التطبيقات من المضيف المحلي: 8000.

ملاحظة : سوف نشير إلى المضيف المحلي: 3000 كخادم العميل لدينا. سوف نشير إلى localhost: 8000 كخادم API الخاص بنا.

لكننا نرى هذا الخطأ المخيف.

هذه هي سياسة المنشأ نفسه التي تحمينا. تقيد هذه السياسة كيفية تفاعل الموارد من أحد المصادر مع موارد من أصل آخر. إنها آلية أمان مهمة في المتصفح. ولكن هناك حالات نريد فيها تقديم طلبات عبر الأصل إلى موارد موثوقة.

يوفر JSONP (JSON with Padding) حلاً لحل مشكلة سياسة نفس الأصل. لنلقِ نظرة على كيفية ظهور JSONP.

الغوص الفني

يمكننا تشغيل كود JavaScript داخل ملف HTML الخاص بنا باستخدام pt> tags.

We can move our JavaScript code into a separate JavaScript file and reference it with our script tag. Our webpage now makes an external network call for the JavaScript file. But functionally, everything works the same.

The Javascript file doesn’t have to have a js extension. The browser will interpret content as JavaScript if the Response’s Content-Type is JavaScript. (text/javascript, application/javascript).

Most servers allow you to set the content type. In Express, you would do:

Your pt> tag can reference a URL that doesn’t h ave a js extension.

Script tags are not limited by the Same-Origin Policy. There are other tags, such as mg> ; and <video> tags, that are not limited by the Same-Origin Policy. So our JavaScript can live on a different origin.

The code inside the JavaScript file has access to everything that is in scope. You can use functions defined earlier in your HTML file.

You can pass arguments as you would for a normal function call.

In the above example, we passed a hard-coded string. But we could also pass in data coming from a database. Our API server can construct the JavaScript file with this dynamic information.

This is what JSONP is. Instead of using fetch or XMLHttpRequest to make an API call to retrieve data, we used a pt> tag. Because we u sed a <script> tag, we were able to bypass the Same-Origin Policy.

As I mentioned above, JSONP means JSON with Padding. What does the padding mean? Normal API responses return JSON. In JSONP responses, we return the JSON response surrounded (or padded) with a JavaScript function.

Most servers allow you to specify the name of your padding function.

The server takes your padding function name as a query. It invokes your padding function with the JSON data as an argument.

You are not limited to passing function names as your callback. You can pass inline JavaScript in your query.

I have not thought of a reason to do this.

Alternatives to using JSONP

There is no official spec for JSONP. I think of JSONP as more of a hack.

pt> tags can only make GET requests. So JSONP can only make GET requests.

Cross-Origin Resource Sharing has an official specification, and is the preferred way of getting around the Same-Origin Policy.

You can enable Cross-Origin Resource Sharing by adding a header to our Response.

This means all origins can use this resource without fear of the Same-Origin Policy.

Sometimes, you don’t have control over the server-code though. You would not be able to include the Access-Control-Allow-Origin header. An alternate solution is to make your own proxy server make the cross-origin request for you. The Same-Origin policy only applies to the browser. Servers are free to make cross-origin requests.

Questions? Comments? Please leave a message below.

Resources

  • Same Origin Policy
  • Github Repository with JSONP and CORS examples
  • Detailed explanation of JSONP