Next's Server Actions Might Not Be That Safe...

so skimming through Twitter there's this guy named Tom Sherman who posted a really interesting topic about react server components using this new server actions approach where basically your like credentials could be leaked if you do some type of scoping like this if you have like a closure I guess I should say and I didn't fully understand it I was reading through it I'm like I don't really understand like what's getting leaked here so I actually you know pulled up a project and I tried to do my own thing to try to like make sure I understood this so I just want to kind of walk you all through that in case you all were curious like what the heck this is actually talking about because uh it wasn't really intuitive to me um because I don't really pay attention to how a lot of stuff is going on but basically I'm using next with the app router and I have a page right and all this page does is it displays a form and when you click it it calls a server action over here okay so let's just go over here now we'll go ahead and click submit and notice that this does a post request to the same URL that we're on and it sends over a payload of whatever's in the form right so we see test here pretty cool we also see an action ID I believe next uses this to figure out what server action function you're trying to call so I'm guessing it's somehow it Maps this function to this ID could be wrong correct me if I'm wrong about anything I say in this channel so looking at this thing it's it's kind of a convoluted example but if you're using something like Amazon and then you're integrating with their service AWS Secrets manager when your page loads for the first time sometimes there'll be secrets that you have to fetch from uh like AWS secret manager right this is a service that basically keeps track of all your secrets and allows your Lambda functions to call them to figure out what the value of those secrets are now what would you use these secrets to do will you use them to connect to a database you'd use them to sign a jdbt token Etc like that you would probably say git secret here and this could connect to a secret manager and return you a secret value and then you can use that secret over here to basically do some computation connect to a database or whatever and then you basically get that data and you can render it out and now I'm not doing all that in this function I just want to show you like the potential security vulnerability by simply like putting this in a closure but notice here that basically you click the form it calls do something we pass this secret into do something technically this thing could connect to a DB using the secret or technically this could actually just fetch this secret here that'll probably be the safest approach to be honest but but just so I can demo this vulnerability I'm just going to do it like this so notice if I were to load up my terminal and I go back to my app and I click submit notice that it says we are doing something here with a secret yeah but let's say you decide that you wanted to actually like instead of having to pass this secret here let's say you actually wanted to just say okay well I can just put a closure here right I just put a closure so I don't have to do all this like hacky logic and I could just have this secret completely accessible right here right because due to the closure I have access to secret right so I can kind of refactor this code a little bit I'll save it so it's the same code but we just basically are using the closure so we have access to the secret so that we don't have to like refetch it every time or do whatever so I'm actually going to console log this and again this secret should only ever console log on the back end it should never cause log on the front end and let's go back to our front end code let's refresh I'll just type in like Bob and click submit and notice that in the console it doesn't print out the secret anywhere which is good there's a giant warning I don't know what that warning's from but if we look at the network request this is where stuff gets a little scary if you look down here you will see our secret password I probably should have named it something better but that's it right there that's the secret password that was returned from your secret manager and we basically anyone who's using your UI can just go in here look at the post request and all that information has been exposed across the payload that's been sent to the back end now my secret key no one in the UI should see let me just do this again so like it makes more sense when I'm demoing this this should not show anywhere in your front end right no one should be able to look at your network Tab and see that the secret key is right here that can connect to your database or your postgres database this is bad so why is this happen again I'm not an expert at next or react I'm just trying to like use my intuition of what might be happening but when you do that post request like when that server action fires somehow the backend needs to be able to like recompute all of the state that was in this um function so that when it tries to run your server action here it knows what secret is because if it didn't have like a way to re reevaluate like what this closure is and what all these variables are then like this could never work right so I think they're doing some smart stuff to basically look at the closure look at the variables that are like accessible to that uh function and then basically send them across the wire as like hidden input fields on your form post request so that's the interesting thing I think Theo also like responded to this and like pointed it out that like this is kind of sketch I probably end up making a video about this too so let's see if I beat him to it but yeah I just you know I read through the tweet I didn't understand what the heck they're talking about so I had to like dive into it and really understand so the the key takeaway is if you're using server actions which isn't which is a which is something that is in Alpha I should say so like don't look at this and be like oh we should never use server actions you should never use it in production anyway because it's an alpha version of a feature okay so if you're looking at this I'm like oh man this is scary my suggestion would be make sure that your server code is actually running on the server so like I would fetch this secret here and then you have no issues right don't do anything silly like I just did make sure that your code is like a separate function probably you want to make it like a pure function as well so that it's not doing any type of closure state that it has access to notice that when I submit it there's like nothing that's sent over to the wire anymore it's just the input that was typed in so I thought that was pretty interesting um I'm not a security expert but I just thought it was nice to kind of dive deeper into understanding how this stuff really works and maybe share something with you all who are watching if you enjoyed watching this give me a thumbs up comment subscribe press the Bell icon and uh like always I have a Discord Channel you're welcome to join if you want to find a place to hang out or just ask questions to other Developers uh other than that have a good day and happy coding

Channel: Web Dev Cody

Views: 10,122

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: fdKcbyEK66M

Length: 6min 42sec (402 seconds)

Published: Sun May 07 2023