How to use and retrieve Get/Post Request variables with NodeJS and EJS-CodePudding

I'm currently using NodeJs/Express and EJS for my web application. My goal was to build a simple page, with an input field, for testing XSS attacks. I'm not too experienced with building server-side applications. I was wondering how to send/retrieve the inputs from my text field. And how do I add a CSS file?

// app.js
var express = require("express");
var path = require("path");

var routes = require("./routes"); // defines routes


var app = express();


app.set("port", process.env.PORT || 3000); // defines port
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: false}));

app.use(routes);
app.listen(app.get("port"), function() { 
    console.log("Server started on port: "   app.get("port"));
});

// routes.js
var express = require("express");

var router = express.Router();

router.get('/', function(req, res, next) {
    console.log("Hello I'm on the start page here.");
    res.render('index', {page:'Home', menuId:'home'});
  });
  
  router.get('/about', function(req, res, next) {
    res.render('about', {page:'About Us', menuId:'about'});
  });
  
  module.exports = router; // export variables

// header.js
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>XSS</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    </head>
    <body>
        <div class="navbar navbar-default navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">XSS-Cross-Site-Scripting</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/about">About</a></li>
                    <li><a href="/login">Log in</a></li>
                </ul>
            </div>
        </div>
        <div class="container">
//footer.js

</div>
</body>
</html>

// index.js
<%- include ("_header.ejs"); %>
    <h1 style="text-align: center;">Welcome to Cross-Site-Scripting</h1>
    <div style="margin: auto; width: 50%; padding: 80px; border: 3px solid blue;">
    <form id="contact-form" action="/send" method="POST">
        <div style="text-align: center;" class="input-group">
           <input type="text" class="form-control" name="userInput" placeholder="Enter something..." aria-label="Recipient's username" aria-describedby="basic-addon2">
           <div class="input-group-append">
                <button class="btn btn-outline-secondary" id="searchBTN" type="submit"><i class="fas fa-cart-plus mr-2"></i>Send</button>
         </div>
      </div>
     </form>
     <h1 style="text-align: center;"><%= userInput %></h1>
    </div>
<%- include ("_footer.ejs"); %>

CodePudding user response：

So, you are sending data to the server so you need to have a POST HTTP request.

app.post('/add', (req, res) => {
    let inputText = [];
    inputText.push(req.body.userInput)
    res.render('index', {
        inputText,
    });
});

Now to get the value from the user input you need to write the below code in your index.ejs file

 <% if (locals.inputText){ %>
    <% inputText.forEach(function (text) { %>
            <h5><%= text %></h5>
       <% }) %>
    <% } %>