如何使用和检索 Get/Post 请求变量与 NodeJS 和 EJS

Question

我目前正在为我的 Web 应用程序使用 NodeJs/Express 和 EJS。我的目标是构建一个带有输入字段的简单页面，用于测试 XSS 攻击。我在构建服务器端应用程序方面经验不足。我想知道如何 send/retrieve 来自我的文本字段的输入。以及如何添加 CSS 文件？

// 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"); %>

Answer 1

因此，您正在向服务器发送数据，因此您需要一个 POST HTTP 请求。

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

现在要从用户输入中获取值，您需要在 index.ejs 文件中编写以下代码

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

如何使用和检索 Get/Post 请求变量与 NodeJS 和 EJS

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

javascript

post

get

ejs

node.js