Hacking the Tonal - Proxying, Intercepting + Debugging Traffic?

Boss and Scott

CSD.

Welcome to Syntax.

In this episode, episode number 668, we're gonna be talking about CS intercepting, and debugging traffic.

And this could be any traffic on your network, really, is what it comes down to.

I'm a developer from Denver. With me, as always, is Wes Bos. Wes, what's going on, my man?

I am excited to talk this because you came to me with a really cool story. I'm not going to spoil it because we'll go over it in just a second. But I, too, have Try to intercept traffic that comes from hardware, software applications, desktop apps, being able to intercept requests and peer into what data is being sent.

So what we're going to do today is go through why you might want to do it both as a developer as well as like a hacker.

Like a hacker. Not like a nefarious hacker, but someone who likes to poke at the Curious mind. Yeah. Curious mind. Exactly. Gray areas, as well as like different applications you can use to sort of peer into it. Because if you've ever had like a piece of software or hardware and you do you hear people, oh, they're sending your traffic to x, y, and z. You literally can check, and we'll go through That and how to do that today. Yeah.

And, speaking of debugging, this podcast is brought to you by [email protected].

Use the coupon code tasty treat.

Sign up today, and you'll get the 2 months for free.

So, yeah, let's talk all about all of this stuff. Do you want me to start with my story, or do you want to start with the web proxies CSS thing. No. Start start with your story because I think that will lay ground groundwork for what this actually is.

Okay. Can do. So, I have this workout device. It's a it's called the Tonal.

It's it's kind of like a Peloton meets a weight rack, and it is really great. It turns weight on, off, and on automatically and uses magnets. It can do up to it. 200 pounds or so, but it it's more than 200 pounds with weights. It's, like, straight linear, and it it's, it's really intense, the amount of weight it can feel So what you lift on tonal feels like more than what you lift on something else. Right? But either way, it's a really cool device, and one of the features they have is custom workouts. You can make your own custom workouts.

And, unfortunately, that's kind of where it ends.

They have left out a lot of abilities here.

So the Tonal community has been asking for a more of like a social custom workout UI for a long time, and I thought to myself, you know what? I have a I have links to custom workouts.

It. What can I possibly do to build something like this? And I was just going to initially have, you know, a repository where people paste links, maybe a description. You can vote on it it. And then have a big table. But then I got into the idea of, wait, how exactly does their API work? Specifically because there's no web UI for it. You can't log in to their services via the web. So it's not like I could spy on the request via the web. It. So I wanted to spy on traffic on this device or on my phone because there is a phone app and Really get an understanding of what information I could glean out of their non, well, non, I guess you would say nonpublic API, but it's an API that doesn't have the ability to create public keys. Right? I mean, I guess CS. All APIs are are public if you're able to hit them from a URL. Right? So what I did is I started diving into this this world of of proxying requests. I knew Wes had done quite a bit of stuff here, but I I chose to basically grab an app called Charles. We'll talk about some others.

It.

I started watching all of the requests that took place across all of my network by proxying them through this app.

So Because of that, just the the nature of the fact that my iPhone was on the same network, I'm proxying all requests on the network through this app. I'm able to then, with some minor details omitted here, able to see the actual request going in and out, eventually us. Figure out what types of information are actually being requested when you open their app, and I can see almost instantly it. The entire API for this app, and I know that as long as I have an API key or a a authorization key, which you can get from logging in, it's an OAuth website or no. No. It's a non auth it's an auth zero website. Is is that it? Auth, the the service.

Oh, yeah. Yeah.

OAuth is the tech, and auth o is or auth 0 is the vendor CS or this type of thing.

That's one thing I always like, my brain just looks at that auth zero and auth o auth and just, like, combines the 2 every time. Either way. Once I was able to essentially log in and grab a key from a curl, I was then able to then attach that key to any of my requests and mimic the API as if I was the actual app asking for whatever.

And now instead of just being able to paste in a a workout URL, and that's it. If a user pastes in the workout URL, it's able to get every bit of information about what that workout is, all of the different the exercises, all of the different information. And so now what I can actually build is an interface that connects to their real service it. To click go and have it just bring in all the correct information.

So, yeah, extremely practical use case, it. But something that I couldn't have solved any other way because there's no web interface. There's no way for me to interact with this this API via the web. Awesome.

So a couple more examples I have here is if there's a website, this stuff is sometimes Not needed. There are a couple use cases, and we'll talk about that because you could just open up dev tools and and peek into it. Dev tools are amazing, The network tab specifically for being able to peer into requests that are being sent and be able to copy the request out. Like in the past, I've taken my Investment website. So we have some investments with with a thing and we can log in at any time and see, like, what the makeup is of them. But like, I'm curious about like, what are the investments allocation over time? So I wrote a little scraper that would just Log in with my username and password, get a token, and then make a request to download a CSV that has all the information of the current time every day or so. And in that way, I'm able to look back at, like, years worth of data and see kind of what happened over the year rather than just seeing 1 at a time, which is really cool. Another thing I was interested in was GitHub copilot. Like, we've we had the GitHub copilot folks on, and we said, like, like, what are you sending To that's always the big question is, like, what are these apps sending from your computer to the mother ship and what information is being sent over. And I was really curious about that. So I fired up one of these applications, And I was actually not able to see what they were sending because of the type of request that was being sent.

But we will dive into that in just So anytime you have an app, especially like like Electron apps, if you can't open the dev tools to an Electron application, but you still wanna be able All right.

Like what trackers are they putting in here? You know, you would be able to install one of these proxies and see all the traffic going through. So let's Go into the different types of traffic that we have here. The most common type of traffic is HTTP traffic or HTTPS.

So HTTP traffic without the s on the end is you have a request. It sends it to some sort of URL, And then that URL will send traffic back. And usually with that request, you get something called headers or you always you get something called headers. And Usually either in the request body.

Like, the request body is going to be something like, alright, I'm hitting forward slash workouts And I'm sending user ID 123, and maybe I'm sending some other pieces of data. And somewhere in there, there's going to be some sort of Session ID or a bearer token is usually pretty common.

JWT token is pretty popular to send along, And that data is either sent over as a header or it's sent over in the request body.

And that's Generally, the little piece of data that you need to be able to send more requests if you wanna be able to programmatically send those CS. Right? Yeah. And if you don't have those things,

typically, what you're getting back is, like, a four zero one, right, in an unauthorized error. Exactly.

And so that's HTTP.

And man, this is probably like 12 years ago.

Before Everybody had SSL on their websites.

There was this website. There's this Firefox extension called Black Sheep. And basically, the way it worked is you could fire it up. You could go to a coffee shop and it would sniff All traffic that was being sent over the same WiFi network because every request that you have is being sent over the network.

And you were able to literally that stuff was not encrypted at all. So you're literally able to say, oh, somebody is sending a request to facebook.com, and they are sending over a bunch of data, comment, like, whatever. But With that, they're also sending some sort of token that authenticates you. So you're able to literally just copy paste that token. This black sheep Chrome extension allegedly allowed you to click the button and you could just put the token right into your browser's cookies. And you were logged in allegedly as another person. So that's awful.

That's why they say you don't use whatever.

So with the advent of HTTPS, the secure, the request from your browser or from from the sending thing that's making the request. No JS, your browser, whatever.

And the thing that is accepting it, It's encrypted, so nobody that is on the network can tell what is being sent. You can tell where it's being sent By a domain name so that you can still see that someone's going to facebook.com. So if you think your employer doesn't know what websites you're going to, They do know which websites they're going to, but they don't know the URLs and the specifics of what you're doing on there. And that will encrypt it, meaning that the sender and the receiver have some sort of token, and they're able to encrypt it and decrypt it on either end so that nobody can Sort of jump in between man in the middle or, what's the politically correct monster in the middle? That's what we call it now. Oh, I was gonna say I didn't know that. Was gonna say, what what about man in the middle isn't politically I I get it now. Because it's, yeah, because it's a man. Yes. Yeah. So If you literally do want to have a monster in the middle, then that's where you get one of these proxies, and you have to install an SSL certificate on the device that is proxying the traffic and it allows you to because you've intentionally Install the SSL certificate on your machine. You're able to then route all the traffic, decrypt it, and then send it along its way in the middle. And that allows you to sort of peer into these web requests, which helps with the debugging and seeing what data is being sent, and you're able to even block and transform data that is being sent and received.

I and so when when you implement, like, a proxy like this, I I've had I had an issue yesterday where I turned on my proxy, and then suddenly some web traffic wasn't working at all on my computer.

It. Does it typically like, when you have a a a proxy turned on like this, does it now see your CS Host machine as being an entirely different host or client, so to say. Here's a here's a sit I I it. Turned on the proxy, and then all of a sudden logins I had, services that I was logged into already stopped working.

Oh, yeah. Yeah. So I would have to reauthorize. Is that is that the case? No. No. The the reason why that was happening was because Like, was that before or after you installed the SSL cert? Because if you turn on the proxy without the cert installed, then the browser is going to say, hey.

Like, that's that's why sometimes you go to a website and Chrome throws up that big red screen. It says something's fishy. Something's going on here.

And usually you say, like, their SSL certificate's broken, but there's a possibility that literally somebody is jumping in the middle and trying to intercept that traffic.

And it's broken.

Was that happening before or after you installed

The proxy cert. It was happening before I installed the cert. I figured I would just need to reauth. So I I it was like a a quick little thing. I was trying to intercept just straight up node traffic on my own server. Node server. No. It's because

you are you're literally tainting the supply chain. And without the certificate, you are stepping in between, and and the the SSL is going to say, hey. I can't decrypt this thing that's being sent to me. Right? Therefore, I cannot re encrypt it and send it down the the way. I dip my grubby little fingers into the request.

TCP, is we have TCP and UDP. So TCP is traffic that goes back and forth. You can Watch a networking video. We're not experts on this type of thing. But generally, as a web developer, you need to understand that some traffic goes over TCP, which is like WebSockets are mostly sent over TCP. Much of video streaming is sent over TCP.

And then you have UDP, which is just one way traffic, meaning like with TCP, you send a request and you get signed back.

With UDP, you often will sorry, you always will send a request and you just hope it gets there. I'd tell you a joke about UDP, but you probably wouldn't get it.

Because with with UDP, you just send it, and You hope it gets there? You're just set. Yeah. Yeah. There's no guarantee. There's no there's no way to tell if it got there. There's no send and re receive. Yeah. Exactly. Like, when I did my drone, I did some drone videos on you on YouTube.

When you send, like, turn left, turn right, go up, go down, You just send those via UDPSocket and there's no chance. Sorry, you can't tell if it got it or not because you simply just send it. And then if you want to get a response, you have to literally send it over TCP.

So let's talk about why you might be interested CS in running a proxy in between. So most commonly as a web developer is you want to be able to peer into different APIs, There are different parameters. What is being sent? You might want to look into cookies, auth, and tokens. And, Like, nefarious things aside, sometimes you have web applications and you need to be able to maybe you don't have access to the whole supply chain and you want to be able to dip in there.

That is a very handy thing. That Application, Charles, that you said

used to be very popular 10 years ago in the web development community, and it's not as popular anymore. You could tell that it used to be because of the, aesthetic Their website, the app, the logo, yeah, all of that stuff. Very web 2 point o. So you can tell exactly what era it's from. Yeah. Exactly. And

I think the reason why it's not as popular anymore is because like the browser dev tools are so good now that you don't have to

Every browser has amazing network dev tools, so you don't have to debug any of that weird stuff. Yep. And another thing is is just straight up, you might be Wanting to know how these things work. I mean, it's it's nice to know how how these things work, how professional tools and services work, other APIs, how people are actually it. Interacting with their things and you know? I mean, also, you can't there are no browser dev tools on an iPhone for iPhone apps or Android apps. You can't just you can't just pop open the network tab and see what's going on. Yeah. And it's it's an unfortunate, like, battle because

iPhone apps are often quickly reverse engineered because people want to figure out how they work. So another good example is WyzeCams.

If you want to integrate WyzeCams with Home Assistant, you have to use some sort of third party API.

And when the garage door opener came out, I said, hey, like, I want The version opener powered Home Assistant.

So the devs behind the third party Wyze integration.

All right, So they immediately they get an Android phone. They load the app on it. They set up a proxy in between, and then they press the button that says Open Garage Door, you know, And then they look at the data that is being sent and they say, okay, how can we replicate what data is being sent? How is it being sent? To what URL is it being sent? Is it being encrypted? What URL? What is the API keys that are sent along? And a lot of times people are able to sort of Reverse engineer those APIs. Unfortunately, that's also how spammers work is if you think, like, spammers are Like on an application, TikTok, Instagram, or whatever, almost always they are using they're figuring out how to replicate What is happening on the iPhone and sending that data through the wire. So sometimes it is really hard to reverse this stuff. We'll talk about a couple gotchas in just a second. Anyways, one really cool thing is hijacking requests and pausing Requests. So what you can do is if a request comes in, you can literally pause it, dip in, Edit the traffic, and then either send that data to the server or you can When a response is coming back, you could dip in and change something.

Let's say Your tonal had like an avatar and you wanted to change the avatar. You could literally just replace the URL of the JPEG that is your avatar CS and and change it up or like anything that is server side protected, you're not gonna be able to do anything like nefarious. But if it was entirely client side Limiting. So, like, if you were logging into a service where you wanted access to, like, a full catalog, we only paid for a little bit. Sometimes it's just client side validated, so you you'd be able to just say, like, is pro true, you know, And then you could switch it up. Often it's just UI changes, but sometimes it is gives you full access to all the data.

You could do an offline tonal. Like that's One thing I'm I'm scared about all these tonal Peloton, all these things. It's like, what happens when they go under? About that as well. Right? Somebody Mhmm. We'll figure out, okay, what data is being sent and received by Peloton, and then you could replicate the entire server. Obviously, that's incredibly complex, but this happens a lot.

It happens with, with We. So if you want to use the Internet connected We, games, they're they no longer have servers where you can play with your friends. So somebody Put a proxy in there, figured out what all the API endpoints are for this type of thing, and then they made their own server, which sort of replicates all of the functionality, and then you're able to use it. You just kind of confuse the application and say, no longer go to this URL. Go to this URL or you literally intercept traffic to a specific URL that is broken

And then just immediately send back your own data so it thinks that it has successfully got back from it. Yeah. And and ultimately, you you do you have to think about This way, like, what does the system know? It all it knows is that it's sending a request out, and it's getting information back.

Right? It's a really it it's not intelligent. It can't be like, oh, I understand that there's there unless it's checking somehow for CS interruptions or proxies or whatever, which we'll we'll talk a little bit about, you know, some of that signing issues that you could have there. But

As long as it's getting back the information it's expecting when it's asking for it, it it it's not always smart enough to be able to know the difference. Exactly. And, like, Private API is also a a really nice one is if you want to pull some data into your website. Like, I had I had my Twitter and my Instagram being pulled in via private APIs.

And both of them broke because they're private APIs, and they don't want you doing that. In fact, I almost got locked out of my Instagram For doing it because I was reverse engineering it and they put it they I logged in one day and it says, looks like you are Doing X, Y and Z good because Instagram knows that bots are trying to do this proxying and they somehow detected it Because the SSL cert tips, they use something called SSL pinning, meaning that if the SSL cert is not exactly what they're expecting, then they're like, You can't do that. So there is some stuff like this won't work on Twitter or Instagram because it is such a common spammer technique that they I've taken even further

further steps to get into it. I do have concerns that my total account will be locked Because they're, like, noticing weird traffic from my key.

Just a little concerned there. Yeah. I I I would be a little concerned, but I would think that most Especially if it's like not there's no financial incentive for something like that. And

For a lot of this, I don't know if they're There's a financial incentive for them to keep my account because I'm paying for it.

And that's actually a whole thing too is that I it. Tried to create a dummy account for it, but they do do some sort of authorization check with a free account. The API returns a four zero one for those specific requests. It doesn't return a four zero one for every request, But it does when I'm asking about the custom workout bit. So now I'm feeling like, oh, am I bypassing their pay

service by doing this, and that's going to get me booted. But, yeah, that's fine. You sign up again. And, like, we know I I know someone that works at Tonal.

So, like, that's the nice thing about being a web dev is there's always a there's always a a dude on the you know? Somebody will. There's always someone that can help you out. I'm sorry, man. I was just trying to Just trying to have some fun here.

I don't wanna lose my my 100 week streak I got going on that thing, Wes. I have a 100 week streak that is That's amazing, actually. Really impressive for me.

Let's go into some of the different applications, you can do this. So Scott already talked about Charles. Charles is a really good one. They have tools that will allow you to install the proxy cert.

You can install it both on your computer, so you can just proxy it on your computer, but you can also install 1 on your phone Like as like a I forgot what it's called. You have to go into like the corporate blah blah blah to be able to get into it, and that will allow you to Visit URLs on your phone

and the request will start popping up on the desktop application, which is wild. It was easy. Yeah, It it was easy to do that. In fact, I found a YouTube video that walked you through it. But, basically, you're just in the network settings, the iPhone or any of your other phones, Android phones. You're just Giving it, your computer's IP address for a proxy and then a port in which that's the Charles port.

And then you install the cert and everything works fine. And this is probably the one that

you should try if you wanna dig into this. It's An app called Proxyman. So Proxyman.

Io.

And this one is amazing because it detects The application that is sending the data.

I don't think Charles does that. And a lot of the more low level ones don't detect what app is sending it. So you turn this thing on and just immediately you're flooded with requests because Yeah. Because your computer is constantly pinging things and, like, I just turned it on, and I have 40 things. Like, Adobe is is checking for updates.

Riverside is sending data. TweetDeck is sending a poll for new data Segment. It's amazing how my trackers are in this thing, though, man. It's unbelievable.

Outrageous. Yeah.

It'll make you feel a little uneasy with all the traffic going in and out of your computer all of the time. No kidding. So definitely check out Proximan.

They do HTTP, HTTPS with the SSL certificate, WebSockets.

But then they also have a lot of like tools for formatting JSON and Sending GraphQL requests. Like like a lot of those, like like, handy features are are really nice and missing from a lot of these apps.

And the proxy man is the free version is extremely powerful.

High highly recommend. Yeah. And the interface is nicer than than Charles. Definitely.

Another one is called HTTP Toolkit.

Very similar to Proxy Man. This one looks very, very good, but it will also allow you to open up like a fresh Chrome instance and explicitly They track the requests in that.

So certainly try that one out as well.

If you want to get a little bit the Downside to a lot of these is they don't do TCP traffic.

So when I was trying to figure out what data is GitHub Copilot sending, I wasn't able to see what that data was because I'm pretty sure that GitHub Copilot is sending it over TCP on, like, a constantly open socket rather than, like, Http requests or even streaming.

So, that was another thing. I was like, I I asked the proxy man dev if he would be able to look into streaming Because right now, the dev tools, if you stream something, like, let's say your server is sending you a word. Hi. My name is Wes. Every second, They send something. That's what a stream is, right? Right now, dev tools will only show you once that connection is closed and it will show you the data. What I would like is to be able to intercept that with like a text decoder stream and see the data as it's coming in.

So Dev Tools doesn't do that. I don't see any work to make that work, but I think as we get more into streaming, we're going to want more powerful tools to be able to visualize when streams start,

chunk and end. Yeah.

It does feel like we are heading into a world. I feel like it it's it seems like we talk about these things like this, like Like, streaming. Oh, we're gonna be doing more streaming. And then, like, a a year or 2 later, you know, one of the main services are like, streaming is a big thing now, and and you're just like, Okay. Yeah.

Yeah. Another one is MITM proxy, stands for monster in the middle.

This is What proxy man is built on top of. So it's like a CLI.

Yeah. It's like FFmpeg is like a lot of these tools are built on top of it. Everything is Built on FFmpeg. Yeah.

And so this is like a low level, but it also has like a web interface for it. So if you want to be able to either programmatically Like, you can code with this thing. So if you want to if you need some sort of package to proxy values, you could use this.

Or if you just want to do it on the CLI, it works really well. But the Proximan app sponsors MITM proxy, because, obviously, it's the engine, and then and then ProxyMan is the features and UI on top of that. Yeah. Another app that's been around forever is Little Snitch,

which this app, I it's been around forever. I remember using this thing Like Photoshop? When you were, like, 12? Yeah. Yeah. For for yeah. Exactly. I I didn't wanna say exactly what it was for. But reason being is that, You know, like we said, there's a a massive amount of requests coming in and out of your computer. And what little snitch does is it allows you to, before any of those requests Happen, approve or deny, or set up rules for approving or denying.

So the idea behind that was back in the day, And maybe even still now. I don't know.

Yeah. Photoshop would be like, hey. I'm just checking our, is that activation code good? And you could little snitch and say, no. Please don't ask Adobe if if this authorization code is is still good because I'm trying to use the software.

PS 2. Yeah. Yep. I remember all of that. Yeah. Cracking Photoshop was every, like, teenager's introduction to, Like network requests. Oh, man.

I still remember when I got my 1st job at my university job, my, I worked at the computer store, And I could buy Photoshop at that job for, like, $20 because it was, like, some crazy student license. I remember thinking, like, finally, I don't have to deal with it. Little snare journey of this stuff. The first time I, like, paid for Photoshop, I was like, I'm a grown up now. You know? Like I know. Yeah. Yeah.

Yep. Spent my paycheck and got the entire CS and After Effects and all that stuff. Now it's freaking, like, on a a subscription. I pay, like, $80 a month or something for it. It's crazy. Yeah. Every every hour, daddy Adobe comes with a baseball bat, right, to collect. Little little snitch has another. So Little Snitch is not really like a debugging tool, but it's more of it's more of like a security tool. It's the same idea, right? But it's more of a security tool where If something tries to request some data, it's fantastic for blocking trackers. And then there's also a little snitch mini now that It gives you just a map Really? Of where if you're just curious, like, what apps are sending data where, Little snitch mini mini will, show you that on it. It's it's pretty cool. Like, I don't I don't use it all the time. I would like little snitch mini,

which would send to a

key keyboard or something to get some audio out of here. And then the last 1 here is Telerik has an app called Fiddler, Which is, again, it's kind of the same idea for debugging.

So gotchas, You need to install the cert on your phone. We talked about that to intercept HTTP traffic.

Some apps use cert pinning.

Someone on Twitter, Hacksor, good follow on Twitter, so definitely would check it out. So he reverse engineered his Hyundai Hyundai? How do you say it? Hyundai? Hyundai. Hyundai?

Like that. I I'm gonna tell you right now.

South Koreans, please don't get upset at me. I watch, like, a a channel that does, you know, how the guy is always reviewing Hyundai cars, and he always pronounces it Hyundai. And so I would say that, but they had their whole commercial where it was like Hyundai, like Sunday it. Oh, yeah. For Americans to, like, try to get them to say it correctly. So it could just be Hyundai or it could be Hyundai. Tell me if I'm saying it incorrectly if you actually know because, I I just I just called my car the Ionic. So but, yeah, the somebody reverse engineered it, Hexor did, and, Man, I I have to wonder if this is how there's a a Home Assistant integration for my car if this is, Like, how the BlueLink Home Assistant integration came to be because I I use this on a a daily basis.

I I Yeah, I don't know if this was specifically it, but so he wrote up an entire blog post on how he reverse engineered it. And then he also has a Google Doc, Which is great on how to get around cert pinning, which is SSL pinning, which is how a lot of Apps will stop you from doing this interception, so now you can fight back. And that's a whole another level. I'm not necessarily gonna be getting into that. You have to learn Java and whatnot, but it's it's pretty interesting Yeah. Pretty interesting world. And, also, you you you definitely briefly mentioned the Installing a

cert. If that, like, feels scary to you, you know, if you've never done this, I'm gonna tell you right now, installing a cert on my phone For Charles was, like, going to a web address that Charles Charles app gave me. I clicked on the button. I clicked install, and then it installed. Like, it was, Yeah. 2 seconds. You click a couple tabs or whatever, and it walked you through it. So it it wasn't a scary thing. You weren't having to do a whole Some, you know, SSL certificates where you're you're copying and pasting the the perms and stuff like that. You're running, like, 18 commands into your yeah.

No, on Proximan, you just go to the certificate in the top right, like in the menu bar, and it just says install cert on iOS, Install it on Android. Install it on a Java VM. Love it. Install it on Firefox. Like you can you can install and it gives you like Screenshots and it steps you through, so not scary at all. Not scary. Yeah. All right. That is it. Hopefully, you learned a thing or two about proxying requests, Both helpful for debugging web applications as well as very interesting

to peer into how all this stuff works. Sick. Well, thank you so much for joining us. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player or drop a review if you like this show.