I have read that form validations on client-side is not enough to prevent any malicious actions from users. For that case i have read that is needed to validate the form on the server-side too. Since i am first time using express, can someone give me a clue for what i need to do?

I'm leaving here the html form and the js validation function. My form doesn't have the "action" and "methods" for test purposes. I know that the "action" leads to my validation page and the method is POST on this specific case.

Is it safer to create a module for the validation and then call it on the server.js? or can i code it inside of the server.js?

HTML

     <div  id="frmcntn">
     <!--Form Creation with method POST, JavaScript input validations and php file validation-->
     <form action="" method=""  id="formBoard" name="formOfBoard" onsubmit="validateIndexForm(event)">
     <!--Close Button of the pop up-->
                    <div  onclick="closeForm()">
                        <img src="images/square-x.png" alt="close icon">
                    </div>

                    <!--Form with the necessary inputs (Name of the Board, IP Address, Port and upload file). All the inputs are required-->
                    <div >
                        <h3>Add new board:</h3>
                    </div>
                    <!--Input for the boards name with max length of 50 characters-->
                            <div >
                                <label for="bname">Name of the Board: *</label><br>
                                <input type="text" id="boardname" name="boardname" placeholder="Ex: Board 1" maxlength="50">
                            </div>
                            <!--Input for the IP Address that can only accept IP's and with a max length of 15 characters-->
                            <div >
                                <div >
                                    <label for="ipadd">IP Address: *</label><br>
                                    <input type="text" name="ipadd" id="ipaddress" placeholder="Ex: 192.168.1.1" maxlength="15">
                                </div>
                            </div>
                            <!--Input for the Port that can only accept numbers with a max length of 4-->
                            <div >
                                <div >
                                    <label for="portnum">Port: *</label><br>
                                    <input type="text" name="portnum" id="portnum" placeholder="Ex: 8080" maxlength="4" minlength="2">
                                </div>
                            </div>
                            <!--Input for the upload of the boards image that can only accept .png files-->
                            <div >
                                <div >
                                    <label for="imgadd">Upload image:</label><br>
                                    <img src="images/file-upload.png" alt="Insert image"  name="imageboard" id="insertimage">
                                    <input type="file" id="myFile" name="filename" onchange="fileValidation(event)">
                                </div>
                            </div>
                            <!--'Save' and 'Discard' buttons -->
                            <div >
                                <div >
                                    <div >
                                        <input type="submit"  value="Save">
                                        <div   onclick="discardValues()">Discard</div>
                                    </div>
                                </div>
                            </div>
                    </form>
                </div>

JS Validation

function validateIndexForm(event){
    let x = document.getElementById("boardname").value;
    let y = document.getElementById("ipaddress").value;
    let z = document.getElementById("portnum").value;
    let w = document.getElementById("myFile").value;

    let ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;;
    
    if(x == ""){
        //prevent the form submit
        event.preventDefault();
        alert("Please insert the boards name");
        return false;
    }
    if(!y.match(ipformat) && !y === "localhost"){
        //prevent the form submit
        event.preventDefault();
        alert("Please insert a valid IP address");
        return false;
    }
    if(z != isNaN() && !(z > 0)){
        //prevent the form submit
        event.preventDefault();
        alert("Please insert the correct port");
        return false;
    }
    if(w == ""){
       event.preventDefault();
        alert("Please insert a valid image");
        return false;
    }
    return x, y, z, w;
}

The uploaded file is getting validated on other function successfully.

CodePudding user response：

You can just do the same thing in the post request code on your server side.

Ex:

app.post('/register', (req, res) => {
  let username = req.body.username;
  let password = crypto.createHash('sha256').update(req.body.password).digest('base64');
  let repassword = crypto.createHash('sha256').update(req.body.repassword).digest('base64');
if(password != repassword) return res.redirect('/login');
});

You can also do queries in your redirect like this:

res.redirect('/login/?e=4&t=l');

And parse them client side to display errors like passwords do not match.

CodePudding user response：

Whether you create a module for the validation and bring it in to your server file or code the logic directly into your server file, it does not affect security and produces the same behavior.

For securing your server-side form validation, I recommend a tool like express-validator in combination with a body-parser.

Check out this article for a hands-on approach to the above mentioned setup.