Lesson 18
Validating the Presence of Entry Text on the Server Side – Nodejs Express JSON API Tutorial
Summary
Lesson Summary: Server-Side Validation
In this lesson, we discussed the importance of validating user input on the server side, complementing client-side validation. Client-side validation can be bypassed, thus making server-side checks crucial.
Key Concepts
- Client vs. Server-Side Validation: Client-side validation is not secure because it can be manipulated by users. Server-side validation secures applications from invalid inputs.
- Handling Empty Inputs: When a user submits an empty text input, the server must validate it before processing.
Implementation Steps
-
Setup the Route: In the server code, specifically within the handler function (found in
server.js
around line 30), check if the input text is empty. -
Validation Check:
- Build the
new entry
object from the request body. - Validate the
text
property:- It must not be
undefined
,null
, or an empty string.
- It must not be
- Use fallacy values in JavaScript:
undefined
,null
, and empty strings are considered "falsy".
- Build the
-
Responding to Invalid Input:
- If the input is invalid, send back a
422 Unprocessable Entity
status code. - Include a descriptive error message, e.g.,
{"error": "entry text is required"}
. - Ensure to use
return
after sending the response to prevent further execution of the function.
- If the input is invalid, send back a
Testing Validation
- Utilized Postman to send requests to the server for testing:
- Successfully tested valid input, which returned a
200 OK
status. - Tested various invalid inputs, which correctly returned a
422
status with appropriate error messages.
- Successfully tested valid input, which returned a
Conclusion
We have implemented server-side validation to enhance input security and ensure the required data integrity by handling invalid entries appropriately. This lesson demonstrated essential practices for maintaining robust and secure web applications.
This concludes the summary. See you in the next lesson!
Video Transcript
In this lesson, we're going to learn to validate the entry on the server side.
So, if you don't type anything and you click right, from the client perspective, we are
going to get a narrow message. You need to type at least one character.
Now, client side validation is never tamper proof. That means anybody on the
client side can manage to bypass it. So, we also need to have validation on the
server side. We must have it also on the server side. Client side validation is
very weak. Anybody can bypass it. So, let's go to the code for server side.
Let's assume the user sent an empty, the text of the entry with no characters, an
empty string. So, how can we validate that? Well, you go to the route that handles
the creation of the entry. And that's here on server, in server.js line 30.
Here's the handler function and we see it's creating the new entry and pushing
to the array and memory that we have right now. Now, we cannot push if new
entry dot text, in this case the rack but body dot text is empty. So, we are going
to send back an error to the user and this will be this operation will not be
permitted. Okay, so let's break a line here. Go line 31. So, we got that new entry.
Well, let's see what I can do here, body dot text and so and so. So, let's do the
following. Well, I could do after the object here or I could do before. The
thing I'm thinking right now is because of this ID right now, we don't have a
database. So, usually we wouldn't set the ID here. We only have the ID after the
database operation succeeded. So, at this point we would not have an ID. So, let's
let's do the following. Let's try afterward. Let's make believe the ID is not
here. Okay, and I just messed up my window. Make believe the ID is not set yet.
Because ideally it wouldn't be set it would be here for example new entry dot
ID goes whatever and this would actually be done by the database. Let's let's
actually do that. I'm going to do that here just to simulate what we would
actually have later with the database. So, you have the client side sending some
body and then we try to build try first to get the all the accepted properties in
this case text only and that could be other ones after that is when you can
do the validation. So, we got that new entry build of course not saved yet. So,
let's do it. So, we can check new entry dot text. Well, what values could it be?
Well, first if the user doesn't give anything it could be undefined or it
could even be no if the user explicitly that did that or it could be finally
empty string. Right all the invalid cases. Invalid cases. We got those three, right?
Well, I can check if the new entry text is invalid. I can do something right. Now, I
want to check what first how can I check if it's even defined? Well, this one will
suffice as is actually because undefined is a fallacy what's called a fallacy
value. No, it's called a fallacy value and empty strings of fallacy value in
JavaScript. Okay, to illustrate that I could go here to the browser. On Soul tab
and the dev tools. And I can say, for example, if undefined, I'm gonna console
log. Yes, this will not work. This return value is from the actual way statement.
It's nothing to do with nothing was executed. That means yes was not shown to
the screen because this value, the condition was false undefined is false. So
that becomes false. Same thing goes for no, right? It's also fallacy value. And
same thing goes for empty string. All right. And you can verify with weak
comparison to double equals that this is false. Defined is not what I meant. Anyway,
let's go on. So this will suffice. But if you want to be explicit, you can also
say, okay, if the entry tax is undefined, or if the new entry tax is equal to no,
or new entry tax equal to empty string, this is a very explicit way of doing it.
Okay, you can do this. So if the first check is it undefined, right? Or if it
is not undefined, okay, it is something else. Is it no? Or the double pipe means
or right? So it's if this or that or that. So it's gonna check all these three
conditions, the first condition that matches that becomes true, it will
automatically take that and execute everything inside. It will not care about
everything afterwards. So if it was, if it was undefined, and this will be true,
it would ignore every single entry after the R because it already knows it's
undefined, it's invalid, already executes lie 41 without even bothering to look at
the remaining of the line. Okay, if you want to simplify, you could do like this.
For example, you can do double equal no, if you do a double equal no, that means
it's either no, or undefined. So if it's not undefined, invalid, and you enter
the text, find or can also check the length up to you. Or you can just leave
and do like this. That's another way of doing it. Because if this value were
undefined, it would take the inverse, right, the invert, falsely value becomes
true D. So this, this is true and execute everything inside. Same goes for our no
and empty string. Anyway, one thing you got to be careful about this one is if
you actually intended the value to accept any of these three values. So you want to
be careful about that. So perhaps I would go back to what I had before. Take care
of actually Emily, these other values. Anyway, let's finally do this after that
discussion. So if it's invalid, we don't want to add a new entry, right? We don't
want to do any of this. So first, we're going to send what's called an invalid
response. Well, there are several HTTP statuses we could use, right? Usually when
you get a successful, that's 200k. And you write you look at the network tab, you
got a status here, tab 200k. This is not going to be 200k. Okay. So the user
sent something that's okay, we got processed. I'm assuming it's a valid JSON
and everything. But only that the actual field itself is required. So the user
didn't really do anything wrong other than not typing what should have been
typed. But besides the formatting of the request and everything was fine. So we
can use unprocessable entry. That's 422. Okay, so I'm going to do res.status 422. And
I'm going to send some error message, for example. Maybe I could say message or whatever
error up to you to devise your own way of handling these things. I'm going to say,
entry text is required. And you have to be very careful here, you have to return. Because
if you don't return after this line, it's going to keep executing the code, even though
you set a response to be sent. So don't forget to return. So the code does not execute everything
afterward. Be careful. So you need that. Some people like to put it here before the
rest. I'm not in that league, I like to do it afterwards. So it's up to you. Let's say
this and go back. Let's now we have to test this now the front end. It already has the
validation. How can we bypass it? Well, I could look at the source and do some stuff
and try to bypass the code here and everything. Another way of using some sort of client that
can make client program that can make HTTP requests easily. It's a program that's convenient
for us developers to make those requests and to debug and test API's. One of those programs
called postman. And it's the one I'm going to use here. Mind you, there are many kinds
of these programs. You can even do this from the command line using the command crawl, for
example, it's up to you to use whatever you want. I'm going to demonstrate this debugging
with postman. So I have already downloaded it. And I'm going to click here, skip signing
in. And it's going to take me to this. I'm going to do some stuff here. So I don't care
about this right now. You want to So I want to click to get a new tab. You can see we
can make the request versus the verb. You can choose get or post. That's the one focusing
right now. So if we want to create a new entry that's post, and you give the URL in this case
is going to be HTTP colon slash slash local host, I think us 3000 right 3000 and slash
entries and point. Now to give the body to this request, right, you have to go to the
body tab here. Choose since we're dealing with Jason, let's do raw. And instead of text
to Jason. And then here in the text box, you type the Jason open braces. Now the first
key is going to be text under double quotes, make sure there's other double quotes, the
text on. Okay, let's first try without anything at all actually. Let's try something that
works. This works and then we're going to do the invalid cases. Okay, this is a new entry
that we want to add. Mind you, our API doesn't have any kind of authorization. So with anybody
can just do whatever right so that's why this client can just go there and do whatever.
If you had some sort of authorization, you would go under authorization perhaps and do
something or even change the header and add an authorization header here. But we're dealing
with very simple stuff starting from scratch. So that's not in the scope right now. Let's
focus on the request body here. We got that. Now I'm going to send. Let me watch first
the terminal here. Click send. And I had an error. What happened here? I forgot the zero
local is 3000 not 300. Okay, so if you don't have any logging in the server, I didn't see
anything but actually I got some 200 okay. And ideas for this works. Let's check the client
through the browser. Let's go to the browser. And I'm going to refresh. This works is here
now that work right now let's try. First let's try the case where the user does not send any
text key at all just an empty body. Let's try. We can send. Now you see the status now is 422
unprocessable unprocessable entry entity. And we got that response we created error entry text is
required. So that worked. Let's try the case where we actually pass no as a text value. This also
was validated for 22 unprocessable entity. Now let's try the empty text. Once again validated. Add
one letter at least. It works. So go here to the client and it's there a. So going back to the
code. Let's look at what we did. So we added validation to check if the text is has at least one
character right effectively. That's what this does. The way we did that was right after we
parsed the body right that is we just build a new entry that's not yet saved. We check is the text
no first is it undefined. Is it no or is it empty string if any of those cases match. We do a res
dot status 422 this will set the status code and you send dot send to send an actual JSON
object with the key error and the message here that the client can use to show this actual error in
the client side the web page. And don't forget to add return here otherwise the other parts of the
code were execute that's not what you want. All right. So for this lesson that's it. And I hope to
see you next time.
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: