作者:谢文友649 | 来源:互联网 | 2023-02-04 10:44
我正在写一个实现用户管理系统的网站,我想知道我必须考虑哪些关于表单处理的最佳实践.
特别是性能,安全性,SEO和用户体验对我来说非常重要.当我处理它时,我遇到了几个问题,我没有找到一个完整的节点/快速代码片段,在那里我可以找出我以下的所有问题.
使用案例:有人将更新其个人资料的生日.现在我正在对同一个URL执行POST请求以处理该页面上的表单,POST请求将使用302重定向到同一URL进行响应.
关于表单处理的一般问题:
我应该为表单处理执行POST请求+ 302重定向,还是像AJAX请求那样做其他事情?
我应该如何处理无效的FORM请求(例如,无效登录或电子邮件地址已在注册期间使用)?
表达有关表单处理的具体问题:
我假设在将任何内容插入我的数据库之前,我需要清理并验证服务器端的所有表单字段.你会怎么做?
我读了一些关于CSRF的事情,但我从未实施过CSRF保护.我也很高兴在代码片段中看到它
使用Express处理表单时是否需要处理任何其他可能的漏洞?
示例HTML/Pug:
form#profile(method='POST', action='/settings/profile')
input#profile-real-name.validate(type='text', name='profileRealName', value=profile.name)
label(for='profile-real-name') Name
textarea#profile-bio.materialize-textarea(placeholder='Tell a little about yourself', name='profileBio')
| #{profile.bio}
label(for='profile-bio') About
input#profile-url.validate(type='url', name='profileUrl', value=profile.bio)
label(for='profile-url') URL
input#profile-location.validate(type='text', name='profileLocation', value=profile.location)
label(for='profile-location') Location
.form-action-buttons.right-align
a.btn.grey(href='' Onclick='resetForm()') Reset
button.btn.waves-effect.waves-light(type='submit')
路由处理程序示例:
router.get('/settings/profile', isLoggedIn, profile)
router.post('/settings/profile', isLoggedIn, updateProfile)
function profile(req, res) {
res.render('user/profile', { title: 'Profile', profile: req.user.profile })
}
function updateProfile(req, res) {
var userId = req.user._id
var form = req.body
var profile = {
name: form.profileRealName,
bio: form.profileBio,
url: form.profileUrl,
location: form.profileLocation
}
// Insert into DB
}
注意:我们非常感谢完整的代码片段,其中包含了适用于给定示例的所有表单处理最佳实践.我可以使用任何公开的快速中间件.