Monsur Hossain - CORS in Action: Creating and consuming cross-origin APIs

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact

Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 761 Shelter Island, NY 11964 Email: orders@manning.com

2015 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.

Recognizing the importance of preserving what has been written, it is Mannings policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine.

Manning Publications Co.20 Baldwin RoadPO Box 761Shelter Island, NY 11964

Development editors: Cynthia Kane, Monique BosTechnical development editor Deepak VohraCopyeditor: Jodie AllenProofreader: Elizabeth MartinTechnical proofreader: Konstantin YakushevTypesetter: Dennis DalinnikCover designer: Marija Tudor

ISBN: 9781617291821

Printed in the United States of America

1 2 3 4 5 6 7 8 9 10 EBM 19 18 17 16 15 14

For Haroun and Annisa

No one can argue that AJAX was an important advancement in the evolution of the web. In a few short years, a single technology (XMLHttpRequest) revolutionized how users interacted with our content. Instead of loading entire pages, portions of the page could refresh with minimal distraction to the user. In a time when broadband wasnt the norm, this change was amazingly powerful.

The web grew up during that time. The birth of AJAX catalyzed the transformation of web pages into web apps, but it also paved the way for modern client-side development. Todays JavaScript frameworks, which launched single page apps (SPAs), were a result of this early paradigm shift. But as more code moved off the server and into the client, it was clear XMLHttpRequest wasnt keeping up. JavaScripts single-origin policy suffocated our creative potential. Web developers like you and I developed clever techniques (JSONP and proxy servers) to wiggle around the restrictions, but ultimately, all our cleverness was just a bandage. Gone were the days of the mashup. Web services were becoming a ubiquitous back end for web applications. True dependencies in our applications are critical to making web services tick. However, for services to be accessible from JavaScript meant a better tool was needed for dealing with remote resources. Enter cross-origin resource sharing, better known as CORs.

CORs is a powerful addition in the evolution of XMLHttpRequest and the advancement of web apps. By definition, CORs creates a standard way for JavaScript to securely communicate with cross-domain resources. Practically speaking, it opens up a whole new world for front-end developers. CORs brings back flexibility to JavaScript developers and allows them to access APIs and services from anywhere on web. For example, organizations can publish read/write JSON APIs or make their entire data sets accessible to the world of JavaScript.

Monsur Hossain is fellow Googler and expert in cross-domain JavaScript communication. He and I first crossed paths working on Googles XML-based Data APIs and later as engineers on Googles JavaScript client library. Over the years, Monsur lead many facets of the client library, including its OAuth authentication flow and adding CORS support for APIs like YouTube and Google Drive.

CORs in Action is a well-rounded resource for developers wanting to learn the entire spectrum of CORs. Monsur does an excellent job of covering the basics. He highlights important sections with figures and provides excellent code snippets to teach by example.

I particularly like how often Monsur references the browser DevTools. Its a critical tool for gaining insight into the browsers network stack. His use of real-world APIs like Google Calendar and Flickr also give readers practical hands-on experience. I have no doubt youll walk away learning a great deal from CORs in Action.

E RIC B IDELMAN S TAFF D EVELOPER R ELATIONS E NGINEER G OOGLE

I first encountered cross-origin requests around 2006, when I joined Google and became the owner of the GData JavaScript Client. The GData JavaScript Client was a library that gave developers access to various Google APIs from JavaScript. The library itself was written in JavaScript, and the code was pretty straightforward...except for this little corner of code that made cross-origin requests to Googles servers. This was before CORS existed, so this little corner jumped though crazy hoops to load data from Googles APIs. From the developers perspective, the code simply worked. But between the request and the response was a dark and convoluted maze of code that was difficult to understand and debug.

So you can imagine my happiness when I discovered CORS. Here was a clean, simple, and standard way for making cross-origin requests. Instead of code thats difficult to understand, I could have simple HTTP response headers. Instead of code thats difficult to debug, I could have a single standard that worked across all browsers. I quickly set out to add support for CORS to Googles APIs.

And thats when the real fun started. While CORS uses HTTP headers to enable cross-origin requests, there are many subtle ways in which these headers can interact. Its not as simple as adding an HTTP header to your server and calling it a day. And because CORS was such a new feature, there werent a lot of resources to guide me. Armed with the CORS spec, Wireshark, and a lot of patience, I spent the next few weeks building a flexible and configurable CORS library that could work for various types of requests. Based on that experience, I started contributing CORS knowledge to the community by participating in Stack Overflow and writing an article about CORS for HTML5Rocks.com.

That was almost three years ago, and in the years since, CORS has grown from a specification to a feature supported by most major APIs. You can find CORS support in APIs from Amazon, Dropbox, Facebook, Flickr, Google, and GitHub (to name just a few). This book distills those three years of experience into an easy and illuminating resource for learning CORS. My hope is that this book helps make CORS a little less daunting, and encourages you to add CORS support to your own systems. Open access to information is a cornerstone of the web, and CORS is one of the ways to enable this. The more developers become comfortable with CORS, the more it will become a part of the everyday vocabulary of the web.