Saturday, May 17, 2014

CORS and JSONP

1. Cross domain Request:

Definition:
In computing, the same-origin policy is an important concept in the web application security model.
The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites.

The same-origin policy also applies to XMLHttpRequest and to WebSocket.
The algorithm used to calculate the "origin" of a URI is specified in RFC 6454.
Two resources are considered to be of the same origin if and only if all {protocol, host, port} values are exactly the same

Example:
Access resources of http://b.com will not be permitted from http://a.com due to same origin policy.
Methods to perform cross domain requests:

a. Cross-Origin Resource Sharing
b. JSONP

2. JSONP:

Definition:

JSONP or "JSON with padding" is a communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain, something prohibited by typical web browsers because of the same-origin policy.

In the JSONP usage pattern, the URL request pointed to by the <script>'s src attribute returns JSON data, with a function call wrapped around it. In this way, a function that's already defined in the JavaScript environment can manipulate the JSON data.
A JSONP payload might look like this:
functionCall({"Name": "Foo", "Id": 1234, "Rank": 7});

The function call is the "P" of JSONP—the "padding" around the pure JSON, or according to some[1] the "prefix". By convention, the browser provides the name of the callback function as a named query parameter value, typically using the name jsonp or callback as the named query parameter field name, in its request to the server, e.g.,

<script type="application/javascript"
        src="http://server2.example.com/Users/1234?jsonp=parseResponse">
</script>
In this example, the received payload would be:
parseResponse({"Name": "Foo", "Id": 1234, "Rank": 7});

3. CORS:

Definition:
Cross-origin resource sharing (CORS) is a mechanism that allows many resources for example images, data etc.  on a web page to be requested from another domain outside of the domain the resource originated from As per same origin security policy, cross domain request are not allowed. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request.

How CORS Works:
The CORS standard works by adding new HTTP headers which allow servers to serve resources to permitted origin domains.
Browsers support these headers and respect the restrictions they establish.
Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP
OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method

4. Difference between CORS and JSONP:

JSONP: JSON-P works in every browser, it is a hack to get around the browser's same-origin policy, and it has some limitations.
For example, it can only issue a GET request, and the caller doesn't have access to the response headers. Since it is custom to browsers and JavaScript, JSON-P is not really appropriate for accessing data from other languages, like server-side Python.

CORS:
CORS is a standardized mechanism for making cross-domain requests. It is supported in most modern browsers. The client uses the standard XmlHttpRequest object to make a CORS request. Upon receiving the request, the server decides whether the cross-domain request is allowed.
If it is allowed, the server issues special headers that allows the response to be passed on to the client.

Conclusions:
CORS and JSONP are the methods to access cross domain data. We should choose one of them based on the browser compatibility and type of requests.


No comments:

Post a Comment