一、页面概述
login.jsp
是一个很常见的登录页面,用于用户登录网站或应用的账户。一般情况下,login.jsp
会包含两个输入框,分别是用户名和密码,同时还有一个提交按钮或者链接,用于应用对用户的登录信息进行验证,验证通过则跳转到其他页面,否则提示用户重新输入。
二、页面结构
login.jsp
的核心部分就是表单,包含了一个form
标签,通过form
标签将输入框、按钮等元素组合成一个整体,提交到后台。具体代码如下:
<form action="checkLogin.jsp" method="POST">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<label for="password">密码</label>
<input type="password" id="password" name="password">
<input type="submit" value="登录">
</form>
上述代码中,form
标签中的action
属性表示表单提交的地址,method
属性表示表单提交的方法,分别为POST
和GET
。label
标签和for
属性配合使用,可以使得点击label
标签时,对应的输入框获得焦点。input
标签中的type
属性表示输入框的类型,分别为text
和password
。submit
按钮表示提交按钮,其value
属性表示按钮上面的文本内容。
三、数据传输
login.jsp
页面中的表单提交方式为POST
,那么在提交表单的时候,用户输入的数据会被打包成一个HTTP请求并发送给后台,后台程序接收到该请求,解析其中的数据并进行相关的处理。在login.jsp
页面中,我们向后台传递了两个参数,一个是username
,一个是password
,那么在后台程序中需要通过request
对象对这两个变量进行获取,代码如下所示:
String userName = request.getParameter("username");
String password = request.getParameter("password");
上述代码中,getParameter()
方法用于获取表单提交中对应的参数,然后将其赋值给变量userName
和password
,这两个变量就是用户在页面上输入的用户名和密码。
四、表单验证
在用户提交表单之前,我们可以通过JavaScript代码对表单进行一定的验证,例如检查用户名是否为空或格式是否正确,是否输入了正确的密码等。验证方式有很多,可以使用正则表达式,也可以使用一些现成的表单验证库,比如jQuery Validation Plugin、Bootstrap Validator等。下面是一个简单的表单验证函数:
function validateForm(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username === ""){
alert("请输入用户名!");
return false;
}
if(password === ""){
alert("请输入密码!");
return false;
}
return true;
}
上述代码中,我们通过getElementById()
方法获取页面上对应的输入框元素,然后使用value
属性获取到用户输入的值。接着通过if
语句进行判断,如果用户名或密码为空,则使用alert
弹框提示用户,最后通过return
语句返回true
或false
,通知表单是否可以提交。
五、CSRF攻击
通过login.jsp
页面进行的表单提交可能存在CSRF攻击的风险,CSRF攻击(Cross-site request forgery)指的是攻击者盗用了你的身份,以你的名义发送恶意请求。此时,网站判断不出是否为本人操作而给予批准,造成了无法预计的损失。
为了避免此类攻击,可以使用一些防御机制,比如添加验证码、确认用户身份等。下面是一个简单的CSRF防御机制:
<input type="hidden" name="token" value="xxxx">
在表单中添加一个随机生成的token
(令牌),在用户提交表单时,后台程序需要检查token
是不是客户端页面上返回的有效token
,这样一来,攻击者就无法伪造有效的请求参数,从而有效地避免了CSRF攻击。