Pro Yearly is on sale from $80 to $50! »

Stuck in the Middle with You: Exploring the Connections Between Your App and the Web

Ac54c2b179cd4c54305846de2cb22ba1?s=47 Justin Weiss
September 10, 2016

Stuck in the Middle with You: Exploring the Connections Between Your App and the Web

Our apps are becoming more complicated and more distributed. We’re extracting APIs and handling callbacks and pings from the services we depend on. We’re using our data and services from different clients, like rich JavaScript applications and mobile apps. And as we fling our logic into more places, it’s harder to see what’s actually going on between them. If you’re working in applications that have become a forest of APIs and services, or you’ve ever said, “I really wish I could just see what kind of data this server thinks I’m handing it, and what I’m getting back,” this talk is for you. With a few tools and some simple techniques, you’ll watch the data go from your apps to your APIs and see your responses, callbacks, and pings come back.

Ac54c2b179cd4c54305846de2cb22ba1?s=128

Justin Weiss

September 10, 2016
Tweet

Transcript

  1. Stuck in the Middle with You Exploring the Connections Between

    Your App and the Web Justin Weiss @justinweiss
  2. @justinweiss

  3. justinweiss.com Practicing Rails @justinweiss

  4. Our apps are more connected @justinweiss

  5. Phone + API backend @justinweiss

  6. @justinweiss

  7. Callbacks @justinweiss

  8. @justinweiss

  9. @justinweiss

  10. This is fine ...right? @justinweiss

  11. Nope. @justinweiss

  12. Feedback? Errors? @justinweiss

  13. JSON::ParserError: 784: unexpected token at '<!DOCTYPE html> @justinweiss

  14. What are the options? @justinweiss

  15. Logging! @justinweiss

  16. Talk over. @justinweiss

  17. It gets everywhere @justinweiss

  18. It needs to go away @justinweiss

  19. The one thing you didn't log is the thing you

    needed to see @justinweiss
  20. Take a step back @justinweiss

  21. It's just debugging @justinweiss

  22. What do you need to debug effectively? @justinweiss

  23. What is actually true? @justinweiss

  24. You need Visibility @justinweiss

  25. 1. That can't happen. 2. That doesn't happen on my

    machine. 3. That shouldn't happen. 4. Why does that happen? 5. Oh, I see. 6. How did that ever work? 1 1 http://web.archive.org/web/20051027173148/http://www.68k.org/~jrc/old-blog/ archives/000198.html @justinweiss
  26. What else? @justinweiss

  27. How do you separate? @justinweiss

  28. You need Isolation @justinweiss

  29. Visibility and Isolation @justinweiss

  30. Visibility: Requests and Responses @justinweiss

  31. Isolation: Use parts independently @justinweiss

  32. What's the dream? @justinweiss

  33. Monitoring of all requests without additional code @justinweiss

  34. Can fake out any part of the system I own

    @justinweiss
  35. Three things → Send requests → Monitor requests and responses

    → Receive requests @justinweiss
  36. That's what this is about @justinweiss

  37. Better debugging -> Incremental development @justinweiss

  38. @justinweiss

  39. Sending Requests @justinweiss

  40. curl @justinweiss

  41. $ curl https://api.github.com/users/justinweiss { "login": "justinweiss", "id": 1020, "avatar_url": "https://avatars.githubusercontent...",

    ... } @justinweiss
  42. $ curl -d "{\"text\": \"hello, _world_\"}" \ https://api.github.com/markdown <p>hello, <em>world</em></p>

    @justinweiss
  43. It's everywhere! @justinweiss

  44. @justinweiss

  45. Postman2 2 https://www.getpostman.com @justinweiss

  46. @justinweiss

  47. Paw3 3 https://paw.cloud @justinweiss

  48. Intercept everything! @justinweiss

  49. mitmproxy @justinweiss

  50. What does mitmproxy4 do? 4 https://mitmproxy.org @justinweiss

  51. brew install mitmproxy pip install mitmproxy @justinweiss

  52. @justinweiss

  53. What about SSL? @justinweiss

  54. @justinweiss

  55. @justinweiss

  56. /etc/hosts on mobile @justinweiss

  57. @justinweiss

  58. Don't forget to disconnect! @justinweiss

  59. (Except for the three times it happened while creating this

    talk) @justinweiss
  60. Alternatives? @justinweiss

  61. Fiddler5 Charles Proxy6 6 https://www.charlesproxy.com 5 http://www.telerik.com/fiddler @justinweiss

  62. Where are we now? → Send requests @justinweiss

  63. Where are we now? → Send requests → Watch requests

    & responses @justinweiss
  64. Wait for feedback @justinweiss

  65. Bidirectional communication @justinweiss

  66. Don't call us, we'll call you @justinweiss

  67. Don't call us, we'll call you @justinweiss

  68. requestb.in @justinweiss

  69. @justinweiss

  70. webmock.io @justinweiss

  71. @justinweiss

  72. webmock.io @justinweiss

  73. What about local development? @justinweiss

  74. ngrok7 7 https://ngrok.com @justinweiss

  75. @justinweiss

  76. Where are we now? → Send requests → Monitor requests

    and responses → Receive requests @justinweiss
  77. What's next? @justinweiss

  78. Example: OAuth2 @justinweiss

  79. What do we need? The client must be capable of

    interacting with the resource owner's user-agent (typically a web browser) and capable of receiving incoming requests (via redirection) from the authorization server. — OAuth2 RFC8 8 https://tools.ietf.org/html/rfc6749#section-4.1 @justinweiss
  80. @justinweiss

  81. → client id → client secret → redirect uri @justinweiss

  82. @justinweiss

  83. @justinweiss

  84. @justinweiss

  85. Example: Making an authenticated request to GitHub @justinweiss

  86. @justinweiss

  87. @justinweiss

  88. @justinweiss

  89. @justinweiss

  90. @justinweiss

  91. It's complicated @justinweiss

  92. It's complicated @justinweiss

  93. It's complicated @justinweiss

  94. Visibility @justinweiss

  95. Isolation @justinweiss

  96. Visibility and Isolation @justinweiss

  97. → Send requests: curl, Postman, Paw @justinweiss

  98. → Send requests: curl, Postman, Paw → Monitor: mitmproxy, Fiddler,

    Charles Proxy @justinweiss
  99. → Send requests: curl, Postman, Paw → Monitor: mitmproxy, Fiddler,

    Charles Proxy → Receive requests: requestb.in, webmock.io, ngrok @justinweiss
  100. → Send requests: curl, Postman, Paw → Monitor: mitmproxy, Fiddler,

    Charles Proxy → Receive requests: requestb.in, webmock.io, ngrok @justinweiss
  101. Justin Weiss Avvo justin@justinweiss.com twitter: @justinweiss @justinweiss

  102. Questions? @justinweiss

  103. Justin Weiss Avvo justin@justinweiss.com twitter: @justinweiss @justinweiss