如何在NodeJS与EJS项目中获取处理Get/Post请求参数及添加CSS文件

实现文本框输入内容的收发 #

1. 编辑你的routes.js文件，补充POST接收路由和初始变量传递：

var express = require("express");
var router = express.Router();

// 原有首页GET路由补充userInput默认值，避免模板渲染报错
router.get('/', function(req, res, next) {
    console.log("Hello I'm on the start page here.");
    res.render('index', {page:'Home', menuId:'home', userInput: ''});
});

// 新增表单提交对应的POST路由
router.post('/send', function(req, res, next) {
    // 直接从req.body获取表单中name为userInput的输入值
    const inputContent = req.body.userInput;
    // 把输入值传回模板渲染
    res.render('index', {page:'Home', menuId:'home', userInput: inputContent});
});

router.get('/about', function(req, res, next) {
    res.render('about', {page:'About Us', menuId:'about'});
});

module.exports = router;

2. XSS测试适配：
   如果需要实际触发XSS效果，把index.ejs里的<%= userInput %>替换为<%- userInput %>：

• <%=是EJS默认的安全输出语法，会自动转义HTML特殊字符，阻止XSS代码执行
• <%-是原样输出语法，不会做转义处理，输入的JS代码会被浏览器直接解析执行，符合你做XSS测试的需求。

添加自定义CSS文件 #

1. 编辑app.js，新增静态资源托管配置：

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

var app = express();

app.set("port", process.env.PORT || 3000);
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: false}));
// 新增这一行，托管public文件夹下的静态资源
app.use(express.static(path.join(__dirname, 'public')));

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

2. 在项目根目录新建public/css文件夹，放入你自己的CSS文件，比如style.css。
3. 编辑_header.ejs的head部分，引入自定义CSS：

<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">
    <!-- 新增这一行引入自定义CSS -->
    <link rel="stylesheet" href="/css/style.css">
</head>

内容的提问来源于stack exchange，提问作者Sythous