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

103
Stuck in the Middle with You Exploring the Connections Between Your App and the Web Justin Weiss @justinweiss

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

Stuck in the Middle with YouExploring the Connections Between Your

App and the WebJustin Weiss

@justinweiss

@justinweiss

justinweiss.com

Practicing Rails

@justinweiss

Our apps are more connected

@justinweiss

Phone + API backend

@justinweiss

@justinweiss

Callbacks

@justinweiss

@justinweiss

@justinweiss

This is fine...right?

@justinweiss

Nope.@justinweiss

Feedback? Errors?

@justinweiss

JSON::ParserError: 784: unexpected token at '<!DOCTYPE html>

@justinweiss

What are the options?

@justinweiss

Logging!

@justinweiss

Talk over.

@justinweiss

It gets

everywhere@justinweiss

It needs togo away

@justinweiss

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

needed to see

@justinweiss

Take a step back

@justinweiss

It's justdebugging

@justinweiss

What do you need to debug effectively?

@justinweiss

What is actually true?

@justinweiss

You need

Visibility

@justinweiss

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

What else?

@justinweiss

How do you separate?

@justinweiss

You need

Isolation

@justinweiss

Visibilityand

Isolation

@justinweiss

Visibility:Requests and Responses

@justinweiss

Isolation:Use parts independently

@justinweiss

What's the dream?

@justinweiss

Monitoring of all requestswithout additional code

@justinweiss

Can fake out any partof the system I own

@justinweiss

Three things

→ Send requests→ Monitor requests and responses

→ Receive requests

@justinweiss

That's what this is about

@justinweiss

Better debugging ->Incremental development

@justinweiss

@justinweiss

Sending Requests

@justinweiss

curl

@justinweiss

$ curl https://api.github.com/users/justinweiss

{ "login": "justinweiss", "id": 1020, "avatar_url": "https://avatars.githubusercontent...", ...}

@justinweiss

$ curl -d "{\"text\": \"hello, _world_\"}" \https://api.github.com/markdown

<p>hello, <em>world</em></p>

@justinweiss

It's everywhere!

@justinweiss

@justinweiss

Postman2

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

@justinweiss

Paw3

3 https://paw.cloud@justinweiss

Intercept everything!

@justinweiss

mitmproxy

@justinweiss

What does mitmproxy4 do?

4 https://mitmproxy.org@justinweiss

brew install mitmproxypip install mitmproxy

@justinweiss

@justinweiss

What about SSL?

@justinweiss

@justinweiss

@justinweiss

/etc/hosts on mobile

@justinweiss

@justinweiss

Don't forget to disconnect!

@justinweiss

(Except for the three times it happened while creating this talk)

@justinweiss

Alternatives?

@justinweiss

Fiddler5

Charles Proxy6

6 https://www.charlesproxy.com

5 http://www.telerik.com/fiddler

@justinweiss

Where are we now?

→ Send requests

@justinweiss

Where are we now?

→ Send requests→ Watch requests & responses

@justinweiss

Wait for feedback

@justinweiss

Bidirectional communication

@justinweiss

Don't call us, we'll call you

@justinweiss

Don't call us, we'll call you

@justinweiss

requestb.in

@justinweiss

@justinweiss

webmock.io

@justinweiss

@justinweiss

webmock.io

@justinweiss

What about local development?

@justinweiss

ngrok7

7 https://ngrok.com@justinweiss

@justinweiss

Where are we now?

→ Send requests→ Monitor requests and responses

→ Receive requests

@justinweiss

What's next?@justinweiss

Example:

OAuth2@justinweiss

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

@justinweiss

→ client id→ client secret→ redirect uri

@justinweiss

@justinweiss

@justinweiss

@justinweiss

Example: Making an authenticated request to

GitHub

@justinweiss

@justinweiss

@justinweiss

@justinweiss

@justinweiss

@justinweiss

It's complicated

@justinweiss

It's complicated

@justinweiss

It's complicated

@justinweiss

Visibility@justinweiss

Isolation@justinweiss

Visibilityand

Isolation

@justinweiss

→ Send requests: curl, Postman, Paw

@justinweiss

→ Send requests: curl, Postman, Paw→ Monitor: mitmproxy, Fiddler, Charles Proxy

@justinweiss

→ Send requests: curl, Postman, Paw→ Monitor: mitmproxy, Fiddler, Charles Proxy

→ Receive requests: requestb.in, webmock.io, ngrok

@justinweiss

→ Send requests: curl, Postman, Paw→ Monitor: mitmproxy, Fiddler, Charles Proxy

→ Receive requests: requestb.in, webmock.io, ngrok

@justinweiss

Justin WeissAvvo

[email protected]

twitter: @justinweiss

@justinweiss

Questions?@justinweiss

Justin WeissAvvo

[email protected]

twitter: @justinweiss

@justinweiss