Web安全之XSS攻击demo
环境：
本地html文件，IE浏览器（谷歌会屏蔽跨域请求，需要部署什么的操作，这里一切从简），django后台，mysql数据库
前端
前端代码（将注册、登录、首页三个页面集合在一起）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
//注册请求
function regi(){
username = document.getElementById(1).value
password = document.getElementById(2).value
nickname = document.getElementById(3).value
$.ajax({
type: 'POST',
url: "http://127.0.0.1:8000/regist",
header:{
ContentType:'application/x-www-form-urlencoded'
},
data: {username:username,password:password,nickname:nickname},
dataType:'json',
success: function(res){
if(res.state=='ok'){
alert("注册成功")
}else{
alert('注册失败')
}
},
});
}
//登录请求
function login(){
username = document.getElementById(4).value
password = document.getElementById(5).value
$.ajax({
type: 'POST',
url: "http://127.0.0.1:8000/login",
header:{
ContentType:'application/x-www-form-urlencoded'
},
data: {username:username,password:password},
dataType:'json',
success: function(res){
console.log(res)
if(res!=null && res != ''){
alert('登录成功')
document.getElementById(6).innerHTML = res[0].nickname
}else{
alert('登录失败')
}
},
});
}
</script>
</head>
<body>
<div align="center" style="padding-top: 100px;border:1px;border-style: solid;padding-bottom: 100px">
<h2>注册</h2>
<input id=1 type='text' placeholder="用户名" value="" />
<input id=2 type='text' placeholder="密码" value="" />
<input id=3 type='text' placeholder="昵称" value="" />
<input onclick="regi()" type="button" value="点击">
</div>
<div align="center" style="padding-top: 100px;border:1px;border-style: solid;padding-bottom: 100px">
<h2>登录</h2>
<input id=4 type='text' placeholder="用户名" value="" />
<input id=5 type='text' placeholder="密码" value="" />
<input onclick="login()" type="button" value="点击">
</div>
<div align="center" style="padding-top: 100px;border:1px;border-style: solid;padding-bottom: 100px">
<h2>首页</h2>
<div>
昵称：<p id=6></p>
</div>
</div>
</body>
</html>
前端界面展示（此处比较low逼，勿喷）：
在这里插入图片描述
后端
后端环境
利用破解版的pycharm专业版，或者社区版的pycharm创建一个django项目
-
安装pymysql库（用来连接数据库），记得修改settings.py统计目录下的init.py
import pymysql pymysql.install_as_MySQLdb() -
配置连接的数据库，将settings.py中的DATABASES修改为如下：
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'demo', 'USER': 'root', 'PASSWORD': '123456', 'HOST': '10.18.62.2', 'PORT': '3306' } } -
将项目名添加值settings.py的INSTALLED_APPS中，如下列的demo，如果不添加，后面可能会报引入models.py文件错误
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ‘demo' ] -
views.py文件代码，用于处理前端的请求
from django.http import HttpResponse from demo.models import Users from json import dumps def regist(request): nickname = request.POST.get('nickname') username = request.POST.get('username') password = request.POST.get('password') Users.objects.create(nickname=nickname,username=username,password=password) return HttpResponse(dumps({'state':'ok'})) def login(request): username = request.POST.get('username') password = request.POST.get('password') res = list(Users.objects.filter(username=username,password=password).values()) return HttpResponse(dumps(res)) -
url.py文件代码，用于将前端请求的url映射到指定的方法进行处理
from django.urls import path from demo import views urlpatterns = [ #注册 path('regist', views.regist), #登录 path('login', views.login) ]
正常演示
- 正常注册
在这里插入图片描述
-
正常登录
在这里插入图片描述 -
正常显示
在这里插入图片描述
XSS攻击演示
-
XSS注册：将显示与界面上的字段，用html标签来注册，这里显示的字段是nickname，写成：
//超链接标签指向我的csdn博客中的一篇文章，这个超链接包含了这篇文章中的一张图片，效果：点击这张图片会跳转至我的博客 <a href='https://blog.csdn.net/qq_41860162/article/details/89178215'><image src='https://img-blog.csdnimg.cn/20190410112515201.png' /></a>
在这里插入图片描述
-
XSS登录：与正常登录一样
在这里插入图片描述 -
XSS显示
在这里插入图片描述 -
点击后跳转至我的csdn中的一片文章
在这里插入图片描述
原理
由于用户输入的数据可能带有具有攻击行的html标签或者js代码，而浏览器将用户的输入直接渲染出来所以会造成这样的效果
避免
- 将特殊字符过滤或者转义
- 良好的代码习惯，多思考自己的代码会不会有没有漏洞
代码
小结
欢迎各位大佬进来讨论，共同进步
