Leveling up Web Performance with HTTP/3

Hello, web. A digital frontier. I've tried to picture bundles of HTTP requests as they pass through the Internet. What do they look like? Fish? Other marine animals? I kept dreaming of some visualization I thought I would never see and then one day somebody made a tool called Firefox. Welcome to HTTP 3 Leveling up web performance with HTTP 3 Thank you for those who are joining me just after you just joined me. We had a double bill excellent scheduling there from the team I'm Lucas Pardue in case you've forgotten. I'm an engineer at Cloudflare working on the protocols So things related to TCP, TLS, WIC, HTTP 3, all that jazz And today I'm joined by my special guest Peter Wu Aka Lackenstein, you can correct me in a moment But his appointed name is Peter and he's part of the research team here at Cloudflare Who do lots of cool stuff. If you've ever seen stuff like the crypto blog Posts that we've had in the past. Clever things well beyond my mental capacity But beyond that in his other life Peter also works on Wireshark Where he's a core developer working on the TLS and WIC features. So last week we had Robin Marks, a guest as well, talking about ways of analyzing protocols and HTTP 2 and HTTP 3 So I wanted to give Peter an opportunity to come and talk about the the OG tool for doing that But many of us will be So enough from me. Let's go to Peter See what you've got to say Thanks for introducing me. Yeah, last week Robin Marks did a great presentation on QFS and QLOG That was really nice to see QFS and QLOG are special tools built for analyzing WIC So I guess it has some advantage on that front Given that it's dedicated and specially built for WIC and optimized for that Wireshark has been around for longer. It's a packet capture tool It's quite easy to use. You install it, capture packets and you can have a look at the stream of packets That's the very quick overview of it But in practice people will probably have no idea what they are doing They install Wireshark on the web and if they're like completely new to it People probably say like, ah, it's hard to use and so on So today I hope to like show a bit how you can use this tool efficiently To for example look at the QLS or quick traffic Awesome Before we get into the deep stuff. You're a little bit quiet then So if you talk up a bit that might just help but um, yeah Like I use Wireshark here and there and it's pretty cool But before we get into the technical stuff I always wondered, you know, you and I before I joined Cloudflare and before you joined us full-time You know, we interacted through the years. So, you know mainly about quick stuff so that like What how did you get into it? You know being a core maintainer is quite a big thing Not just a patcher in there and you can talk a bit about your background in that. Sure, definitely. So How I first got pulled into Wireshark It's actually started with the TLS Dissector. So what I really like about Wireshark is that you basically have If it's in the network if it's communication Communication and Wireshark will pick it up and will show it to you and it understands a lot of protocols So if you have DNS traffic, it will immediately show you okay This is DNS. If you have HTTP traffic, it will do that and also tell you there's a picture inside When I Like started I was just curious. I was interested in my VPN provider They provided a web VNC console. So I figured like well VNC Firefox probably doesn't understand that but Wireshark probably does So that's how I tried to like start up Wireshark Since it was using TLS. I had to try to decrypt it and try to understand it That didn't exactly work out I couldn't decrypt it for some reason after like digging for some error messages and so on I figured there was like a bug and a code needs tiny like a couple fixes and Then it would actually start decrypting. So that's how I got into Wireshark development in the first place and coincidentally the TLS sector as well But in that I made a patch and the community was very grateful very like nice and That's also where I got in touch with Alexis Lagut, another French Wireshark core developer He actually yeah, yes He was also like very active and TLS and Quake and so on. He's actually the guy who wrote The very first version of the Quake test sector. If you look at the source code, you will actually find his name on top of the file Yeah, yeah, that's a good opportunity to give a shout out to Alexis as well if you're watching Or if anyone's not familiar. Yeah, Alexis is someone else I've been interacting with over the years trying to initially Dissect Google Quake. You hear about this protocol that's out there. What does it look like? How does it behave? What are the bytes on the wire? What do they break down to? A lot of the times You'll have like somebody's written a document to say these bytes mean these things. It's how they're laid out But then actually find out the document is out of date with the code I think that some of my early interactions with the both of you. I remember being like oh This this doesn't seem to reflect Like why shark isn't doing what the document says and you'd say well now we can see the Google source code and the Google Source code is the truth here So it's quite funny. And I think that just reflects something like Why having different ways of looking at the same stuff is quite important just to eliminate Yeah, big thanks to Alexis and yourself. I know the community appreciate your efforts and as we iterate quite quickly sometimes there's only weeks between versions where things change that break phenomenally break Wireshark Where you can get into more about what that means in a sec without me getting but you know and If someone can provide an example capture Then you know It's excellent work and it's very helpful to us Yeah, exactly. So how I guess Alexis got started with the Google quick was he's as a network engineer I had to back capture from Their approach network. I saw some like fun and UDP track which wasn't I psyched by Wireshark. So that's That's a Motivation for Alexis to actually look into it and try to To try to build a sector for it and that's like quite some Like a couple of Wireshark co-developers like that. They run into something known I'm just very curious how how does exactly but what is this traffic sometimes for a classic HP Protocol HP one protocol you can look at the like role TCP stream and it's all in the index So you can clearly see something like get something something It's a host header and so on Yeah, and just by looking at the Wireshark Traffic you can see it's clearly HP Unfortunately as for encrypted protocols such as TLS And quick it's all gibberish So if you don't know with classic protocols, you could maybe look at the TCP dump or you could take a hex editor and Well, if I had to work for wire workshop You could take that and have look and guess it HP but that doesn't work for quick or TLS and that's where further Oh I'll cover for Peter so just in case anyone is tuning in and there's like I don't know what you're talking about like what what is taking a capture and Things you know at the basic level. It's it's a you have a say it's a software that's talking on It is in charge of owning a connection in TCP, that'd be a real connection or UDP it be Ending datagrams. It was it that would go by the local network stack via by the computers software and ultimately out onto the network card and Wireshark Somewhere hooks into that and is able to capture those things before they leave the machine but also as they come back into the machine before your local software is able to Maybe read them and get things wrong Is that a good description or did I completely I think that's it up? I think that accurate description Yeah, I got just some feedback that my micro microphone is a bit crappy Yes It's still pretty bad. I think I think we might want to do the fallback here just in case before we get into You see details Okay Especially if our audio levels are mixed that's not it's a kind of asking people to actively Let's give you a test. Okay. Do you want me to switch it over? Yeah, let's go Live TV people No, okay Any better now It's still pretty quiet. Oh Okay, and so I guess my phone's here Yeah, if you could hold it even closer. I think okay, I guess Yeah, okay. Let's go over this heck. Oh You're gonna have to do a one-handed demo now Peter. Oh, okay Okay, so Why shark and the patch process Okay, yeah, so as developer run into stuff they don't understand they can like submit submit patchy for for that and you also like experience we had like quite a quite open community if you run into something that you don't understand you can submit a Back capture and even better specification. So someone can have a look and validate it with the quick development Process it's even better like everything is on get up So that also made it possible especially for like new the latest quick version quite like little changes in the drop because like you guys are trying to like stabilize the Quick version and like release it So that's also mean that sometimes we can even like release a new version of wire shock with the quick support in Like within a day or so And this is it like, you know, they're nominally there I wouldn't say they're breaking changes They're like backwards incompatible Changes and sometimes it just requires like a line of code and that's it. But then it's Getting these things deployed The harder thing and even if the wire format stays the same or pretty similar It can be other changes or people are taking a new version of the quick draft say, okay. Well We'll we'll basically deploy a new feature on Or we need to update our infrastructure be able to advertise these things. This is why the you know, I play for instance our deployment will track things quite closely but sometimes there might be a delay just because of different impacts of changes that there can be and wanting to make sure that and we're not just kind of Rashly going. Oh, it's the newest as deploy it. But actually we're taking measured approaches the way that the draft It's that the pace that suits the draft And ideally that can match the implementers, but not always obviously now that we're coming towards andization However long that might take We're in the working group last call, which is a big milestone On that but ideally things are stable and and that means Dedicating some resources into building out capability. They you know, there's some cases you found like there's edge cases that can interrupt a section and That can make it look like nothing's happening. There's actually You just didn't find them yet more coverage more testing Yeah, exciting time Yeah, exactly In the quick as based on you'd be you can have no like can't be about ordering Whereas with TCP everything is a stream. So if an implementation didn't like it They could just like tear down the connection with quick. You don't really have such a signal. Well at least for some errors implementation may signal it but if implementation don't behave to this back or if there are some All the issue they might not give such an explicit signal and that that's where things like application logs or a packet trace comes and very Where those that's come very useful Yeah, that's what I also like about Wireshark it's or packet captures It's basically a source of truth. It's all communication between two parties So as long as you can hear what two parties are saying you can pretty much follow what they had in mind And that's about like some use some special like Encryption, then you need to keep to understand that I will get to Do that in a moment So What's the plan you're gonna share thing with us Yeah, I was thinking about a couple of like issues that were very like visible in Wireshark. And so, as an example, like many quick implementation, as you may know, and one of them was a quick go, for example, and These many implementations, they do interoperability test which help in covering issues between the implementations. One of these books was that quick go When with certain ciphers, it wouldn't fail to do the connection on the in the application logs. All you would see is something like an infinite packet or decryption error or something like that. Using Using using Wireshark, it was visible that well Wireshark also showed the same error. Well, there was some kind of decryption error, but by very carefully looking at the, at the back at the wire format, you could see That the sizes of the raw data didn't exactly match what was supposed to be sent. I should probably share like a packet capture for easy understanding because right now it's quite abstract, but that's high level idea that there are a couple. Some of these issues, they're only visible on the wire. They're not visible in application because the application implements What their idea is of the specification. Let me pull up The packet capture. And to microphone hearing and disappearing is the microphone disappearing now. Working. No. Oh, sorry. Sorry. I'm just talking about my local and you're absolutely fine. Okay, screen. Okay. Let me share my screen. All right, you should be able to see something Yeah. The terminal. Okay, yes, it's small. If you can get the text in important yet in this case, but yeah, I have run the latest version of Wireshark that has the best support for for the latest quick version, but nothing very interesting and just start Wireshark So this one. When you say latest. What do you mean, is this like a binary download from at least Yes, so I built myself. I get the latest development version of Wireshark I shouldn't point to a link where you can find Additional versions. Just want to show you that. Okay. When you start up. It just looks like this for for. So when you do a packet capture involving TLS HP to over to us. A quick, you have to start capturing the data before you actually like open open a connection to this to the server. The reason for that is In the very beginning of the connection in the hands during the hand handshake. There's some essential information for that's necessary for decryption. The last handshake basically So in this case, I'm going to capture data for blog.com I specified filter because otherwise it will literally capture everything from my machine, it will be very noisy, especially given that I'm doing a video cast right now. Wireshark doesn't really like it when you do like megabytes gigabytes of data. So that's, that's one disadvantage compared to a QFIS It's not with things like QFIS Q log, you can filter out your data, data frame, the very big data while still keeping things like metadata such as headers. But with Wireshark of this information remains present in a packet capture that a weakness because your packet capture becomes very large. It makes it difficult to share, especially if it has confidential data on the plus side. It's literally contains everything and allows you to debug any potential issues if they exist. Just a clarification point here like one of the power features of Wireshark is all the filters and it's like different kinds. But right now this is a capture filter. So it will, it will constrain what is like actually captured by Wireshark. So although Wireshark or a packet capture could get everything. And then you could filter that down to look at. This will focus on on the TCP exchange with log.py or would this capture the DNS as well. Like I've got this wrong in the past and sometimes it's bitten me. Very good. Good point. So here I select an interface. So if you're on the VPN, for example, and your traffic to like a site goes over the VPN, you have to select a different interface from either a user and zero or one, for example. In this case, I'm not connected to a VPN. I'm just connected to Wi Fi. So I have to select the Wi Fi interface, which is well currently select by default. Usually Wireshark selects the right interface by default. That may be omitted. And like I said, and it will capture everything or you can specify it, which means that when a packet comes in on the interface. This filter will determine Should I keep this packet for later analysis or not. In this case, a host something something means this name will actually be resolved to an IP address. And this filter will essentially mean every IP packet with the IP address belonging to this host name, be it IPV4 or IPV6 will be captured. So the nest packets will not be captured by this. That's interesting because there's Wireshark do its own name resolution, then, or does it use a system. Oh, okay. Oh, yeah. So I'm gonna write that down. So if you do a host talk to Cloudflare to go max. There's no one who registered go max, it will show up was read a known host. I'm not sure if you can see it in bottom and I can probably not enlarge it. It's a bit small, but we can read it out for anyone. Yeah, it says in the step like a tool tip a known host. So let's use a host that actually exists. So hosts, then I can press Command E or go. Sorry, capture and then start or just double click on this interface and then we'll start capturing In this case, it looks like a little bit boring because like literally nothing happens and let me try to start up Firefox and actually go to blog.Cloudflare.com So right now, there's Not of traffic. Oh, actually, I should probably clear. That's another important thing to keep in mind. So Right now I don't see a lot of traffic in here. You would probably expect a lot of data and that patients on. The reason why you don't see the communication network right now is because the browser Firefox. It has some I previously visited this website and has this These resources already in cash. So if I want to actually see communication on the network. I have to delete the cash first And then try again. Before doing so, let me show you the network tab. I can get that by command option. I think, or you can go to tools web developers, then a network. I closed again. So I just cleared my cash. I could use this option to have the same effect by refresh. Now, There's a lot of activity going on. I look at wire shock. Oh, this looks somewhat boring of it's encrypted. Right now, I'm We're able to see the TCP messages coming back and forth. But as far as I was concerned, it's like calling up application and it's just just binary opaque stuff. Figure anything out. Whereas where you got here is, you know, the TC the handshake by the look of it and then unless 1.3 That's correct. You used. So then go back one step of how you approach a packet analysis. So what I do now. I actually have like some plan in my head already. So I know very I know exactly where to look for to To figure out whether it's a problem or not, or to demonstrate something. So, for example, I already like put in a captive filter so I can limit the output so and more. I could apply additional like filters here. Not if I know I'm only interesting to add traffic. I could put us there. If I want to look for DNS. I could do that, but it will show up as empty because I limited the capture If you, if you are just capturing acting or you don't know exactly what to look for. I'd usually suggest go to statistics and there's a protocol hierarchy few that shows for every layer like what kind of packets exist. Well, right now I kept it. Limit my capital one host. So it will be pretty boring. But if you do it on a network without a filter, you'll probably see the Nash. OCS be maybe Email what what's not that will be visible in there. Yeah, if no one's ever taken a packet trace. I just encourage you to do it to see how much how chatty your computer is and the rest of the network with incoming and outcoming packets. It's pretty surprising and Yeah, if you're testing on lab networks where like in the past, a lot of my work has been and you don't kind of need those filters so much because there's nothing going on. But as soon as you're on an Internet or like a LAN with other machines. It pretty noisy filter is your superpower. We're getting a bit of sun flashing of the site to distract you Yeah, no. Yeah, the weather. It was like JJ Abrahams doing his whole like funny lights in the camera build suspense and mystery. Oh, it's the sun today. No, no training in the Netherlands now. And another thing you could put into is enable name resolution. So right now I got a lot of IP addresses problem. No. But now that this kind of like a cloud flight peak for those who do not get enable name resolution. This could probably still not do a lot. Okay, it results with my It resolved my local My computer name, the IP doesn't actually point to a To do a name. Rumble. Let me Let me try to copy this IP address. Copy Copy the value So as you can see, it doesn't resolve. But if you pick one, one, one, for example, does have a name. And if you do one, one, one, one, and you see it resource back. So that's where the teacher could become useful. All right, let me get back to the straight. So we know it's already to us. Let's have a look at what we can see. So this is someone what someone would see when they literally look at the wire. Double click it. So as you can see, there's a lot of gibberish. There's some text here. So if you want our cures. What it means you could click on it and then the whole tree. Point couldn't think of now, but the whole tree will basically expand and will highlight exactly what kind of field to this. It's also quite useful feature of wireshark Wireshark has a lot of protocol detectors, which allows you to narrow down this this sequence of bytes to particular field. I'm looking for the server name. It's perhaps it's encrypted. There's something unknown as well. Oh, encrypt the server name that explains it. So yeah, I was looking for the server name extension. The last extension, but it turns out that this connection users is is not which encrypts the server name. So it's also not visible on the wire. Yes, now it's still a new thing that's developed that still developed by the idea of working group cloud flask and implementation of it and Firefox has an invitation of it. And that's why it's visible here. But basically what I want to show you is there's a lot of data here. And basically, you can't make any sense of it unless you see something that I don't look us There's not much in there. So HP 1.1 What does that mean This HP 1.1 that's the ALP and field. Where was it And there I can click on it and it's highlight that right there. That's a application layer protocol negotiation abbreviated to a RPM. It's based. It's used to inform The, the other side, the server or the client what project what protocol version will be used in the encrypted layer. So when people say the weapons encrypted. What they mean is there's still us which secured connection and there's an application layer inside it and that application inside the protocol used in there is is can be controlled using this field. So for classic HP one this extension didn't exist and the pair basically had to guess based on the port number that is need HP one or that something's indeed SMTP example and it goes over port. No 587 Portman doesn't matter, but For HP to since it's all in binary. They basically needed a mechanism to make clear that the application. Layer inside is not HP one but HP two. So that's why you see two options right there. It'd be two and it'd be one Yep. And like it's basically the problem of D multiplexing right so what what they had And although the focus of this talk is on H three. It's important to understand like to upgrade protocol versions like this. Do you make completely breaking changes or do you try and maintain as much as possible. So, so it was big in H two was The desire to avoid having to define a new theme. So you wouldn't want to type like HP to colon slash slash thing you kind of wanted everything to seamlessly migrate, if it could. And if it didn't seamlessly fall back and so LPN And it comes out from some other stuff called expert on negotiation. There's an ability to reuse the port that we know and love for for three Negotiate stuff without having to build application negotiation at the application layer, which might not work so well because You'd have to update the applications. And if you could do that, then why do you need to negotiate them. It's kind of a circular argument. But what you don't see those HP three. And that's because in this case, it's this negotiation is happening on TLS for for for three and there's not really a way to like negotiate The application protocol of a completely different TLS handshake and even if someone tried one. I think that disaster. So that's, that's kind of why we need to hold there is stuff. But that's got nothing to do with this. Sorry, Peter. Well, it was very rapid and you point out HP three cannot be used in there. Yeah, true. It's in white, you can clearly see the layering. This is TCP stream oriented protocol where HP three is over over you'd be so don't totally make sense in this context. So right now you will probably disappoint. I don't see HP three at all in this trace and what's going on and like that. This all encrypted to us. So we need a way to decrypt this and only When everything is done correctly when the server and client configured correctly, they will use a secure protocol such as George 1.3 And that means that only the server and the client should have the decryption keys to actually see what's inside this capture So in order to do that, I have to restart Firefox with a special option to them to secrets. Let me Close that And let me close Firefox as well. I'd like to completely quit it. I cannot just close it. I have to completely close it in order to do Well, terminate the process. Otherwise, it would interfere. Otherwise, if I open a new Firefox instance will just open. Well, the open the old window in all process and for the option that I'm going to use. It's called SL kilo pile. Don't mind the SL in his name. I know Jonathan and my colleague will like shout at the name of the son of him. But this option will will instruct Firefox to dump secret to this file keys to the txt Let me remove. Well, we can have a look at what I captured before because I did it before you will see a lot of like gibberish. As a key look for this a comment NSS is the library used by Firefox for us and NSS actually was the very first one to implement this extension where it could dump the secrets in order to encrypt enable decryption. This format is probably boring. But yeah, the very first field tells you what kind of line. Do I have the next one is an identifier to link the following secrets to a session. This is where you want to know this declined random. So if you want to verify whether whether a secret is Brendan's file. And whether matches to your session, you can look this up and try to match it with the client random in here. Let me try to open it. Client random this one. So it's called find random goes well it's in the client. Hello. So also has to random, but it's not used for this book was of matching So let me try to Let me try to open up Firefox. Now, so I checked. I don't have Firefox open I set this file. Let me remove the old one to demonstrate that's actually being created. Let me open up Firefox. And Reminded me of an anecdote. I'll show at the end. Okay, so the file has been created Firefox open the book to cloud. Let's come thing again and And Right now it's already decrypting, but it's not entirely fair that the decrypting because I didn't show you how I can figure why shock to do decryption to do so right click on to ask layer protocol preferences and then go to the very last option, the secret log file name. And in there, you can like configure the path which you put in this SL key log faulting I can't believe you just showed me that I've never done it that way. I've always had to do a really horrible way, which is like about three steps longer. Yeah, go down to TLS and then it's the same window, but you always have to Yeah, they're not ways to do things and this is probably useful as you haven't gotten a capture yet like this because This just lay open will only show up if you actually have to ask you trace so configuring via preferences also actually something I do if I can't if I don't have my trace configured yet. Yeah, now you can actually see Oh, I added. So by default, the wire shock doesn't by default why shocks will probably look like this. There's a like a packet number like the time when it was captured since the start of that of the packet capture and a source and destination IP and protocol and so on. Usually, what I also add is I go to TCP right click on stream index and then select apply as column. The reason I do that is because that way you can very easily identify which TCP or to us session, you're looking at. So as you can see, it's an increasing number. The previous session could not be decrypted because I didn't have the keys for those sessions and this session. I can actually decrypt. So what I can also do now is follow TCP stream. Like This is basically garbage. It's well it's not entirely garbage. This is this makes sense to the application that don't make entire center humans and encrypted. You can also like see the HP thing in there. It's the raw data of the TCP stream. So right now to filter like the packet displays already limited to just this dream. And usually what I do is either GP dot length is larger than zero. I hope you can somewhat see it. By the way, I press Command shift R to automatically automatically resize the columns. Because when I zoomed in. The like things started getting hidden. So yeah, it's also Every Excel spreadsheet. Yeah. So usually another thing I've mentioned Which shows a different which was a different in QFIS and a workshop QFIS is very like specific to the application quick or HP three or to us or a P two, for example, why shock shows you all like layers shows you like the physical the link layer at IP, the network layer. And so on. So while why does it's best to like literally try to interpret as much as possible. The advantage of that is, well, if there's some information that it will probably tell you about it. The downside of it is it makes a bit harder to focus on it. And that's where the display filter comes in useful. So in this case, for example, you're probably not interested in the empty packets, the like sin package for TCP connection setup is empty. So usually I select TCP package which are non empty. Alternatively, I could say like, okay, I know it's TCP. So it's to us. I can just use and to us to be to stream equals 11 and to us because this was my stream index, which I added before. Yeah. So now if you look at it. Okay, this is my client. Hello, it's the client. Hello, until it is still an encrypted. That's some maybe, maybe it has some fields which are encrypted, but in general, the whole data is pretty much like fit one wire. Similarly, for the server. Hello. This was just 1.3 because the client. Hello, has a supported first send a supported version field and server actually agreed to use this version. That's how wireshark determined it's actually just 1.3 and all the versions. This field would be used to negotiate the version. For example, one .one.one or two. And this goes to your earlier point that if you if you start the trace too late. It's out on information like That so to wire shark is like tries its best to have some heuristics, but some of this is stateful and if you miss the start. It's just possible. Unfortunately, Exactly. It's not a critique of the tool. It's just I think it's That's just a fact of life. It's a Google useful limitation to be aware of it. Let me demonstrate example right now I have to find. Hello. And as you can see, this is all decrypted. If I ignore this, then you can see, oh, cannot make any sense of it anymore. Oh, Okay, or I have to find it again. Look, I can do with the frame that ignored filter and now it's back. Okay, very light debugging here. Yes. Well done. Okay, now something's still missing for some reason. Did I correctly. Oh, Sure, it can Frame ignored because one Oh, Brad, that has something to do with me doing a live capture. So I re enabled the option, the packet. But for some reason, oh, it's back. So often on again. So keep in mind that when you do a live capture, there may be some limitations versus when you take a capture file and save it for later use when it's doing live capture by shock will try to interpret as soon as things come up. But that also means it cannot do certain computations calculations. Because the data wasn't available yet in the first place. And yeah, that's a one day to be aware. So let me just conscious of time because I keep interrupting you and asking you stupid. Oh, yeah. So we're looking at page two at the moment. Are we, are we able to do the same for HP three or four quick what's yes we are able to So essentially, the idea is the same. Okay, we have this handshake. And now we have this decrypt your step in there and to us. Normally you see this application layer data if you haven't configured the key. Is Making fun of my camera. In the Netherlands right now. Look, you wouldn't expect it. Okay. Okay. So yeah, normally if you don't configure keys, you would see like application data. And now you can see there's actually some some decrypt the data in there. In this case, it's HP to and what you would see is a couple of streams with a header frame. This is another like It's a feature that why shock shows a lot of like information, things like these will probably not make sense to most people, but for implementers who are doing like the latest 5G. Protocol implementations or those who develop and like a web browser. So on this information can be very useful to see exactly what's on the very low wire contrasted to tools like Firefox and the web developer tools and Firefox or other browsers. Yeah. Yeah. Here you will see only like the application layer information HP three. I'm sorry, the HP headers and so on, which you also see here. But in addition to that, you see a lot of additional metadata. So this is the The dev tools are great. I just, I find that a bit oriented to web developers and sometimes in, you know, if we think of request and response is our lingua franca. And they try and shoehorn in like each tool or H3 specific things into that model and it just doesn't quite fit you know here you've got things I can see like priority frames and Settings and window updates, which is like H2 level flow control. I mean, I was looking at just the other day in Wireshark and other tooling. You don't, you don't get that necessarily in Network tools. Sometimes there's additional dialogues like I think I was showing Chrome's network the other day, but it's hard. Like it's it's fiddly to use and it doesn't, it's not as powerful as Wireshark in my opinion. That's right. Yeah, the problem of tools like web developers and Chrome 5 and so on, is that's very specific to the application. So if you have a go go program or by the script which communicates with some API and you, you may not have as a like developer or user of that API, you may not have access to Like tooling on the server. So all information you need to get have to be available on the client and in your Python script, you probably don't have something as fancy as web developer tools. Or you could open up the URL that the your script is trying to open in the browser. It may have a result in The behavioral differences, such as maybe there's some cookie missing. There's some header missing or there could be some other side effects, even something as stupid as the user agent header may have a side effect that you never realize Okay, so yeah, and this is just a to just to want to show you that. Okay. It's a bar chart shows you the very like low details of HP to Unfortunately, the like this level of detail for HP three and Wireshark is still very much in development. It hasn't been implemented yet. So I can show you how how quick currently looks like in Wireshark The goal is, is, is to show something like this late for HP three as well. But right now it will be somewhat more limited And don't be too unfair on yourselves like trying to show in my first session that actually things like you've got here right you've highlighted the window update frame. And in HP three, there isn't one because it's handled by the quick layer. So, so a lot of the frames are kind of pulled down into the transport and H3 is pretty thin on the ground. So yeah, get credit to yourselves of actually getting quick dissections and not just one version, but you support concurrently Google quick and the idea. Right. Yeah, Google quick is what is mostly driven by Alexi and like that, like, oh, he runs into something that shows up as a known then what tries to make someone more useful that make Wireshark tell something more than unknown. Let me show you how HP three would look like So briefly talked about how, how does HP three get enabled. So, oh, this is if I refresh this you'll probably see it just HP two and Firefox. If you want to enable HP three, you have to go to about config. And search for HP three and this option network will be enabled. Now set to true So due to caching. I can disable cash this way and hopefully it works. By refresh my page. Now, maybe it shows up as a P three It doesn't. That's good happen due to existing open connections. About networking Oh, I don't have any connection over now. Let me try again. And so that's the thing with HP three you need an existing channel to tell that the service actually support HP three So the very first request will most likely fail to tell you that the HP three. Maybe if I go down the line. Maybe it's another request to go over it between not yet. So anyway, so right now, Firefox should know that cloud block the cloud like the GOM support a P three. If I refresh it. Hopefully it then gets a resource of HP three And Great. Let me clear the cache and hopefully it works again. And let me toggle Work offline such that every connection is terminated and definitely know there's no existing HP two connection. And then open up again. There may be a book somewhere. And it's worth reiterating at this stage that that this is a live demo, which always in folks that God's but but that you know the protocols and development and that you know that there's experimental. This is why features like this are behind the flags. This is a nightly version of Firefox, which means it's getting update every night pulling in the Patches Friends over at Mozilla working on and sometimes it can be bugs. So that actually testing these things out helps catch them. You know, we, we would interact maybe and say, well, like we knew the blog page work yesterday didn't get a packet trace this thing looks wrong. So actually, we're able to use these, not just for our own kind of why is my website not working, but to help debug each other. Okay, so that's interesting. So for some reason, this doesn't load but why I was able to capture the traffic and as you can see, there was no information in the web developers. That's a prime example of why you would something you something like why shock the application doesn't show you the information. Briefly, the web developer tools, for example, didn't implement a WebSocket support and it showed you it's WebSocket, but didn't show you the contents of it. And that case, you can also use my shock. So here we have a very nice trace of quick Quick So what can you see here. Well, the stream TCP stream index don't exist because it's over UDP Why shock instead maintains a special field called connection number. There's also a stream numbers in the UDP layer similar to TCP But quick actually complicates things because quick support connection migration, meaning when you transition from your Wi Fi network to your mobile network, it will come. It can continue to work without breaking your connection. That's called connection migration. So that's why there's a separate field here to track exactly that connection as it moves between networks. Why shall he shows you. Okay, there's an initial packet here. In there, we should have a to ask client. Hello. So why shock. Sorry. No, why shock to us. Sorry, not to us quick still uses to us. For its record for its encryption in there, you will see a LPN here. And Firefox says I support HP three draft 27 And so acknowledges And after this like initial handshake. Is this all still the very same connection. Let me try to apply. It's all the very same connection. Oh, here you can also see like the draft version of those like Q log Q face will probably tell you the same information, but it shows you Whatever is visible in the wire, you can capture with why shock. You don't need specialized tools for it in order to Get now packet data actually you need something like this Peter or some other tool that can get the data, but you don't have to modify the applications just quite a useful feature. Yeah, I mean, He people like me who spend too much time on this stuff would be able to look at that version that you just had highlighted FF 001 be. Oh yeah, I know that's quick draft version 27 but that's the version of the quick transport layer. But, you know, if you're seeing this kind of screaming past your eyes like yes, some people can read the matrix without without any help and But having something like this that actually turns that into textual helps you focus on the weirdness, it kind of reduces that cognitive burden, at least for me anyway. So we're able to try and, you know, if you spend the next 15 minutes to say, well, why didn't this handshake work. But what was Firefox had a hiccup. Maybe there was some loss in the network that interrupted the flow. I don't know, like I'm speculating that With with some more time, we could probably figure this one out and probably need to keep this back anything that's the book and But It is written in That's why if you're running the capture. What's great. Now is you could stop this say and send it over to me. Right. Yeah, I'd be able to take a look as well. And we can crowdsource the problem. Yeah, I'll save it later. For now, I probably started stopping capture right now. Oh, Well, I didn't mean to maximize it. I mean, I'll be honest, it's usually me. He's crowdsourcing my problems back to people. So why I guess an experimental feature called quick stream, which a lot of limitations, but it shows you what's inside and this is probably all HP three stuff and why shotguns fortunately don't exactly does interpret it be tree. So currently your limb to this output. You can change it to hex them if you want. If you know how to read it be tree. But what this feature does it's it takes all like package with a stream inside and it shows you the data inside. Usually it works, except when you have streams go less with the Except if you have like multiple streams in a single quick packet, which is also possible for copy right now stream zero is the control stream, I believe, is this useful. It's a request. This is a single request. So five bucks with a cent one and then Yeah, it's got a response. So in one of the views you just had was some text saying Greece is the word Which is a feature that pipe that use for greasing it to just for some weirdness in exercising extension point with some randomness. To help maintain extensive, but that's a topic for another day. But yeah. Oh, a couple more minutes. So is there anything I delayed you in Talking about So right now I'm just like scrolling. I was like trying to locate the QPAC stream. But yeah, why shock. There's a there's an experimental branch for a P3 support, but it hasn't been completed yet. So right now, unfortunately, it will not tell you a lot of detail. Maybe I could like loaded up in a few years and then it will try to dissect the details, but at the moment. All it tells you is information about the quick transport layer. So it's important to notice, you know, that HP three. It's an application layer. Protocol on top of a quick the transport layer. So what you basically see now is as usual, showing the TCP layer in all the protocols, except that quick is somewhat more complex. So you need specialized tools to understand that you cannot just look at a raw hex dumps. Yeah. Oh, so I think, you know, like we talked about before, basically for applications using quick like they use streams. The way that they communicate their important data. They use the other stuff like national oriented or flow control and stuff. But when it comes to exchanging the applications data. On stream. So even if you can't dissect exactly what's happening there you can you can look and you can see here that this thing. You could look for the offset being zero, for instance, and then you'd be able to trace the start of the stream. And kind of take it from there. Maybe you need to grab the hex the decoded hex out of Wireshark in this case and manually decode stuff, but maybe not. But I've got one question. Sure. Basically, so you know this this This segment is nominally called leveling up web performance. It's very click baity. You know, I think, yes, will will. It's very important. We talked about things like head of line blocking and how it can help. But ultimately, you know, we're not talking about web performance right now as we demonstrated the most important thing is Being able to make a connection first place. And while this is still a bit, you know, while we're trying to finish stuff. It was like this can help you there. But in any cases. Oh, sorry. Before we get cut off. I just want to thank you everyone tuned in today for your time, but like 10 seconds transfer in the next week as well. We'll be back on another guest.