`

Ajax环境下表单防重复、外部提交实现方案记要

阅读更多

背景:

js lib: Ext 3.3.0,未使用 struts、Spring MVC;

 

所有的表单都由 Ext js 方法生成(即非传统 http form 形式, http 源代码中无 form 元素),后台 http request -> action 的处理机制是和 struts、Spring MVC 的实现相仿。

 

方案核心:

通过 token 机制来防止表单重复或外部提交(非常非常的寻常)。

 

方案实现:

如果用 struts 就简单了,加个<s:token/> 再配个 TokenInterceptor 就搞定了 (存在漏洞,详见底部)。

如果用 Spring MVC 就简单了,写个 TokenHandlerInterceptor extends HandlerInterceptorAdapter 再配置下也搞定了。

 

不用 struts、Spring MVC 其实也简单,参考 Spring MVC 在  http request -> action 的处理中加上拦截器机制,再参考 struts 实现 TokenInterceptor 就搞定了。

 

关于 token 值的提交方式:由于form非常规,无法往 form 里添加 token 元素,既然放不到 request body 里,那就放到 request header 里,放到 header 里其实相对来说更灵活些(另外似乎还能避免1个漏洞,详见底部)。

 

Ext request 加 header :

 

Ext.Ajax.defaultHeaders = {
    'Req-Token': tokenValue
};

注:header 的名称是不区分大小写的,根据实际测试情况,IE下通常会把 header 名称都变成小写,而 Firefox 和 Chrome 基本上不会改变,header 名称和我们代码里所写的名称是一致的。后台获取 header 值时需注意这个情况。

 

同样的,response 里也加个 header,将新的 token 值传给客户端。

不专门提供一个获取 token 值的 servlet 的原因:主要是怕该 servlet 压力过大。

 

另外,不能将 token值的提交和form提交分开,必须在同一个请求中同时提交,原因:分开提交无法防止外部提交等非法提交方式。

 

关于是否需要进行 token 校验:由于 TokenInterceptor 配上了,则默认会对所有 request 均校验,为了支持按需进行校验,自定义了@Token 注解,需要校验的action方法只要加上 @Token 即可(注解是个好东西)。

 

特别注意:

CSRF

CSRF攻击原理解析

Struts2 csrf token绕过漏洞

 

分享到:
评论

相关推荐

    ajax 无刷新实现表单提交

    简单的ajaxt无刷新实现表单提交的实例(myeclipse 直接导入运行) 学习点: 1;ajax无刷新表单提交 2;ajax的运行历程 最简单明了的实例,清晰的帮你弄清上述概念,运行简单,只需解压该包,然后Myeclipse中file - ...

    jq ajax提交表单

    完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 &lt;form id="myForm" action="comment.php" method="post"&gt; Name: &lt;input type="text" name="name" /&gt; Comment: &lt;...

    javascript方式防止表单重复提交

    在Web开发中,表单重复提交是一个常见的问题,可能导致数据的冗余或错误。JavaScript作为客户端脚本语言,可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点: 1. **禁用提交按钮**:最...

    ajax方式提交表单,全局提交

    "ajax方式提交表单,全局提交"这个主题涉及到的是如何利用AJAX来实现表单数据的异步提交,从而避免页面刷新,提高用户交互性。 AJAX表单提交的核心在于使用JavaScript库,比如jQuery,来处理表单的提交事件。在提供...

    防止表单重复提交(asp.net )

    - 使用异步处理:使用Ajax提交表单,可以避免页面整体刷新,减少重复提交的机会。 - 提供明确的用户反馈:当表单成功提交后,显示清晰的反馈信息,告知用户操作已完成,防止他们因不清楚状态而多次尝试。 综上所...

    vue12ajax提交表单

    vue1/2 ajax提交表单

    ajax提交表单小例子

    在网页开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。本示例主要涉及如何使用AJAX来提交表单,并解决在...

    ajax提交表单到后台

    利用jquery的ajax提交表单数据到后台。后台使用spring.

    完成的 Ajax 提交表单

    本示例着重介绍如何使用Ext JS框架中的Ajax组件来实现异步提交表单,以及如何处理success和failure回调。 首先,Ext JS是一个强大的JavaScript库,用于构建富客户端应用程序。它提供了丰富的组件模型和数据绑定机制...

    利用ajax提交表单完整流程

    利用ajax提交表单完整流程

    ajax提交form表单和上传图片

    jquery.js + jquery-form.js + springMVC实现ajax提交form表单和上传图片,上传图片成功js可以获取图片保存相对路径。

    非常简单的ajax表单提交

    jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.

    修改禁止多次重复提交

    总的来说,防止用户多次重复提交是一个多维度的解决方案,需要前端、后端和数据库共同协作。前端通过禁用按钮防止用户快速点击,后端通过session或token机制确保请求的独特性,数据库则作为最后一道防线,确保数据的...

    ajax验证并提交表单的两种方法博客源码

    本资源通过ajax实现对提交的form表单的验证,该代码不但有针对property验证,也有针对object验证,还有一个异步获取对象的实例;包含完整的代码和库文件;在myeclipse8.5和apache-tomcat-6.0.30测试通过;访问网址:...

    Asp+ajax提交表单实例

    接下来,我们将深入探讨Asp+Ajax提交表单的实例,以及如何实现这一功能。 首先,我们需要理解Ajax的核心概念。Ajax并非一种编程语言,而是利用JavaScript、XMLHttpRequest对象和DOM(Document Object Model)来实现...

    Ajax使用jQuery提交表单 文件

    Ajax使用jQuery提交表单 文件

    ajax 防止按钮重复提交

    防止用户误操作,重复提交

    php+ajax表单无刷新验证

    PHP与AJAX(Asynchronous JavaScript and XML)结合的表单验证技术可以实现无刷新验证,即在用户输入时即时检查数据有效性,无需等待完整的表单提交,从而显著提升交互体验。 **一、AJAX基础** AJAX 是一种创建...

    ajaxForm异步提交表单(含图片)

    ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)

    ajax异步提交表单

    ajax提交的jq版本,相当实用

Global site tag (gtag.js) - Google Analytics