Pragmatic RESTful API principles, along with a solid consumption architecture, can allow for a great amount of automation in your program development. At the same time, securing the application can be extremely tricky from JavaScript. In this session we will explore several principles behind RESTful API design and consumption using JavaScript, many of the standards that were integrated in the redevelopment of the PayPal API architecture in the new RESTful APIs. We will cover many of these architecture standards, including: - Building in action automation using HATEOAS - OAuth 2 in the JavaScript model - The challenges behind secure resource consumption through JavaScript

1. Secure RESTful API
Automation With JavaScript
Jonathan LeBlanc (@jcleblanc)
Head of Developer Evangelism
PayPal North America

2. Automation?

3. What JavaScript Can Feel Like

4. JavaScript Challenges

5. The Same-Origin Policy

6. Keeping Private Keys Private

7. Not Providing a Hacked Experience

8. How Did We Used to Do It?

9. Server-side Proxies

10. Flash / iFrame Proxies

11. Private Token Storage

12. Securing Content Negotiation

13. A Modern Approach
OAuth 2
Tight Access Control
CORS
Easy Access Control

14. OAuth 2 User Agent Flow

15. User Agent Flow: Redirect
Prepare the Redirect URI
Authorization Endpoint
client_id response_type (token)
scope
redirect_uri
Browser Redirect
Redirect URI

16. User Agent Flow: Redirect
Building the redirect link
var auth_uri = auth_endpoint +
"?response_type=token" +
"&client_id=" + client_id +
"&scope=profile" +
"&redirect_uri=" + window.location;
$("#auth_btn").attr("href", auth_uri);

17. User Agent Flow: Hash Mod
Fetch the Hash Mod
access_token
refresh_token
expires_in
Extract Access Token

18. User Agent Flow: Hash Mod
Extracting 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+)/);

19. User Agent Flow: Get Resources
Set Request Headers + URI
Resource Endpoint
Header: token type + access token
Header: accept data type
HTTPS Request

20. 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
}
});

21. CORS Easy Access Control

22. 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

23. Can you use it?
http://caniuse.com/cors

24. 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
...

25. 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

26. A Lil’ Bit O’ Automation

27. Uniform Interface Sub-Constraints
Resource Identification
Resources must be manipulated via
representations
Self descriptive messages
Hypermedia as the engine of
application state

28. Uniform Interface Sub-Constraints
Resource Identification
Resources must be manipulated
via representations
Self descriptive messages
Hypermedia as the engine of
application state

29. HATEOAS

30. How we Normally Consume APIs

31. Using HATEOAS to Automate

32. 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"

33. "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"
}
]

34. Object Chaining

35. Interactions Should be Stateless
Send enough detail to not have to make another
request to the API
{ "id": "PAY-17S8410768582940NKEE66EQ",
"create_time": "2013-01-31T04:12:02Z",
"update_time": "2013-01-31T04:12:04Z",
"state": "approved",
"intent": "sale",
"payer": {...},
"transactions": [{...}],
"links": [{...}] }

36. Resources and Representations
Manipulate a concept (e.g. payment) with
the intended state

37. 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

38. In Summation…
Security needs to allow you to work the
browser security model
Always assume statelessness
Build to allow your developers to automate
complexities

39. Thanks! Questions?
http://www.slideshare.net/jcleblanc
Jonathan LeBlanc (@jcleblanc)
Head of Developer Evangelism
PayPal North America