Wednesday, August 18th, 2010

The Web as an API

Category: XmlHttpRequest

<p>Image Copyright CC-A by JSConf
(Photo CC-A by JSConf)

The ever prolific Michael Mahemoff has a nice blog post up about using Cross-Origin Resource Sharing to do cool cross site scraping, especially of microformats:

Cross-Origin Resource Sharing makes it possible to do arbitrary calls from a web page to any server, if the server consents. It’s a typical HTML5 play: We could do similar things before, but they were with hacks like JSONP. Cross-Origin Resource Sharing lets us can achieve more and do it cleanly.

Michael has a cool demo where he grabs an HCard embedded in a cross-domain response.

To turn on cross-origin resource sharing, Michael created a PHP script that adds the following to the HTTP response:

  1. < ?
  2. header("Access-Control-Allow-Origin: *");
  3. // the rest of my script
  4. ?>

If you do something similar yourself, though, remember to think through the implications of adding a similar HTTP header to your response:

Now any web page can pull down “http://mahemoff.com/” with a cross-domain XMLHttpRequest. This is fine for a public web page, but something you should be very careful about if the content is (a) not public; or (b) public but dependent on who’s viewing it, because XHR now has a “withCredentials” field that will cause cookies to be passed if it’s on. A malicious third-party script could create XHR, set withCredentials to true, and access your site with the user’s full credentials. Same situation as we’ve always had with JSONP, which should also only be used for public data, but now we can be more nuanced (e.g. you canallow trusted sites to do this kind of thing).

In the comments Malte Ubl also mentions something else to keep in mind for security when doing this:

You should probably mention that putting * in the CORS is extremely dangerous with respect to cross site request forgery attacks and should basically only be done on pages that return absolutely, purely public info. If e.g. Facebook would do this, all accounts would be hacked in a second.

With that in mind, Michael’s JavaScript for doing the cross-domain XHR request is adapted from work by Nicholas Zakas:

javascript
< view plain text >
  1. function get(url, onload) {
  2.   var xhr = new XMLHttpRequest();
  3.   if ("withCredentials" in xhr){
  4.     xhr.open("get", url, true);
  5.   } else if (typeof XDomainRequest != "undefined"){
  6.     xhr = new XDomainRequest();
  7.     xhr.open("get", url);
  8.   } else {
  9.     xhr = null;
  10.   }
  11.   if (xhr) {
  12.     xhr.onload = function() { onload(xhr); }
  13.     xhr.send();
  14.   }
  15.   return xhr;
  16. }

In Michael’s demo he returns HCard formatted as follows that he can then manipulate with JavaScript:

  1. <div id="card" class="vcard">
  2.   <div class="fn">Michael Mahemoff</div>
  3.   <img class="photo" src="http://mahemoff.com/speak2.jpg"/>
  4.   <div class="role">"I like to make the web better and sushi"</div>
  5.   <div class="adr">London, UK</div>
  6.   <div class="geo">
  7.     <abbr class="latitude" title="51.32">51°32'N</abbr>,     <abbr class="longitude" title="0"></abbr>
  8.   </div>  <div class="email">michael@mahemoff.com</div>
  9.   <div class="vcardlinks">    <a rel="me" class="url" href="http://mahemoff.com">homepage</a>
  10.     <a rel="me" class="url" href="http://twitter.com/mahmoff">twitter</a>    <a rel="me" class="url" href="http://plancast.com/mahemoff">plancast</a>
  11.   </div>
  12. </div>

Michael ends with an intriguing idea around using the web as an API:

There’s lots more fun to be had with the Web as an API. According to the microformats blog, 2 million web pages now have embedded hCards. Offer that content to the HTML5 mashers of the world and they will make beautiful things.

Related Content:

  • Using the RESTful API as an onramp to object storage
    RESTful APIs are essential in moving data on and off of object storage systems. Expert Marc Staimer describes the three options currently...
  • Application programming interface (APIs)
    SearchSOA.com has an abundance of information on API best practices and tutorials for enterprise architects and software developers working on SOA and...
  • Enterprise mashup patterns act as API enablers
    In his book, Michael Orginz discusses Alerter, Leading Indicator, API Enabler, Infinite Monkeys and Time Series patterns, among others. Together these...
  • API learning guide
    The expansion of Web services, mobile, cloud and SaaS platforms has altered the realm of APIs. This guide offers the latest in API...
  • Common data API options
    Developers new to the world of Web services tend to think only in HTTP terms. There are many ways to transport data produced by your service to your...

Posted by Brad Neuberg at 5:00 am
1 Comment

+++--
3.3 rating from 3 votes

1 Comment »

Comments feed TrackBack URI

This is only one solution for using cross-browser AJAX. And I’m not quite sure that this solution works on modern browsers.

Here is my research around JSONP technology. JSONP solutions research

Comment by Jen777 — August 17, 2011

Leave a comment

You must be logged in to post a comment.