Node.js与Handlebars表单数据安全传输方法

前端（Handlebars模板中的正确实现）：

<form action="/donaciones/ingresos" method="POST">
    <div class="form-group">
        <label for="cedula">Cedula donante:</label>
        &lt;input type=&quot;number&quot; name=&quot;cedula&quot; id=&quot;cedula&quot; value=&quot;&quot; placeholder=&quot;Cedula donante&quot; autofocus&gt;
        <button type="submit" class="btn btn-primary">Buscar</button>
    </div>
</form>

关键改进点：

1. 标签： 将输入字段和按钮包裹在标签内。
2. action属性： 指定表单数据提交的目标URL。这里我们假设提交到/donaciones/ingresos。
3. method="POST"： 明确指定使用HTTP POST方法提交数据。对于创建、更新或包含敏感信息的请求，POST是更安全和推荐的选择。
4. ： 确保按钮类型为submit，这样点击按钮时，表单数据才会被发送。
5. name属性： input标签的name属性（例如name="cedula"）至关重要，它定义了数据在提交时使用的键名。后端将通过这个键名来访问对应的值。

重要：后端路由的调整

当前端使用POST方法提交表单数据时，后端也必须相应地调整其路由和数据获取方式。

后端（Node.js/Express中处理POST请求的路由）：

// 确保在你的Express应用中启用了body-parser中间件来解析POST请求体
// 例如：app.use(express.urlencoded({extended: false}));
// 或 app.use(express.json());

router.post('/donaciones/ingresos', isLoggedIn, async (req, res) => {
    // 从请求体中获取cedula，因为前端使用了name="cedula"
    const { cedula } = req.body; 

    // 执行数据库查询
    const donante = await pool.query('SELECT * FROM donantes WHERE cedula = ?', [cedula]);

    if (donante.length < 1) {
        req.flash('message', 'Donante no registrado!');
        res.redirect('/donantes/ingreso_donantes');
    } else {
        // 渲染页面并传递查询结果
        res.render('donaciones/donaciones_ingreso', { donante : donante[0] });
    }
});

关键调整点：

1. router.post()： 将路由方法从get改为post，以匹配前端表单的method="POST"。

2. 路径匹配： 路由路径应与前端表单的action属性匹配（/donaciones/ingresos）。

3. req.body： 对于POST请求，表单提交的数据会存储在req.body对象中。我们需要通过input标签的name属性来访问数据，例如req.body.cedula。

4. body-parser中间件： Express框架默认不解析请求体。你需要配置body-parser（或Express内置的express.urlencoded()和express.json()）中间件来解析POST请求体。通常在app.js或index.js中进行如下配置：

   const express = require('express');
   const app = express();
   
   // 解析URL编码的请求体（用于HTML表单提交）
   app.use(express.urlencoded({ extended: false })); 
   // 解析JSON格式的请求体（如果你的前端也发送JSON数据）
   // app.use(express.json()); 

总结与最佳实践

• 服务器端渲染 vs. 客户端交互： Handlebars等模板引擎在服务器端渲染，它们无法响应用户在浏览器中进行的实时输入或交互。对于需要动态捕获用户输入的场景，应使用HTML表单或客户端JavaScript。
• 使用HTML表单： HTML 标签是发送用户输入到后端的标准方式。它提供了method（GET/POST）和action属性来控制数据如何以及发送到何处。
• GET vs. POST：
  • GET请求： 数据通过URL的查询字符串（例如/search?query=keyword）发送。适用于获取数据、无副作用的操作，且数据量较小、不敏感。数据会显示在浏览器历史记录和书签中。
  • POST请求： 数据通过请求体发送。适用于提交表单、创建/更新资源、发送敏感数据或大量数据。数据不会显示在URL中，更适合安全性要求较高的场景。
• 后端数据获取：
  • 对于GET请求，路径参数通过req.params获取（例如/user/:id中的id）。查询字符串参数通过req.query获取（例如/search?q=node中的q）。
  • 对于POST请求，表单数据通过req.body获取（需要配置body-parser或express.urlencoded()）。
• 安全性考虑： 永远不要直接信任来自前端的数据。在后端处理任何用户输入之前，务必进行严格的输入验证、清理和消毒，以防止SQL注入、XSS等安全漏洞。

通过遵循这些原则，开发者可以确保Node.js和Handlebars应用能够安全、高效地处理用户输入，提供稳定可靠的用户体验。

以上就是《Node.js与Handlebars表单数据安全传输方法》的详细内容，更多关于的资料请关注golang学习网公众号！