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>