Welcome back to the 5apps Dev Blog! We haven’t been updating it in a while, due to being extremely busy developing the upcoming app store(s), and improving the deployment platform as well as our infrastructure. So, let’s dive right in.

Today’s update is about your app resources now being available to other client-side apps in the browser via a protocol called CORS.

What’s CORS?

Let me just quote the Wikipedia article here, because they offer a nice short introduction to it:

Cross-origin resource sharing (CORS) is a web browser technology specification that defines ways for a web server to allow its resources to be accessed by a web page from a different domain. Such access would otherwise be forbidden by the same origin policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request.

So in the browser – as opposed to connections from other servers or out-of-browser clients such as CLIs – you cannot simply access resources hosted on another domain. However, by using CORS-specific HTTP headers, server operators can decide to allow cross-domain requests, which in turn will make your browser allow them, too.

If you’re interested in all the technical details, there’s a comprehensive MDN page on the subject.

Why would I want that for my app?

Although accessing resources on other domains from JavaScript sounds like (and actually is) something you’d want to do from your own app, why would you want others to access your app resources from somewhere else?

The answer lies in how some developers are using 5apps: not only as an app platform, but also to deploy static websites and even data resources to be used as a lightweight API.

A good example is one of our open-source users (blog post coming up about open-source being for free forever on 5apps, by the way): you may have heard of them lately, as their project rightfully made the rounds around most of the Web news channels. ToS;DR (Terms of Service; Didn’t Read) is a project, which is collaboratively summing up, classifying, and comparing the ToS of Web services for you, so you don’t have to read all the fine print to get an idea of your rights and obligations.

Now, not only is ToS;DR’s website hosted on 5apps, but they use JSON resources to both collaborate on the data via GitHub as well as showing it on their page using AJAX requests. However, because of that architecture, at the same time those JSON resources make for a great light-weight, read-only API, that other applications are able to use. Which brings us back to CORS, because you might want to access those resources from a client-side web app in your browser.

With this recent update you can now use e.g. the following jQuery snippet to access ToS;DR service definitions in JavaScript from any other domain (if your browser supports CORS):

var url = "http://tos-dr.info/services/facebook.json";

$.getJSON(url).done(function(data) {
    console.log(JSON.stringify(data));
});

(Hint: just open your console on any site using jQuery to try this out.)

We hope this might be useful to some of you for using 5apps in creative ways you probably didn’t even think about. And generally speaking, all public resources on the Web should be delivered with these headers in place anyway.

Coming up…

Stay tuned for a little surprise regarding the usage of APIs that don’t support CORS from your client-side app, coming up later this week! And as always, if you have any questions or feedback, either leave a comment below, give us a shout on Twitter, or send us a plain old email.