Designing JavaScript APIs

Jonathan LeBlanc (@jcleblanc)
Global Head of Developer
Evangelism at PayPal
API? SDK?
Automation?
What JavaScript Can Feel Like
JavaScript Challenges
The Same-Origin Policy
Keeping Private Keys Private
Not Providing a Hacked Experience
How Did We Used to Do It?
Server-side Proxies
Flash / iFrame Proxies
Private Token Storage
Securing Resources
A Modern Approach

OAuth 2
Tight Access Control

CORS
Easy Access Control
OAuth 2 User Agent Flow
Redirect the User to Log In
Prepare the Redirect URI
Authorization Endpoint
client_id response_type (token)
scope
redirect...
User Agent Flow: Redirect

var auth_uri = auth_endpoint +
"?response_type=token" +
"&client_id=" + client_id +
"&scope=pro...
Extract the Access Token
Fetch the Hash Mod
access_token
refresh_token
expires_in

Extract Access Token
User Agent Flow: Hash Mod

Extract the Access Token from the Hash
http://site.com/callback#access_token=rBEGu1FQr5
4AzqE3Q...
Get Privileged API Resources
Set Request Headers + URI
Resource Endpoint
Header: token type + access token
Header: accept ...
User Agent Flow: Get Resources
Making an Authorized Request
$.ajax({
url: resource_uri,
beforeSend: function (xhr) {
xhr.s...
CORS Easy Access Control
Cross Origin Issues and Options
Access to other domains / subdomains is
restricted (same origin policy)
JSONP to request r...
Can you use it?

http://caniuse.com/cors
Support: 79.42%
Partial support: 8.84%
Total: 88.26%
How Does it Work?
Site sends Origin header to server
OPTIONS /v1/oauth2/token HTTP/1.1
Origin: http://jcleblanc.com
Access...
How Does it Work?
Server responds with matching
Access-Control-Allow-Origin header

Access-Control-Allow-Origin: http://jc...
A Lil’ Bit O’ Automation
Uniform Interface Sub-Constraints
Resource Identification
Resources must be manipulated via
representations
Self descripti...
Uniform Interface Sub-Constraints
Resource Identification
Resources must be manipulated via
representations
Self descripti...
HATEOAS
How we Normally Consume APIs
Using HATEOAS to Automate
How HATEOAS Works
You make an API request
curl -v -X GET
https://api.sandbox.paypal.com/v1/payments/authoriz
ation/2DC8761...
"links": [
{
"href":"https://api.sandbox.paypal.com/v1/payments/
authorization/6H149011U8307001M",
"rel":"self",
"method":...
How do we Make it Work with JS?

Open Path Library
(what to do next)

Hierarchy of Requests
Object Chaining
The System Should be Stateless
Send complete object to only make 1 request
{ "id": "PAY-17S8410768582940NKEE66EQ",
"create...
Resources and Representations
Manipulate a concept (e.g. payment) with
the intended state
Chaining Actions
The first request builds the action object
Subsequent calls manipulate the object
var paymentObj =
getPre...
In Summation
Security needs to allow you to work the
browser security model
Always assume statelessness
Build to allow you...
Thanks! Questions?
http://slideshare.com/jcleblanc

Jonathan LeBlanc (@jcleblanc)
Global Head of Developer
Evangelism at P...
Upcoming SlideShare
Loading in...5
×

Designing JavaScript APIs

1,417

Published on

API creation within JavaScript introduces a whole new array of security and request issues that traditional APIs never encounter. In this session we’ll explore several principles behind JavaScript API design and architecture, including OAuth 2 in the JavaScript model, Cross-Origin Resource Sharing for browser security constraints, building action automation with HATEOAS, and
challenges behind secure resource consumption through JavaScript

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,417
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Keeping private keys private
  • JSONP can cause XSS issues where the external site is compromised, CORS allows websites to manually parse responses to ensure security
  • Behind the server scene, the server looks up the application in their records to verify that the application matches what is on file against the application location making the request
  • Hypermedia as the engine of application state
  • How do you improve this structure to make it useable for automation?
  • Resources must be manipulated via representations. This goes back to the stateless principles
  • REST principle of using objects applied to chaining multiple objects together
  • Designing JavaScript APIs

    1. 1. Designing JavaScript APIs Jonathan LeBlanc (@jcleblanc) Global Head of Developer Evangelism at PayPal
    2. 2. API? SDK?
    3. 3. Automation?
    4. 4. What JavaScript Can Feel Like
    5. 5. JavaScript Challenges
    6. 6. The Same-Origin Policy
    7. 7. Keeping Private Keys Private
    8. 8. Not Providing a Hacked Experience
    9. 9. How Did We Used to Do It?
    10. 10. Server-side Proxies
    11. 11. Flash / iFrame Proxies
    12. 12. Private Token Storage
    13. 13. Securing Resources
    14. 14. A Modern Approach OAuth 2 Tight Access Control CORS Easy Access Control
    15. 15. OAuth 2 User Agent Flow
    16. 16. Redirect the User to Log In Prepare the Redirect URI Authorization Endpoint client_id response_type (token) scope redirect_uri Browser Redirect Redirect URI
    17. 17. User Agent Flow: Redirect var auth_uri = auth_endpoint + "?response_type=token" + "&client_id=" + client_id + "&scope=profile" + "&redirect_uri=" + window.location; $("#auth_btn").attr("href", auth_uri);
    18. 18. Extract the Access Token Fetch the Hash Mod access_token refresh_token expires_in Extract Access Token
    19. 19. User Agent Flow: Hash Mod Extract the Access Token from the Hash http://site.com/callback#access_token=rBEGu1FQr5 4AzqE3Q&refresh_token=rEBt51FZr54HayqE3V4a& expires_in=3600 var hash = document.location.hash; var match = hash.match(/access_token=(w+)/);
    20. 20. Get Privileged API Resources Set Request Headers + URI Resource Endpoint Header: token type + access token Header: accept data type HTTPS Request
    21. 21. User Agent Flow: Get Resources Making an Authorized Request $.ajax({ url: resource_uri, beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', 'OAuth ' + token); xhr.setRequestHeader('Accept', 'application/json'); }, success: function (response) { //use response object } });
    22. 22. CORS Easy Access Control
    23. 23. Cross Origin Issues and Options Access to other domains / subdomains is restricted (same origin policy) JSONP to request resources across domains Only supports HTTP GET requests Cross-origin resource sharing (CORS) Supports additional range of HTTP requests
    24. 24. Can you use it? http://caniuse.com/cors Support: 79.42% Partial support: 8.84% Total: 88.26%
    25. 25. How Does it Work? Site sends Origin header to server OPTIONS /v1/oauth2/token HTTP/1.1 Origin: http://jcleblanc.com Access-Control-Request-Method: PUT Host: api.sandbox.paypal.com Accept-Language: en-US Connection: keep-alive ...
    26. 26. How Does it Work? Server responds with matching Access-Control-Allow-Origin header Access-Control-Allow-Origin: http://jcleblanc.com Access-Control-Allow-Methods: GET, POST, PUT Content-Type: text/html; charset=utf-8
    27. 27. A Lil’ Bit O’ Automation
    28. 28. Uniform Interface Sub-Constraints Resource Identification Resources must be manipulated via representations Self descriptive messages Hypermedia as the engine of application state
    29. 29. Uniform Interface Sub-Constraints Resource Identification Resources must be manipulated via representations Self descriptive messages Hypermedia as the engine of application state
    30. 30. HATEOAS
    31. 31. How we Normally Consume APIs
    32. 32. Using HATEOAS to Automate
    33. 33. How HATEOAS Works You make an API request curl -v -X GET https://api.sandbox.paypal.com/v1/payments/authoriz ation/2DC87612EK520411B -H "Content-Type:application/json" -H "Authorization:Bearer ENxom5Fof1KqAffEsXtx1HTEK__KVdIsaCYF8C"
    34. 34. "links": [ { "href":"https://api.sandbox.paypal.com/v1/payments/ authorization/6H149011U8307001M", "rel":"self", "method":"GET" },{ "href":"https://api.sandbox.paypal.com/v1/payments/ authorization/6H149011U8307001M/capture", "rel":"capture", "method":"POST” },{ "href":"https://api.sandbox.paypal.com/v1/payments/ authorization/6H149011U8307001M/void", "rel":"void", "method":"POST” } ]
    35. 35. How do we Make it Work with JS? Open Path Library (what to do next) Hierarchy of Requests
    36. 36. Object Chaining
    37. 37. The System Should be Stateless Send complete object to only make 1 request { "id": "PAY-17S8410768582940NKEE66EQ", "create_time": "2013-01-31T04:12:02Z", "update_time": "2013-01-31T04:12:04Z", "state": "approved", "intent": "sale", "payer": {...}, "transactions": [{...}], "links": [{...}] }
    38. 38. Resources and Representations Manipulate a concept (e.g. payment) with the intended state
    39. 39. Chaining Actions The first request builds the action object Subsequent calls manipulate the object var paymentObj = getPreAuth(paymentID) .getNextAction() .processNext(); //build pay object //next HATEOAS link //process action
    40. 40. In Summation Security needs to allow you to work the browser security model Always assume statelessness Build to allow your developers to automate complexities
    41. 41. Thanks! Questions? http://slideshare.com/jcleblanc Jonathan LeBlanc (@jcleblanc) Global Head of Developer Evangelism at PayPal
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×