如何在 NodeJS 和 EJS 中使用和检索 Get/Post Request 变量

Question

我目前正在将 NodeJs/Express 和 EJS 用于我的 Web 应用程序。 我的目标是构建一个带有输入字段的简单页面，用于测试 XSS 攻击。 我在构建服务器端应用程序方面没有太多经验。 我想知道如何从我的文本字段发送/检索输入。 以及如何添加 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>
       <% }) %>
    <% } %>

如何在 NodeJS 和 EJS 中使用和检索 Get/Post Request 变量

问题描述

1 个解决方案

解决方案1
0 2021-10-22 03:51:52

如何在 NodeJS 和 EJS 中使用和检索 Get/Post Request 变量

问题描述

1 个解决方案

解决方案1 0 2021-10-22 03:51:52

解决方案1
0 2021-10-22 03:51:52