HTML知识点总结的表单元素

网页不可能是纯静态的,没有外的并行作用;绝大多数的网站都发出表单元素的以。表单提供了一个浏览者和网站交互的路子,比如用户注册登录,用户留言齐职能。

简介
  CSRF(Cross-site
request forgery跨站请求伪造,也于称“One Click Attack”或者Session
Riding,通常缩写为CSRF或者XSRF,是一致种对网站的恶意用。尽管放起来如跨站脚本(XSS),但她同XSS非常例外,并且攻击方式几乎相左。XSS利用站点外的亲信用户,而CSRF则透过伪装来自于信赖用户的呼吁来运为信赖的网站。与XSS攻击相比,CSRF攻击往往无杀流行(因此对该展开防的资源为相当罕见)和麻烦防范,所以叫当比较XSS更兼具危险性。

  • form

场景

form元素只是一个多少获得元素的器皿,而容器内之要素称为表单控件。让表单数据会交给,可以将表明单元素包裹在<form>之中,最常用之表单控件是input元素。form元素为块级元素。

     
某程序员大神God在某个在线银行Online Bank给他的对象Friend转账。

  • form的严重性性能

  

name属性:指定表单的号。

  

action属性:规定将说明单元素数据交到到哪个页面。

  转账后,出于好奇,大神God查看了网站的源文件,以及捕获到转会的伸手。

method属性:规定为何种方式提交表单数据,取值如下:

   

(1)get:默认值,通过url方式传输,并且最好酷莫可知超越1k,安全性为不是太好。

  

(2)post:传输上大小及从未有过界定,并且安全性良好,不经过url传输。

  大神God发现,这个网站没有召开防止CSRF的方,而且他好为生一个生出早晚访问量的网站,于是,他计划于好之网站上内嵌一个躲的Iframe伪造请求(每10s殡葬一不行),来等待鱼儿Fish上钩,给协调转账。

novalidate属性:是HTML5初长的一个性,规定当提交表单时莫对准该进行验证。

  网站源码:

autocomplete属性:是HTML5新增加的一个特性,规定表单是否应当启用自动完成功能。当用户以字段开始键入时,浏览器基于前键入过之价值,应该亮有当字段中填入的取舍项。

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 4     <title></title>
 5 </head>
 6 <body>
 7 <div>
 8     我是一个内容丰富的网站,你不会关闭我!
 9 </div>
10 
11 <iframe name="frame" src="invalid.html" sandbox="allow-same-origin allow-scripts allow-forms"  style="display: none; width: 800px; height: 1000px;"> </iframe> 
12 <script type="text/javascript">
13     setTimeout("self.location.reload();", 10000);
14 </script>
15 </body>
16 </html>
  • input

   伪造请求源码:

​input是殊有力的表单控件,它的最主要性能有:

 1 <html>
 2 <head>
 3     <title></title>
 4 </head>
 5 <body>
 6 <form id="theForm" action="http://localhost:22699/Home/Transfer" method="post">
 7     <input class="form-control" id="TargetUser" name="TargetUser" placeholder="用户名" type="text" value="God" />
 8     <input class="form-control" id="Amount" name="Amount" placeholder="转账金额" type="text" value="100" />
 9 </form>
10 
11 <script type="text/javascript">
12     document.getElementById('theForm').submit();
13 </script>
14 </body>
15 </html>
  1. name属性:用于规定input元素的称号
  2. accept属性:用来规定能够通过文件上传进行提交的文件类型,该属性只能与type=”file”配合使用。
  3. checked属性:规定当页面加载时应受先行选定的input元素,checked属性只能在input元素type=”radio”或type=”checkbox”时以。
  4. disabled属性规定应剥夺input元素。被剥夺的字段是匪能够修改的。
  5. readonly属性:规定输入字段为只读。
  6. maxlength属性:规定输入字段的不过酷长,以字符个数计,该属性只能于input元素type=”text”或type=”password”的下以。

  7. input的type属性:​

   

  text   
定义单行的输入字段,用户可于里头输入文本

  鱼儿Fish打开了大神God的网站,在上头浏览丰富多彩的情。此时冒充请求的结果是这样的(为了演示效果,去丢了隐藏):

  password 定义密码字段。该字段中的字符被掩码

   

  file    定义输入字段和
“浏览”按钮,供文件及污染

  因为鱼儿Fish没有登陆,所以,伪造请求一直无法尽,一直跳反回登录页面。

  radio  
定义单选按钮

  然后鱼儿Fish想起了若登录在线银行Online
Bank查询内容,于是他登录了Online Bank。

  checkbox 定义复选框

  这冒充请求的结果是这么的(为了演示效果,去丢了藏匿):

  hidden  
定义隐藏的输入字段

   

  button  
定义可点击按钮(多数情景下,用于通过JavaScript启动脚本)

  鱼儿Fish每10秒会给大神God转账100正。

  image  
定义图像形式之付按钮

   

  reset   
定义重置按钮。重置按钮会去掉表单中之所有数据

 

  submit  
定义提交按钮。提交按钮会拿表单数据发送到服务器

防止CSRF

  CSRF能不负众望是为同一个浏览器会共享Cookies,也就是说,通过权认证与认证是无力回天预防CSRF的。那么应该怎么防范CSRF呢?其实防止CSRF的方很粗略,只要确保请求是友好的站点来之饶可以了。那怎么保请求是现于自己的站点也?ASP.NET以Token的样式来判断请求。

  我们需要以咱们的页面生成一个Token,发请求的时光将Token带达。处理要的上要验证Cookies+Token。

  

  

  这假冒请求的结果是这样的(为了演示效果,去丢了影):

  

 

$.ajax

  如果自己之求不是通过Form提交,而是经过Ajax来付,会咋样也?结果是说明不经过。

  

  为什么会即刻则?我们回头望加了@Html.AntiForgeryToken()后页面及请的变型。

  1.
页面多矣一个隐藏域,name为__RequestVerificationToken。

  

  2.
呼吁被为基本上了一个字段__RequestVerificationToken。

  

  原来要加以这么个字段,我为加以一个免就好了!

    

  啊!为什么要不行…逼我放大招,研究源码去!

  

  噢!原来token要由Form里面取。但是ajax中,Form里面连没东西。那token怎么收拾也?我把token放到碗里,不对,是坐header里。

   js代码:

 1 $(function () {
 2             var token = $('@Html.AntiForgeryToken()').val();
 3 
 4             $('#btnSubmit').click(function () {
 5                 var targetUser = $('#TargetUser').val();
 6                 var amount = $('#Amount').val();
 7                 var data = { 'targetUser': targetUser, 'amount': amount };
 8                 return $.ajax({
 9                     url: '@Url.Action("Transfer2", "Home")',
10                     type: 'POST',
11                     data: JSON.stringify(data),
12                     contentType: 'application/json',
13                     dataType: 'json',
14                     traditional: 'true',
15                     beforeSend: function (xhr) {
16                         xhr.setRequestHeader('__RequestVerificationToken', token);
17                     },
18                     success:function() {
19                         window.location = '@Url.Action("Index", "Home")';
20                     }
21                 });
22             });
23         });

   以服务端,参考ValidateAntiForgeryTokenAttribute,编写一个AjaxValidateAntiForgeryTokenAttribute:

 1 [AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
 2     public class AjaxValidateAntiForgeryTokenAttribute : FilterAttribute, IAuthorizationFilter
 3     {     
 4         public void OnAuthorization(AuthorizationContext filterContext)
 5         {
 6             if (filterContext == null)
 7             {
 8                 throw new ArgumentNullException("filterContext");
 9             }
10 
11             var request = filterContext.HttpContext.Request;
12 
13             var antiForgeryCookie = request.Cookies[AntiForgeryConfig.CookieName];
14             var cookieValue = antiForgeryCookie != null ? antiForgeryCookie.Value : null;
15             var formToken = request.Headers["__RequestVerificationToken"];
16             AntiForgery.Validate(cookieValue, formToken);
17         }
18     }

   然后调用时拿ValidateAntiForgeryToken替换成AjaxValidateAntiForgeryToken。

   

  大功告成,好出成就感!

全局处理

  如果具有的操作请求都如加以一个ValidateAntiForgeryToken或者AjaxValidateAntiForgeryToken,不是殊累呢?可以以有地方联合处理为?答案是好的。

  ValidateAntiForgeryTokenAttribute继承IAuthorizationFilter,那即便当AuthorizeAttribute里做联合处理吧。

  ExtendedAuthorizeAttribute:

 1 public class ExtendedAuthorizeAttribute : AuthorizeAttribute
 2     {
 3         public override void OnAuthorization(AuthorizationContext filterContext)
 4         {
 5             PreventCsrf(filterContext);
 6             base.OnAuthorization(filterContext);
 7             GenerateUserContext(filterContext);
 8         }
 9 
10         /// <summary>
11         /// http://www.asp.net/mvc/overview/security/xsrfcsrf-prevention-in-aspnet-mvc-and-web-pages
12         /// </summary>
13         private static void PreventCsrf(AuthorizationContext filterContext)
14         {
15             var request = filterContext.HttpContext.Request;
16 
17             if (request.HttpMethod.ToUpper() != "POST")
18             {
19                 return;
20             }
21 
22             var allowAnonymous = HasAttribute(filterContext, typeof(AllowAnonymousAttribute));
23 
24             if (allowAnonymous)
25             {
26                 return;
27             }
28 
29             var bypass = HasAttribute(filterContext, typeof(BypassCsrfValidationAttribute));
30 
31             if (bypass)
32             {
33                 return;
34             }
35 
36             if (filterContext.HttpContext.Request.IsAjaxRequest())
37             {
38                 var antiForgeryCookie = request.Cookies[AntiForgeryConfig.CookieName];
39                 var cookieValue = antiForgeryCookie != null ? antiForgeryCookie.Value : null;
40                 var formToken = request.Headers["__RequestVerificationToken"];
41                 AntiForgery.Validate(cookieValue, formToken);
42             }
43             else
44             {
45                 AntiForgery.Validate();
46             }
47         }
48 
49         private static bool HasAttribute(AuthorizationContext filterContext, Type attributeType)
50         {
51             return filterContext.ActionDescriptor.IsDefined(attributeType, true) ||
52                    filterContext.ActionDescriptor.ControllerDescriptor.IsDefined(attributeType, true);
53         }
54 
55         private static void GenerateUserContext(AuthorizationContext filterContext)
56         {
57             var formsIdentity = filterContext.HttpContext.User.Identity as FormsIdentity;
58 
59             if (formsIdentity == null || string.IsNullOrWhiteSpace(formsIdentity.Name))
60             {
61                 UserContext.Current = null;
62                 return;
63             }
64 
65             UserContext.Current = new WebUserContext(formsIdentity.Name);
66         }
67     }

   然后当FilterConfig注册一下。

    

  FAQ:

  1. BypassCsrfValidationAttribute凡呀坏?不是生个AllowAnonymousAttribute吗?

  如果有点操作而切莫待举行CSRF的拍卖,比如附件上传,你可于相应的Controller或Action上加加BypassCsrfValidationAttribute。

  AllowAnonymousAttribute不仅会绕了CSRF的拍卖,还会见绕了证实与认证。BypassCsrfValidationAttribute绕过CSRF但未绕了证实与验证,

呢尽管是BypassCsrfValidationAttribute作用为那些登录还是授权后底Action。

 

  2.
怎么只有处理POST请求?

  我付出之上来一个口径,查询都为此GET,操作用POST,而对于查询的乞求没有必要举行CSRF的处理。大家可以以自己的用去安排!

  

  3.
我开了大局处理,然后还在Controller或Action上加了ValidateAntiForgeryToken或者AjaxValidateAntiForgeryToken,会冲为?

  不会见冲,只是验证会做少潮。

 date     
定义选取日、月、年之输入域
 month   
 定义选取月、年的输入域

源码下载

  为了方便使用,我并未用其他数据库,而是用了一个文件来囤积数据。代码下载后可一直运行,无需配置。

  下载地址:https://github.com/ErikXu/CSRF

 

文章转载自:http://www.cnblogs.com/Erik_Xu/p/5481441.html

 
  time   
  定义选取月、年的输入域

  • select下拉列表

下拉列表由<select>和<option>标签配合以生成。下拉的菜单项是出于<option>标签定义,当提交表单,选中的option的value属性值会给发送。

<select>标签还有一定量单主要性质:

(1)multiple:规定select下拉菜单可以选多项,默认情况下下拉列表只能选择同一桩。

(2)size:规定下拉列表展开以后可见列表项的数。