How Is This Code Safe?

Key Takeaways

this single line of code caused a huge uproar when nextjs was announcing version 14 because everyone thought that this squel library was causing SQL injection problems and was a huge liability but that's just because they didn't understand how template literals actually work and in this video I want to explain why this code is actually incredibly safe and the magic that's happening behind the scenes welcome back to web dev simplified my name is Kyle and my job is to simp the web for you so you can start building your dream project sooner and here's a simplified version of that code we were talking about and a lot of people had problem with this because they assumed that this was just normal string catenation so if the ID was something like this instead you can see that now we're running SQL code that's going to drop the entire usel table and this is called SQL injection and it's something you definitely want to avoid and this is why you don't want to generally do just normal string concatenation when you write SQL queries what people don't realize is this isn't just normal string concatenation instead we're using a fancy function version of tag template literals now I have an entire blog article going in depth over this topic but in this video I really want to cover kind of what this is and how it works if you've seen for example styled components before you may be used to writing code like this where you have you know a div and then you follow it up by writing your CSS like padding to pixels and then you may come down here and say like margin is going to be three pixels and then you also may know that you can actually use a fun inside of here so for example instead of my margin being 3 pixels I can instead use a function here with my string interpolation and this function is going to get my props and I can say like props do margin now you may be wondering if this is just using normal string concatenation how exactly would this work but it's not using just normal strink in catenation instead it's calling a function labeled div that it works in a very particular way so I'm going to show you how this would work with this SQL function for example so we can come in here and we can create a function called SQL and the SQL function is going to take in two or more parameters the very first parameter is going to be all of the strings so we're just going to call that strings and the second parameter or the second plus parameters are going to be all the different things you're interpolating so in our case it's going to be our ID so now what we can do is we can console log this information just to see what this looks like so we're going to have strings and we're going to have our ID now if I save this you'll notice on the right hand side of my screen we get this string right here as our second value this is our ID and then the first value we get an array with two different things in it the first is going to be all the stuff that comes before my string interpolation and the second value in the array is everything that comes after the string interpolation and if I were to for example have other text inside of here and then another thing of string interpolation let's just say 2 plus 2 and let's just add even more text after that now if I give it a say you can see inside here I have an array that has three different values inside of it to get all the text between all these different elements so essentially each value in my array is just going to be all the elements before a particular value and then it's going to be the stuff after that value after that value and so on and then our ID here is just our very first ID but if we wanted to for example get our second value this is going to be a number I'll log this out as well now if we get that save you can see we're getting that number four right here so generally when you're writing these different types of functions you're just going to get all of the different values inside of a rest parameter like this so now if I print out my values you can see that that's just going to give me everything that I pass in for string interpolation so we get this string as well as this number four the reason this is really important though is because I can actually do whatever I want with the values inside of here so whatever I return from the SQL function is what gets returned up here so if I just say const a is equal to this and I do a quick console. log of a and inside here instead of actually doing anything I'm just going to return the text high now you can see that this a value being logged is just high so whatever I return from this SQL function is what is going to get the return from actually calling this string interpolation in this fancy way now the really nice thing is what I can do is I can actually take these values for example our ID and I can wrap it so it's going to be San I ized when it's sent over to my database so a really easy way to do this is you just take all the values I'm going to map over each one of my values so I'm going to have a value inside of here and actually instead of mapping I'm going to do a quick reduce and inside this reduce really all I want to do is I want to combine together my string and my value I'm actually going to copy over the code to do this so I don't have to manually write this out we'll Zoom this out a little bit so it's easier to see but as you can see here we're taken all of our values we're reducing them down we have our final version of our string our current value as well as the index for a current value and all I'm doing is I'm taking the string I currently have and I'm adding on these values in this case I'm doing like a Bolding but if I wanted I could just wrap this inside of like quotes so I can come in here wrap this inside quotes if I wanted to do some type of like quotation sanitization and now this is going to give me essentially this string but all my specific values are going to be wrapped in quotes so you can see over here select star from users where and you can see that the entire first string I pass it is wrapped in quotes and this number four is wrapped inside a quotes So they are being sanitized and then I can go a step further and instead of just returning this string I could actually call out to my specific database if I wanted to so since I don't want to actually set up a database connection or anything let's actually change this code to be something entirely different I'm going to paste down a brand new function this one's called query all and all this does is you're going to pass it whatever you want and it's going to do a query selector on that exact thing so I can come in here and I could say I want to query all and let's just say I'm going to pass in the value of div and now when I run this it's going to try to get all the different divs on my page so we can just say const a equals that and then we can console log out a so now if I just go to my index page and let's just add some divs inside of here so I'm going to say div 1 2 and three and this one I'll make a span so we should only see that we're getting values one and two being returned from us and if we look over here you can see we have two divs inside of here and if we were to actually look at the text value inside of them we should see that these are one and two so it's only getting the specific div values for us and this again works just fine if I were to do string interpolation inside of here and I wanted to pass in the value V like that you can see it's still getting me both of those different divs so this is kind of how that fancy string interpolation is working it's taking those different values from that SQL it's wrapping them inside of quotes or whatever it needs to do to sanitize them then it's calling the database and it's returning those database values from it so it's just kind of a fancy way of calling a function but calling it specifically with a string and doing fancy stuff with the values that are being passed in now if this video interested you and you want to learn more about this I highly recommend checking out my blog article on the topic I'll link it in the description and the comments ments below