当前位置: 代码迷 >> Web前端 >> Java-web置重复提交、动态验证码
  详细解决方案

Java-web置重复提交、动态验证码

热度:139   发布时间:2012-11-23 00:03:43.0
Java-web放重复提交、动态验证码
一、项目中可能产生重复提交的情况:
    1,由于服务器缓慢或网络延迟的原因,重复点击提交按钮.
    2,已经提交成功,刷新成功页面(forward).
    3,已经提交成功,通过回退,再次点击提交按钮.
    注意:
1,回退后,刷新表单页面,再次提交这时不是重复提交,而是发送新的请求
2,在Firefox下,重复提交到同一地址无效
二、解决表单重复提交方案:

  1、方案一,利用javaScript:
    解决了反复点击按钮的重复提交请求,但是没有解决刷新页面重复提交.
	var flag=false;
	function save(){
	     if(!flag){
	     	document.forms[0].submit();
	     	flag=true;
	     }else{
	     	alert("您已经提交了页面");
	     }
	 }

    注意:
         如果使用的<input type="submit">,则需要将form表单的onsubmit="return false;",或者将submit按钮的onClick="return save()",并让save方法始终返回flase;

  2、利用唯一的随机字符串(使用session)
   (1)UUID:
        包含有FORM表单的页面必须通过一个服务器程序动态产生,服务器程序为每次产生的页面中的FORM表单都分配一个唯一的随机标识号,并在FORM表单的一个隐藏字段中设置这个标识号,同时在当前用户的Session域中保存这个标识号。
        当用户提交FORM表单时,负责接收这一请求的服务器程序比较FORM表单隐藏字段中的标识号与存储在当前用户的Session域中的标识号是否相同,如果相同则处理表单数据,处理完后清除当前用户的Session域中存储的标识号。在下列情况下,服务器程序将忽略提交的表单请求:
    当前用户的Session中不存在表单标识号
    用户提交的表单数据中没有标识号字段
    存储在当前用户的Session域中的表单标识号与表单数据中的标识号不同
    浏览器只有重新向WEB服务器请求包含FORM表单的页面时,服务器程序才又产生另外一个随机标识号,并将这个标识号保存在Session域中和作为新返回的FORM表单中的隐藏字段值。

使用UUID防止重复提交的步骤 :
a、使用UUID类可以生成随机字符串
b、getUUIDString,生成UUID值并存放到session中
c、验证,通过表单中传来的uuid值与session中的值进行对比.
4、重置uuid值.

示例代码:
package cn.itcast.cd.util;

import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.lang3.StringUtils;

public class TokenUtil {

	public static void getToken(HttpServletRequest request) {
		String randomValue = UUID.randomUUID().toString(); // 往session中值
		String randomName = UUID.randomUUID().toString();// 往session中名字

		request.setAttribute("randomValue", randomValue);
		request.setAttribute("randomName", randomName);
		request.getSession().setAttribute(randomName, randomValue);
	}

	/**
	 * 请求表单中的随机数和session中的随机数对应上 return true
	 * 
	 * @param request
	 * @return
	 */
	public static Boolean validate(HttpServletRequest request) {
		// 得到页面上传递过来的..
		String randomValue = request.getParameter("randomValue");
		String randomName = request.getParameter("randomName");

		// 得到session中的
		String randomValueInSesson = (String) request.getSession()
				.getAttribute(randomName);
		return StringUtils.isNotBlank(randomValueInSesson)
				&& StringUtils.isNotBlank(randomValue)
				&& randomValue.equals(randomValueInSesson);
	}

	public static void resetToken(HttpServletRequest request) {
		String randomName = request.getParameter("randomName");
		request.getSession().removeAttribute(randomName);
	}
}

   (2)strut1的同步令牌
   (3)利用Session实现一次性验证码
     一次性验证码的主要目的就是为了限制人们利用工具软件来暴力猜测密码,其原理与利用Session防止表单重复提交的原理基本一样,只是将表单标识号变成了验证码的形式,并且要求用户将提示的验证码手工填写进一个表单字段中,而不是通过表单的隐藏字段自动回传给服务器。
    服务器程序接收到表单数据后,首先判断用户是否填写了正确的验证码,只有该验证码与服务器端保存的验证码匹配时,服务器程序才开始正常的表单处理流程。
    密码猜测工具要逐一尝试每个密码的前题条件是先输入正确的验证码,而验证码是一次性有效的,这样基本上就阻断了密码猜测工具的自动地处理过程。
   
    Servlet输出图形验证码:
      BufferedImage用于生成内存图形
      BufferedImage image=new       BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
      Graphics用于生成可绘制的图形对象
      Graphics g=image.getGraphics();
      g.fillRect(0, 0, width, height);//填充矩形
      g.drawRect(0, 0, width-1, height-1);//绘制矩形
      g.setFont(new Font("宋体",Font.BOLD,35));//设置字体
      g.drawString(rank, codeX*(i+1), codeY);//输出字符串
      g.drawOval(x, y, 0, 0);//绘制混淆线
      g.dispose();
      ImageIO对象,用于输出图片
      ImageIO.write(image, "jpg", response.getOutputStream());//输出图片

附:IE7  firefox验证码没有反应问题   
    出现的问题:在IE6下面图片修改正常,但在IE7和Firefox下面却不刷新
    情况分析:如果新的图片跟旧的图片地址不一样,效果是会出来的。即:图片有发生改变。 但像”验证码“这种功能,由于是servlet动态生成的图片,新旧图片的地址是一样的。鉴于上述情况,有可能是因为图片地址是一样的,而导致浏览器自动读缓存。

    解决方法一(利用随机数)
     ?把javascript改成这样即可: ??function nextpic(){
            var img_=document.getElementById("pic");    
            img_.src="${pageContext.request.contextPath}/
                   imageServlet?"+Math.random();
       }
???    即:每次的访问地址都不一样,因为有加随机数。所以问题解决 。
    解决方法二(利用时间戳)
     ?把javascript改成这样即可:
      function nextPic(){
           alert(Date.parse(new Date()));
           var pic=document.getElementById("pic");
           pic.src="${pageContext.request.contextPath}/
imageServlet?"+Date.parse(new Date());
      }

      Date.parse(): 解析一个包含日期的字符串,并返回该日期与 1970 年 1 月 1 日午夜之间所间隔的毫秒数

示例代码:
package cn.itcast.cd.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.lang3.StringUtils;

public class LoginServlet extends HttpServlet {
	/**
	 * @see HttpServlet#service(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		String code = request.getParameter("code");
		String randomCode = (String) request.getSession().getAttribute(
				"randomCode");
		if (StringUtils.equalsIgnoreCase(code, randomCode)) {
			System.out.println("执行正常的业务逻辑");
		} else {
			request.setAttribute("error", "验证码出错");
			request.getRequestDispatcher("/login.jsp").forward(request,
					response);
		}
	}

}

package cn.itcast.cd.servlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import java.util.UUID;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class RandomCodeServlet
 */
public class RandomCodeServlet extends HttpServlet {
	protected void service(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		String randomCode = (UUID.randomUUID().toString()).substring(0, 4);
		request.getSession().setAttribute("randomCode", randomCode);

		response.setContentType("image/jpeg"); // 因为向客户端发送的内容是图片. 所以用这种内容类型

		int width = 100;
		int height = 50;
		// >>1.创建一个图片对象
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_BGR);

		// >>2.得到画布
		Graphics graphics = image.getGraphics();

		// >>3.开始在图片上画画

		// >>3.1 用白色填充. 首先要设置上下文的颜色
		graphics.setColor(Color.white);// 设置白色
		graphics.fillRect(1, 1, width - 2, height - 2);

		// >>3.2 用黑色写文字
		graphics.setColor(Color.black);
		graphics.setFont(new Font("宋体", Font.BOLD, 30));
		graphics.drawString(randomCode, width / 6, height / 2 + 5);

		// >>3.3 画混淆内容
		graphics.setColor(Color.red);
		for (int i = 0; i < 50; i++) {
			graphics.fillOval(new Random().nextInt(width),
					new Random().nextInt(height), 3, 3);
		}
		for (int i = 0; i < 10; i++) {
			graphics.setColor(new Color[] { Color.red, Color.blue, Color.GRAY }[new Random()
					.nextInt(3)]);
			graphics.drawLine(new Random().nextInt(width),
					new Random().nextInt(height), new Random().nextInt(width),
					new Random().nextInt(height));
		}

		// >>4.关闭画布,释放资源...
		graphics.dispose();
		// 输出图片

		ImageIO.write(image, "JPG", response.getOutputStream());
	}

}


<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function changeImage() {
		document.getElementById("randomCode").src = "/randomCode?"
				+ Math.random();解决点击验证码没有反应问题
	}
</script>
</head>
<body>
	<form action="/login" method="post">
		用户名:<input name="username" type="text"><br /> 密码:<input
			name="password" type="password"><br /> 验证码:<input name="code"
			type="text"><img alt="" src="/randomCode" id="randomCode"
			style="cursor: pointer;" onclick="changeImage()"> ${error}<br />
		<input type="submit" value="登录">
	</form>
</body>
</html>
  相关解决方案