如何通过 NodeJS 和 EJS 使用和检索 Get/Post Request 变量答案

【问题标题】：How to use and retrieve Get/Post Request variables with NodeJS and EJS如何通过 NodeJS 和 EJS 使用和检索 Get/Post Request 变量
【发布时间】：2021-10-20 08:34:23
【问题描述】：

我目前正在为我的 Web 应用程序使用 NodeJs/Express 和 EJS。我的目标是构建一个带有输入字段的简单页面，用于测试 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"); %>

【问题讨论】：

您想从文本字段发送信息并在下一页检索该信息吗？
我想使用文本字段中的输入进行 POST 并在同一页面上显示。

标签： javascript node.js post get ejs

【解决方案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>
       <% }) %>
    <% } %>

【讨论】：

效果很好，感谢您的回答。如果你能帮忙，我还有一个问题？这是关于执行如下脚本：<script>alert(1);</script>
没有，但是ejs使用了所有的js逻辑，所以如果你对js很熟悉，那么你可以马上使用ejs 。