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 "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 "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>

在这里插入图片描述