Web安全-XSS攻击demo

迈不过友情╰ 2022-02-17 03:32 327阅读 0赞

# 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逼，勿喷）： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70]

## 后端 ##

### 后端环境 ###

*  利用破解版的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)
          ]

### 正常演示 ###

*  正常注册

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 1]

*  正常登录  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 2]
 *  正常显示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 3]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 4]

*  XSS登录：与正常登录一样  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 5]
 *  XSS显示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 6]
 *  点击后跳转至我的csdn中的一片文章  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 7]

### 原理 ###

由于用户输入的数据可能带有具有攻击行的html标签或者js代码，而浏览器将用户的输入直接渲染出来所以会造成这样的效果

### 避免 ###

*  将特殊字符过滤或者转义
 *  良好的代码习惯，多思考自己的代码会不会有没有漏洞

## 代码 ##

[demo][]

## 小结 ##

欢迎各位大佬进来讨论，共同进步

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70]: /images/20220217/16a5f6be62964c13950ab65fe969bbf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 1]: /images/20220217/ee1463b548a6448a863381381e400a22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 2]: /images/20220217/48c9676173e54a588de943afa2c953e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 3]: /images/20220217/604d77ede55644bd87a362a1ad97157e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 4]: /images/20220217/41c67dff88784a6c8959c088d86d7f4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 5]: /images/20220217/254d4e92eab44f13984f6d714745ae27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 6]: /images/20220217/8c2fb40b171442ac962811d6f3a809e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODYwMTYy_size_16_color_FFFFFF_t_70 7]: /images/20220217/3376bac0320b4f34b86ead7b371b41f4.png
[demo]: https://download.csdn.net/download/qq_41860162/11126383