CORS in Action
Creating and consuming cross-origin APIs
Monsur Hossain
Foreword By Eric Bidelman
  • October 2014
  • ISBN 9781617291821
  • 240 pages
  • printed in black & white

A well-rounded resource for developers wanting to learn the entire spectrum of CORS.

From the Foreword by Eric Bidelman, Google

CORS in Action introduces Cross-Origin Resource Sharing (CORS) from both the server and the client perspective. It starts with the basics: how to make CORS requests and how to implement CORS on the server. It then explores key details such as performance, debugging, and security. API authors will learn how CORS opens their APIs to a wider range of users. JavaScript developers will find valuable techniques for building rich web apps that can take advantage of APIs hosted anywhere. The techniques described in this book are especially applicable to mobile environments, where browsers are guaranteed to support CORS.

Table of Contents detailed table of contents

foreword

preface

acknowledgments

about this book

author online

about the author

about the cover illustration

Part 1 Introducing CORS

1. The Core of CORS

1.1. What is CORS?

1.2. CORS by example

1.2.1. Setting up the request

1.2.2. Sending the request

1.2.3. Processing the response

1.3. Benefits of CORS

1.3.1. Wider audience

1.3.2. Servers stay in charge

1.3.3. Flexibility

1.3.4. Easy for developers

1.3.5. Reduced maintenance overhead

1.4. Summary

2. Making CORS requests

2.1. What is a cross-origin request?

2.2. Browser support for CORS

2.3. Using the XMLHttpRequest object

2.3.1. Sending an HTTP request

2.3.2. Handling the HTTP response

2.3.3. Including cookies on cross-origin requests

2.4. XDomainRequest object in Internet Explorer 8 and 9

2.4.1. Differences between XDomainRequest and XMLHttpRequest

2.5. Canvas and cross-origin images

2.6. CORS requests from jQuery

2.7. Summary

Part 2 CORS on the server

3. Handling CORS requests

3.1. Setting up the sample code

3.1.1. Setting up the sample API

3.1.2. Setting up the sample client

3.1.3. Running the sample app

3.2. Making a CORS request

3.3. Anatomy of a CORS request

3.3.1. The players in a CORS request

3.3.2. Lifecycle of a CORS request

3.4. Making a request with the Origin header

3.4.1. Viewing the Origin header

3.4.2. What is an origin?

3.4.3. Setting the Origin header

3.5. Responding to a CORS request

3.5.1. The Access-Control-Allow-Origin header

3.5.2. Access-Control-Allow-Origin with a wildcard (*) value

3.5.3. Access-Control-Allow-Origin with an origin value

3.5.4. Rejecting CORS requests

3.6. Summary

4. Handling preflight requests

4.1. What is a preflight request?

4.1.1. Lifecycle of a preflight request

4.1.2. Why does the preflight request exist?

4.2. Triggering a preflight request

4.2.1. When is a preflight request sent?

4.3. Identifying a preflight request

4.3.1. Origin header

4.3.2. HTTP OPTIONS method

4.3.3. Access-Control-Request-Method header

4.3.4. Putting it all together

4.4. Responding to a preflight request

4.4.1. Supporting HTTP methods with Access-Control-Allow-Methods

4.4.2. Supporting request headers with Access-Control-Allow-Headers

4.4.3. Sending the actual request

4.4.4. Rejecting a preflight request

4.5. Recapping preflights

4.6. Preflight result cache

4.7. Summary

5. Cookies and response headers

5.1. Supporting cookies in CORS requests

5.1.1. Setting cookies with a login page

5.1.3. Including cookies in CORS requests

5.1.4. How withCredentials and Access-Control-Allow-Credentials interact

5.2. Exposing response headers to the client

5.2.1. Reading a response header

5.2.2. Adding response header support

5.3. Summary

6. Best practices

6.1. Refactoring the sample code

6.2. Before you begin

6.3. Setting the Access-Control-Allow-Origin header

6.3.1. Allowing cross-origin access for everyone

6.3.2. Limiting CORS requests to a set of origins

6.3.3. CORS and proxy servers

6.3.4. Null origin

6.3.5. Origin header on same-origin requests

6.4. Security

6.4.1. Including cookies on requests

6.4.2. Authorizing requests using OAuth2

6.5. Handling preflight requests

6.5.1. Whitelisting request methods and headers

6.6. Reducing preflight requests

6.6.1. Maximizing the preflight cache

6.6.2. Changing your site to reduce preflight requests

6.7. Exposing response headers

6.8. CORS and redirects

6.9. Summary

Part 3 Debugging CORS requests

7. Debugging CORS requests

7.1. Solving CORS errors

7.2. Using the browser’s developer tools

7.2.1. Using the console

7.2.2. Using the Network tab

7.3. Monitoring network traffic

7.3.1. Using Wireshark

7.3.2. Using Fiddler

7.4. Using curl to simulate CORS requests

7.4.1. Making CORS requests using curl

7.4.2. Making preflight requests using curl

7.4.3. Why use curl?

7.5. Sending requests using test-cors.org

7.5.1. Sending requests to a remote server

7.5.2. Sending requests to the local server

7.5.3. Understanding how the client works

7.6. Tips for mobile debugging

7.6.1. Log requests on the server

7.6.2. Use test-cors.org

7.6.3. Use remote debugging tools

7.6.4. Use a mobile simulator

7.7. Getting help

7.8. Summary

Appendixes

Appendix A: A CORS reference

A.1. HTTP headers

A.2. Other terms used in CORS

Appendix B: Configuring your environment

B.1. Setting up for the sample application

B.1.1. Node.js and NPM

B.1.2. Express

B.2. Debugging tools

B.2.1. Wireshark

B.2.2. Fiddler

B.2.3. Curl

B.3. Resources

Appendix C: What is CSRF?

C.1. What is CSRF?

C.2. Implementing CSRF protection for same-origin requests

Appendix D: Other cross-origin techniques

D.1. JSONP

D.2. Flash

D.3. postMessage and easyXDM

D.4. Server-side request

index

About the Technology

Suppose you need to share some JSON data with another application or service. If everything is hosted on one domain, it's a snap. But if the data is on another domain, the browser's "same-origin" policy stops you cold. CORS is a new web standard that enables safe cross-domain access without complex server-side code. Mastering CORS makes it possible for web and mobile applications to share data simply and securely.

About the book

CORS in Action introduces CORS from both the server and the client perspective. It starts with making and enabling CORS requests and then explores performance, debugging, and security. You'll learn to build apps that can take advantage of APIs hosted anywhere and how to write APIs that expand your products to a wider range of users.

What's inside

  • CORS from the ground up
  • Serving and consuming cross-domain data
  • Best practices for building CORS APIs
  • When to use CORS alternatives like JSON-P and proxies

About the reader

For web developers comfortable with JavaScript. No experience with CORS is assumed.

About the author

Monsur Hossain is an engineer at Google who has worked on API-related projects such as the Google JavaScript Client, the APIs Discovery Service, and CORS support for Google APIs.


Buy
  • combo $49.99 pBook + eBook
  • eBook $39.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks

All you need to know about CORS in one well-explained book.

Roger Keizer, HUSS B.V

The right balance of application and theory.

Roger Le, Coder Vox

Stop getting cross-eyed from cross-domain problems.

Christopher Haupt, Mobirobo, Inc.