Secure RESTful API Automation With JavaScript
Download as pptx, pdf10 likes6,141 views
The document outlines best practices for secure RESTful API automation using JavaScript, emphasizing the challenges posed by the same-origin policy and the importance of securing private keys. It discusses user agent flows for OAuth 2, methods for handling CORS, and automation strategies using HATEOAS to streamline API interactions through stateless resource manipulation. Ultimately, it highlights the necessity of building systems that facilitate developer automation while ensuring security compliance.
!["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"
}
]](https://image.slidesharecdn.com/2013octhtml5devconfrestjavascript-131018193611-phpapp02/85/Secure-RESTful-API-Automation-With-JavaScript-33-320.jpg)
![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": [{...}] }](https://image.slidesharecdn.com/2013octhtml5devconfrestjavascript-131018193611-phpapp02/85/Secure-RESTful-API-Automation-With-JavaScript-35-320.jpg)
Secure RESTful API Automation With 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
- 6. Keeping Private Keys Private
- 7. Not Providing a Hacked Experience
- 8. How Did We Used to Do It?
- 10. Flash / iFrame Proxies
- 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"
- 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
Editor's Notes
- #7: Keeping private keys private
- #23: JSONP can cause XSS issues where the external site is compromised, CORS allows websites to manually parse responses to ensure security
- #26: 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
- #30: Hypermedia as the engine of application state
- #35: Resources must be manipulated via representations. This goes back to the stateless principles
- #38: REST principle of using objects applied to chaining multiple objects together