R2S was a painful one, but Lachlan was a dream of a security researcher to partner with. Not just from a responsible disclosure POV, but things like hopping on multiple calls with Meta and our team to help us validate remediations. Thank you Lachlan for helping make the internet safer (and great job on figuring out this 'labyrinth' of a vulnerability)
React was ruined from the moment they abandoned class components and introduced hooks. Vercel is just continuing the trend of hype against common sense.
You are probably a Javascript dev, not doing typescript? Classes were horrible to type for, especially when you tried higher-order components. Hooks removed so much clutter and friction and allows pretty well-typed components and higher order functions (i.e. hooks that return components).
Hooks made simple things simpler, but hard things harder, code with lots of boilerplate was replaced with code with leaky abstractions full of various workarounds - I don't think this is a good trade.
While I hate class component lifecycle methods they are much better than complex hook setups when solving more advanced problems.
Just having an interval inside a component used to be trivial, but with hooks becomes tedious. Only the barebones simple ultra basic stuff became simple. Everything else? Harder.
I am all around developer, working with typescript from at least 2015.
I’m not exactly sure what complication you mean. Lifecycle method sucks, yeah, but you replaced them with lifecycle hooks. So the same mental overhead but now in a pseudo stateless functions, with state full escape hatches.
Yes, they were uglier but they had advantages that got lost such as an easy to control rendering life cycle.
Just opening dev tools on MIT-written big tech corps and startups confirms nobody is able to write good websites or applications that arent filled with performance and memory leaks.
Of course, the only question is in what way the programming language pushes you. You can TS code where every variable is assigned “any” type, that would void all type safety. Is it possible? Yes. But someone needs to bend the languages will to do that.
Classes have inherent state, and methods which encapsulate logic. That pushed you to create separate logic bundles.
Functions are callable scripts. There are no rules. I’ve seen too many components that invoke tens of hooks, and hundreds of lines of state management. Most classes I’ve seen never reached that. Were there classes that were too big? Of course, but at least there was logic separation with methods.
I’ve done plenty of hooks. Also class components. Also angular.
You are writing code for an object that is inherently stateful, in a stateless design pattern. Instead of embracing state, you crate escape hatches and plugins to tap into your state, and then more escape hatches inside those escape hatches to tap out.
It’s react rendering model leaking into your code. Let’s imagine react changes the rendering paradigm, and components are rendered once with only state updates. Almost all of your hooks become useless. The fact that you need to think about react internal every time you create a component is such a bad API choice that I’m amazed it still exists, and being expanded.
So your argument is that instead of explicit class component methods, hooks are implicit based on understanding the react rendering model?
I guess so - but react could also change (and I think did at some point) how their class methods work, how often they're triggered, and when.
I don't understand the stateless comment - hooks are as stateful as you make them, using useState or useContext or any of the other ways of maintaining data between renders.
Classes are inherently stateful. A class instance is a long lived object. Functions are not, a functions internal state is thrown the moment the function returns. What react ask you to do is to attach to external state inside the function, in other words, an un pure function, forego idempotency.
In class based components, you didn’t care how react works under the hood, except for the render method which is called by react. So the surface of code controlled by react was only what you included inside that method. In function components, the entire function is owned by the renderer, so you need to deeply understand how it works.
It wasn't OOP hate, it was hatred of splitting functionality across a number of methods rather than putting it in a single (reusable, sharable!) hook and having your component consume it.
I'm still yet to be convinced React Server Components are anything but a disaster to the developer experience. Mixing backend and frontend without a clear boundary is terrible for any codebase beyond a handful of contributors.
The prime motivator for it is a certain user experience. I'm not sure they've found the best developer experience for providing that user experience, but I'm also not sure that a better DX is possible - the whole concept has quite a bit of inherent complexity, I'm afraid.
(The conclusion could, of course, also be that it's just not feasible to create that kind of user experience. Luckily, traditional patterns still work just as well.)
If you look at the origins, the primary motivation was finding a way to get a good data loading developer experience without having to adopt Relay and GraphQL.
I wish this site respected prefers-reduced-motion. The dots on the background give me motion sickness while trying to read. Thank goodness for Firefox reader mode.
I was really surprised when this hit, and I discovered the protocol was essentially undocumented / unspecified. I was trying to find indicators of compromise and that was made more difficult by the lack of documentation.
It was really helpful that they had coordinated with WAF providers like cloud flare ahead of disclosure to put rules in place though.
Boy I loved this write up, and really loved Sylvie’s, which gives a peek into the economic side of this white hat hacking — prepping, safety, wondering who you trust, preparing to claim as many bug bounties as possible.
I was struck by the very sensible economic filter: “who is vulnerable that has a bug bounty program?” Incredibly good reminder that you should have a bug bounty program; otherwise, nobody might call you. Until, you know, you’ve been compromised.
> But that afternoon, fueled by curiosity and frustration, I felt a switch flip in my brain, and I dived head-first into a rabbit hole with no turning back.
It happens to all of us. However, I think it’s much easier nowadays with LLMs for something productive like this to come out of it. I can notice something wrong and triage or even fix it before the point where I’d normally start to feel the subconscious pull of opportunity cost telling me to stop.
Side note: A few weeks ago I started to see floaters in my eyes and the background for your site is making my brain go haywire. Also a tad bit distracting while trying to read the article.
R2S was a painful one, but Lachlan was a dream of a security researcher to partner with. Not just from a responsible disclosure POV, but things like hopping on multiple calls with Meta and our team to help us validate remediations. Thank you Lachlan for helping make the internet safer (and great job on figuring out this 'labyrinth' of a vulnerability)
You ruined React.
But it was quite profitable for you.
React was ruined from the moment they abandoned class components and introduced hooks. Vercel is just continuing the trend of hype against common sense.
You are probably a Javascript dev, not doing typescript? Classes were horrible to type for, especially when you tried higher-order components. Hooks removed so much clutter and friction and allows pretty well-typed components and higher order functions (i.e. hooks that return components).
Hooks made simple things simpler, but hard things harder, code with lots of boilerplate was replaced with code with leaky abstractions full of various workarounds - I don't think this is a good trade.
While I hate class component lifecycle methods they are much better than complex hook setups when solving more advanced problems.
Just having an interval inside a component used to be trivial, but with hooks becomes tedious. Only the barebones simple ultra basic stuff became simple. Everything else? Harder.
I am all around developer, working with typescript from at least 2015.
I’m not exactly sure what complication you mean. Lifecycle method sucks, yeah, but you replaced them with lifecycle hooks. So the same mental overhead but now in a pseudo stateless functions, with state full escape hatches.
Yes, they were uglier but they had advantages that got lost such as an easy to control rendering life cycle.
Just opening dev tools on MIT-written big tech corps and startups confirms nobody is able to write good websites or applications that arent filled with performance and memory leaks.
I just don't understand this take, every time I hear it I wonder if people just haven't spent the time to adjust their mental model.
Hooks are IMO the best thing that happened to react.
I have spent more time than I wished for on React debugging tools, and useXXXX spaghetti calls.
You can write spaghetti with class components, too. Doesn't sound like a hooks issue to me.
Of course, the only question is in what way the programming language pushes you. You can TS code where every variable is assigned “any” type, that would void all type safety. Is it possible? Yes. But someone needs to bend the languages will to do that.
Classes have inherent state, and methods which encapsulate logic. That pushed you to create separate logic bundles.
Functions are callable scripts. There are no rules. I’ve seen too many components that invoke tens of hooks, and hundreds of lines of state management. Most classes I’ve seen never reached that. Were there classes that were too big? Of course, but at least there was logic separation with methods.
I certainly can, but somehow it cooler to write lambdas upon lambdas, and other Haskellisms when using hooks.
I think we're just gonna agree to disagree. Cheers.
I’ve done plenty of hooks. Also class components. Also angular.
You are writing code for an object that is inherently stateful, in a stateless design pattern. Instead of embracing state, you crate escape hatches and plugins to tap into your state, and then more escape hatches inside those escape hatches to tap out.
It’s react rendering model leaking into your code. Let’s imagine react changes the rendering paradigm, and components are rendered once with only state updates. Almost all of your hooks become useless. The fact that you need to think about react internal every time you create a component is such a bad API choice that I’m amazed it still exists, and being expanded.
So your argument is that instead of explicit class component methods, hooks are implicit based on understanding the react rendering model?
I guess so - but react could also change (and I think did at some point) how their class methods work, how often they're triggered, and when.
I don't understand the stateless comment - hooks are as stateful as you make them, using useState or useContext or any of the other ways of maintaining data between renders.
Classes are inherently stateful. A class instance is a long lived object. Functions are not, a functions internal state is thrown the moment the function returns. What react ask you to do is to attach to external state inside the function, in other words, an un pure function, forego idempotency.
In class based components, you didn’t care how react works under the hood, except for the render method which is called by react. So the surface of code controlled by react was only what you included inside that method. In function components, the entire function is owned by the renderer, so you need to deeply understand how it works.
Spot on, incredible how OOP hate can mess up a framework.
Vercel, the only thing they have going for the app model mess, are the partnerships with SaaS vendors that make them the must go tooling.
However this will eventually come to an end.
It wasn't OOP hate, it was hatred of splitting functionality across a number of methods rather than putting it in a single (reusable, sharable!) hook and having your component consume it.
Yeah, because now is so much better....
I only touch React now, because of SaaS partnerships with Vercel.
Otherwise I pretend it doesn't even exist.
A great read. Sylvie's writeup is good too: https://sylvie.fyi/posts/react2shell/
I'm still yet to be convinced React Server Components are anything but a disaster to the developer experience. Mixing backend and frontend without a clear boundary is terrible for any codebase beyond a handful of contributors.
But it is so cool!
I really don't understand why people complain about Spring or ASP.NET annotations, and then go running to Next.js with its useXXX and import magic.
The prime motivator for it is a certain user experience. I'm not sure they've found the best developer experience for providing that user experience, but I'm also not sure that a better DX is possible - the whole concept has quite a bit of inherent complexity, I'm afraid.
(The conclusion could, of course, also be that it's just not feasible to create that kind of user experience. Luckily, traditional patterns still work just as well.)
If you look at the origins, the primary motivation was finding a way to get a good data loading developer experience without having to adopt Relay and GraphQL.
The first exploit looks somewhat like an elaborate json version of the bf language.
I wish this site respected prefers-reduced-motion. The dots on the background give me motion sickness while trying to read. Thank goodness for Firefox reader mode.
>> Amazingly, despite being a weekend, the Meta team triaged, reproduced, and confirmed my submission in around 17 hours.
Incredible. Realize what you have done from start to finish (with confirmation) in < 24 hours.
Nice read!
I love the "we are so back" vs. "it's so over" graph. Defines so much of this type of work. "Wow? ... nah... WOW?! ... nah..."
I was really surprised when this hit, and I discovered the protocol was essentially undocumented / unspecified. I was trying to find indicators of compromise and that was made more difficult by the lack of documentation.
It was really helpful that they had coordinated with WAF providers like cloud flare ahead of disclosure to put rules in place though.
Boy I loved this write up, and really loved Sylvie’s, which gives a peek into the economic side of this white hat hacking — prepping, safety, wondering who you trust, preparing to claim as many bug bounties as possible.
I was struck by the very sensible economic filter: “who is vulnerable that has a bug bounty program?” Incredibly good reminder that you should have a bug bounty program; otherwise, nobody might call you. Until, you know, you’ve been compromised.
Really nice writeup. Would be intresting If an ai can find such vulns, too.
> But that afternoon, fueled by curiosity and frustration, I felt a switch flip in my brain, and I dived head-first into a rabbit hole with no turning back.
https://xkcd.com/356/
It happens to all of us. However, I think it’s much easier nowadays with LLMs for something productive like this to come out of it. I can notice something wrong and triage or even fix it before the point where I’d normally start to feel the subconscious pull of opportunity cost telling me to stop.
What a great write-up. Thanks for sharing how you found this fascinating vulnerability and exploit.
Haha, nice.
One correction: The link in "To be honest, I'm not even sure if I understand it, but it's on my GitHub." goes to the wrong file (01 instead of 00).
Side note: A few weeks ago I started to see floaters in my eyes and the background for your site is making my brain go haywire. Also a tad bit distracting while trying to read the article.
Really cool article btw.
Whoda thunkit that
- blurring the lines between client code and server code
- creating a brand new protocol for communication between trusted and untrusted actors
- and with all of that allow the protocol to serialize code and not just primitives
Would be a tremendously stupid idea. And for what? To lock developers further into the react ecosystem. What a shitshow react continues to be.
> And for what? To lock developers further into the react ecosystem.
It was a clear bait and switch scam, that is still going on.