So I've done quite a bit of reading on stackoverflow and found a lot of question about how to do cross domain calls with either ajax post or jsonp. I know how to do that in both ways but let's do a reality check:
AJAX Post, if I use phonegap to compile the package, cross domain call is automatically availability . Or iframe wrapper etc can be used to hack around the security constraint.
use JSONP format, it's HTTP GET but I get cross domain capability for free as that's what JSONP is for. The data to be posted will be passed as a parameter value instead of being a payload as in an HTTP POST request.
Now my question is that is there a best practice/preferred way among the two? Pros and Cons?
Personally I don't see a practical difference between two. i.e. in a non-encrypted request, both POST or GET expose everything in clear text anyway, so they are just same piece of text arranged in different formats. My main concerns are around extension to make the connection secure and spam proof but there could be other stuffs that I probably should be mindful about as well - educate me please! E.g. easeness to add HTTPS over SSL or if I want to restrict who can send request to my server. I'm new to web technology (i.e. defined standards, protocols, frameworks) but am reasonably experienced on general development/computer science topics.
Related
Maybe I'm just not understanding this right, but this doesn't seem to make sense to me.
I have an MVC4 project exposing an ASP.NET WebApi. It works great making calls to the API within that project, but obviously making calls to it from another running project (on another port) requires cross-site scripting.
But here's my question: Doesn't this defeat the purpose of an API? If I want to make calls to the reddit API from my site, the fact that this is considered cross-site scripting makes it not only a bad security practice, but in some cases impossible.
If XSS is required to do this, doesn't that make AJAX pretty useless as a whole?
Simple answer: Of course not!! Pretty much the whole of the modern web is built on AJAX, if it was so pointless it would never have gone from a MS proprietary API to being the backbone of web 2.0 and all that has come since.
Complex answer: Firstly, XSS is a form of attack/vulnerability, not a form of request. What you're referring to is the same-origin policy, which limits AJAX requests to the same domain, for security reasons.
JSONP is typically used to make async requests to third party APIs. Your own API will typically sit on the same domain as your website so you will not have problems. If your API must be on another domain, you can either look at CORS or setup of a transparent reverse proxy to forward your requests to another server.
Hopefully this all makes sense, it'll at least give you a good foundation of knowledge to build from.
Traditionally, most apps have had both a server and a client component. The server component would do all the heavy lifting, including making requests to other APIs. Since the API request is done server-side, the request could go to any remote API server. There was never any thought given to accessing APIs from the client, since people expected the server to do it.
In recent years, we've seen more and more functionality pushed from the server onto the client, specifically through JavaScript. But making remote requests is one of the things that couldn't move to the client, due to browser's same-origin policy. So its not that the purpose of the API is defeated, its that we are now using APIs in ways we didn't conceive of before.
It would be irresponsible for browsers to suddenly ignore the same-origin policy. This would break the thousands of sites out there who depend on same-origin policies for security. So instead, the W3C has proposed the Cross-Origin Resource Sharing (CORS) spec. The CORS spec allows requests to be made across domains, but does so securely by letting the the server have the final say in who can access the API. This makes cross-domain requests possible, without breaking existing APIs.
I'm debugging some tricky Ajax code without a server side, in fact I have no domain etc to even put any server-side code on.
I would like to find some very minimal Ajax JSON(P) testing or debugging webservice or web API that just sends something back. Something like a ping or noop or ack.
I would prefer something small, fast, and reliable, preferably provided by major Internet companies such as Google, Microsoft, or Yahoo.
Ideally it would support these features, though none are totally essential:
Support JSONP.
Parametrically return success or various kinds of failure.
Parametrically delay a specified time before responding.
Parametrically support or reject CORS requests.
Parametric control over HTTP headers.
Parametrically describe the object returned.
In fact the most basic form of such a service from a major provider would also be useful for determining that Internet access is available, at least to a degree beyond navigator.onLine.
jsFiddle actually supports some of the features I'm looking for with their “Echo Javascript file and XHR requests”.
To improve user experience “echo” features has been created. This allows to test XHR requests, add javascript files, create workers - all from one fiddle, so it is more transparent for the user reading the code. XHR requests are split to HTML, JSON, JSONP and XML. Gist and github responses are similar to the echo feature and go nicely in pair with storing fiddles in gist and github.
They're not really intended for use outside jsFiddle though. Some limitations:
HTTP POST must be used for everything except JSONP and JavaScript.
CORS is not supported.
Of the desired features I listed, it supports at least:
specifying a delay
describing an object to return
I have recently been experimenting with building a cross domain web api, and wow has it been a bumpy journey. I have not had any problems with modern browsers such as Chrome, FF and Safari. The problem is with IE, which requires you to use XDR as opposed $.ajax when making cross domain calls. First Question: If I was using Backbone.js, what is the recommended way of making cross browser and cross domain ajax calls?
Another problem I had with IE was that when you make cross domain ajax requests, IE has a bunch of restrictions and limitations such as "Only text/plain is supported for the request's Content-Type header" - a link. Therefore in my case, I was unable to bind to my model using the MVC C# framework, unless I bind it manually.
Anyway my second and last question is: How do companies like Instagram, Facebook, and Twitter go about building their API's? I am not looking for a complete guide, but just want to know how difficult it is.
JSONP
The current standard is using JSONP. It is basically a trick to send a JSON payload wrapped in a single JavaScript function, the browser treats it like a script file and executes it.
CORS
Moving forward the way to go is CORS. Sadly browser support (IE) isn't there yet and there are still some implementation differences between the modern browsers that do implement it.
HTTP Method Overloading
Some APIs overload GET and POST request using X-HTTP-Method-Override: PUT or ?_method=PUT.
easyXDM
A number of API providers implement easyXDM. This tends to be used more when they provide a JavaScript API or widget API where developers load their JS and integrate it directly in to the frontend code.
I've created a RESTful API that supports GET/POST/PUT/DELETE requests. Now I want my API to have a Javascript client library, and I thought to use JSONP to bypass the cross-domain policy. That works, but of course only for GET requests.
So I started thinking how to implement such a thing and at the same time trying to make it painless to use.
I thought to edit my API implementation and check every HTTP request. If it's a JSONP requests (it has a "callback" parameter in the querystring) I force every API method to be executed by a GET request, even if it should be called by other methods like POST or DELETE.
This is not a RESTful approach to the problem, but it works. What do you think?
Maybe another solution could be to dynamically generate an IFrame to send non-GET requests. Any tips?
There's some relevant points on a pretty similar question here...
JSONP Implications with true REST
The cross-domain restrictions are there for a reason ;-)
Jsonp allows you to expose a limited, safe, read-only view of the API to cross domain access - if you subvert that then you're potentially opening up a huge security hole - malicious websites can make destructive calls to your API simply by including an image with an href pointing to the right part of the API
Having your webapp expose certain functionality accessed through iframes, where all the ajax occurs within the context of your webapp's domain is definitely the safer choice. Even then you still need to take CSRF into consideration. (Take a look at Django's latest security announcement on the Django blog for a prime example - as of a release this week all javascript calls to a Django webapp must be CSRF validated by default)
The Iframe hack is not working anymore on recent browsers, do not use it anymore (source : http://jquery-howto.blogspot.de/2013/09/jquery-cross-domain-ajax-request.html)
So, I implemented an API provider to be accessed by both web application and mobile applications.
Most likely this will not be a large scale project, but I want to maximize my learning experience and geek out where I can.
Anyway, from what I understand, it seems like it's better to put the API provider service and the actual website on separate domains to make scaling easier.
For example, twitter has the website twitter.com and api.twitter.com.
One immediate issue would be dealing with the cross-domain issue with AJAX.
From what I gather, there are 2 ways to implement cross-domain AJAX
JSONP: I heard about it, but don't know much beyond the name
Proxy Server: so, my website is build on top of ASP.NET MVC and I was thinking about creating a APIProxy controller to handle all cross-domain API requests.
That way, I would make an AJAX call via $.ajax(settings) and then pass in the website URL that corresponds to the APIProxy controller. The APIProxy controller would then make the appropriate POST server calls and process the JSON responses and return the response back to AJAX callback functions.
I heard about flXHR about I don't want to use Flash because devices like the iPad or any a lot of mobile browsers don't support Flash.
Anyway, I just wanted to ask what are some of the best practices in managing a website with the API provider on a separate domain or subdomain.
When you request some JSON, it returns an object or array. Script tags are not subject to the same-domain rule. So instead making an AJAX call, you would essentially do this:
<script src="Http://api.example.com?param1=something&etc"></script>
That would load the JSON, and it would execute as JavaScript.
...But a simple object or array "executing" by itself isn't very useful. So when you request the JSON, you also include the name of a callback function. If the provider sees that a callback was provided, instead of just returning JSON, it actually returns JavaScript: the JSON is passed to your function as an argument.
Then, when the script loads, your function (which you already defined) is called, and given the JSON to work with.
That's JSONP.
Bibliography
Newton, Aaron. "Request.JSONP." Clientcide. 7 Dec. 2009. Web. 28 Jan. 2011.