背景

本学期信息安全工程的实验项目。要求做一个基于击键认证(KeyStroke)的项目,可以根据登录用户的信息输入的特征来进行辅助认证。我们这里直接选用了Django来搭建了web登录平台。击键指纹算法的主要步骤如下:

1
2
3
4
通过键盘敲击时不同的按下及释放时间可以产生如下三种特征值:
1. Hold:同一个按键按下到释放之间的时间间隔
2. Down-Down:第一个按键按下到第二个按键按下之间的时间间隔
3. Up-Down:第一个按键释放到第二个按键按下之间的时间间隔

图一

三元组(Hold, Down-Down, Up-Dwon)在三维坐标中标记一个点的位置。注册时记录用户按键的信息,即一连串三元组组成的点集(在数据库中直接存储按键的时间戳信息),并且设置阈值信息。登录验证时获取登录时的按键信息,重新组织成三元组信息还原成对应点集,之后分别计算相应点的直线距离,如下图所示。若在密码文本信息输入正确的前提下,每个相应点对之间的距离均小于阈值则验证成功。

图二

前端部分通过js记录用户输入信息时按键的按下抬起两个瞬间的时间戳信息,传入后端,后端验证判断即可。

在验证的时候出现了一个问题,前端通过ajax发送的信息,后端使用render做出响应,如果通过验证,提示登录成功并跳转到index页面,但是前端一直没有反应,也没有发生跳转。一开始我以为是代码写的有问题,但是无论怎么改,还是没反应,也无法实现重定向redirect。后来发现原来是使用了ajax的原因。

关于ajax和Django的render

Ajax这个术语源自描述从基于 Web 的应用到基于数据的应用。Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

Ajax 是一种独立于 Web 服务器软件的浏览器技术。ajax只是做局部提交,重定向并不是其中的动作,所以无法实现重定向。Ajax只是利用脚本访问对应url获取数据而已,不能做除了获取返回数据以外的其它动作了,所以浏览器端是不会发起重定向的。正常的http请求,只有浏览器和服务器两个参与者。浏览器端发起一个http请求,服务器端处理后发起一个重定向,浏览器端从response中获取到重定向地址,发起另一个http请求。也就是说,浏览器会按照response中的内容进行响应(如重定向),这是浏览器的功能决定的就得响应。

Ajax请求,参与者就有三个即ajax、客户端、服务器,ajax处于客户端和服务器两者之间。引入ajax后,服务器给浏览器的response被ajax拦截了,但是ajax本身却什么都不做,也不转达。所以前端就一直拿不到后端发送的render/redirect等信息,所以没有反应。那这样该怎么办呢?

如何解决?

既然ajax只能获取后端传来的数据而不能执行其他动作,这就意味着通过ajax,前端只能看到后端传来的数据而看不到要执行的动作,那这不就好办了~直接把要执行的动作通过数据信息传送到前端好了,前端通过判断数据信息进而决定要执行什么动作。但是这样也会有一定的安全风险。如果后端发送的数据包被恶意篡改,比如告诉前端去加载输入密码的页面,并且发送到指定的地址,那就有可能会导致敏感信息泄露问题。但是这种方法一般可以通过csrf屏蔽掉。总之,我们是现实了前端能够响应后端的跳转请求了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 后台代码

###########################################################################

if check():
message = "注册成功!" # 直接写成中文了,别提多鸡肋了。。。
return JsonResponse({'msg': message, 'username': username})

###########################################################################

# 前台代码

###########################################################################

success:function(data,status){
alert(data.msg);
if (data.msg == '注册成功!'){
window.location = '/login/'; // 注册成功后直接跳转到登录页面
}else{
window.location = '/register/'; // 否则留在登录页面
}
}

###########################################################################

最后欣赏一下我们做得稀巴烂的登录注册页面吧~

注册

登录

Reference

Django中使用ajax无法重定向


声明:
文章标题:Django使用ajax后调用render前端无法跳转
文章作者:RookieHacker
文章链接:http://blog.rookiehacker.org/2019/11/08/renderandajax/
文章版权属本博主所有,有问题或者建议欢迎在下方评论。欢迎转载、引用,但请标明作者和原文地址,谢谢。


喜欢,就支持我一下吧~