CORS in Action

Monsur Hossain is a Software Engineer for Google, where he has worked on API-related projects such as the Google JavaScript Client, the APIs Discovery Service, and CORS-support for Google APIs. He maintains the site enable-cors.org.

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 wasn’t 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. Today’s 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 wasn’t keeping up. JavaScript’s 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 Google’s XML-based Data APIs and later as engineers on Google’s 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. It’s a critical tool for gaining insight into the browser’s network stack. His use of real-world APIs like Google Calendar and Flickr also give readers practical hands-on experience. I have no doubt you’ll walk away learning a great deal from CORs in Action. ERIC BIDELMAN STAFF DEVELOPER RELATIONS ENGINEER GOOGLE

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 Google’s servers. This was before CORS existed, so this little corner jumped though crazy hoops to load data from Google’s APIs. From the developer’s 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 that’s difficult to understand, I could have simple HTTP response headers. Instead of code that’s difficult to debug, I could have a single standard that worked across all browsers. I quickly set out to add support for CORS to Google’s APIs. And that’s 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. It’s 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 weren’t 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.