第十六天：JS-Ajax&前端逻辑&购物&登录&上传

1、JS 前端验证-文件上传

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用 JavaScript 来验证其正确性：

验证表单数据是否为空？

验证输入是否是一个正确的email地址？

验证日期是否输入正确？

验证表单输入内容是否为数字型？

2、JS-Ajax 传递-登录-状态

3、JS-Ajax 传递-购物-参数

1、文件上传 – 类型 – 过滤 设计：通过 JavaScript 进行文件后缀筛选验证

验证上传文件的是否符合要求既可以通过前端js代码验证，也可以通过后端PHP代码验证

他们的区别如下：

前端的任何代码都可以被检查网页源代码检测出来

后端的任何代码在没有拿到源码之前都无法被识别出来

通过禁用JS代码可以绕过js的前端验证

判断前端验证是否为JS代码：

1.直接查看网页源代码

2.通过时间戳判断

2、状态回显 – 登录 – 状态码

设计：通过 Ajax 传递数据进行用户登录验证

Ajax的基本架构：

$.ajax({          
            url:"发送请求（提交或读取数据）的地址", 
         dataType:"预期服务器返回数据的类型",  
         type:"请求方式", 
         async:"true/false",
         data:{发送到/读取后台（服务器）的数据},
         success:function(data){请求成功时执行}, //此步产生状态码     
         error:function(){请求失败时执行}
});

Ajax（Asynchronous Javascript And XML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式

异步的JavaScript

它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据

XML

是前后端数据通信时传输数据的一种格式，现在已经不怎么用了，现在比较常用的是 JSON

所以归纳上述的概念，Ajax就是在浏览器不重新加载网页的情况下，对页面的某部分进行更新

3、参数修改 – 购物 – 参数修改 设计：通过 Ajax 传递数据进行购物验证

设计 1：商品价格以前端设置价格为准，数据接收价格后运算

抓取数据包篡改数据即可以绕过前端验证。

设计 2：商品价格以数据库对应价格为准，数据接收价格后运算

此案例中，前端代码接收数据库价格数据并且发送，后端代码接收前端发送的价格数据，但是后端控制代码并没有从数据库中取出数据，所以同样也可以通过抓取数据包篡改数据来达到攻击目的。但是如果后端代码不从前端接收价格，而是从数据库中直接接收价格，那么此攻击将无效。

设计 3：商品价格以数据库对应价格为准，数据只接受数量后运算

修改了数据包中的商品价格，依然不影响最终结果，因为后端直接接收数据库中的商品数据。

但是

如果将购买数量修改为非正整数，那么此时将依据计算机自主判断，例如，数量=0.01，-1，0.09等。

设计 4：商品价格以数据库对应价格为准，数据只接受数量后做过滤运算

正常设计。

今天有关的内容主要是介绍了前端语言传递信息的过程。其中涉及到了代码逻辑存在的漏洞和可操作空间，如果进行验证的是前端验证，服务器返回给浏览器一个状态码，并由浏览器通过状态码进行进一步判断从而决定下一步的回显页面，存在篡改接收数据从而达到目标的操作。

如果返回结果是json文件，数据包中存在code,msgbox这样的字段，那么大部分都是前端验证

演示案例：

JS&Ajax 前端&上传&登录&购物

某违法 APP 登录找回密码验证机制（验证短信验证码）：

先利用自己的账号进行找回密码功能

通过抓取数据包，找到返回数据包中正确的返回状态码

再对目标账号进行找回密码操作

随意输入验证码，抓到返回的数据包

修改返回数据包中的状态码为正确的状态码

操作结束后，成功进入修改密码界面

这个例子中的app的状态码并非随机，非动态的状态码，并且采用的是前端验证，所以我们可以利用它的唯一状态码进行找回操作。

如果状态码是随机且动态的，即使我们利用自己的正确状态码进行操作，依旧无法绕过前端验证。