Web安全之XSS攻擊demo
環(huán)境：
本地html文件，IE瀏覽器（谷歌會屏蔽跨域請求，需要部署什么的操作易迹，這里一切從簡），django后臺平道，mysql數(shù)據(jù)庫
前端
前端代碼（將注冊睹欲、登錄、首頁三個頁面集合在一起）：
<!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="點(diǎn)擊">
</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="點(diǎn)擊">
</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逼一屋，勿噴）：
在這里插入圖片描述
后端
后端環(huán)境
利用破解版的pycharm專業(yè)版窘疮，或者社區(qū)版的pycharm創(chuàng)建一個django項(xiàng)目
-
安裝pymysql庫（用來連接數(shù)據(jù)庫），記得修改settings.py統(tǒng)計(jì)目錄下的init.py
import pymysql pymysql.install_as_MySQLdb() -
配置連接的數(shù)據(jù)庫冀墨，將settings.py中的DATABASES修改為如下：
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'demo', 'USER': 'root', 'PASSWORD': '123456', 'HOST': '10.18.62.2', 'PORT': '3306' } } -
將項(xiàng)目名添加值settings.py的INSTALLED_APPS中瀑罗，如下列的demo咽袜，如果不添加坝辫，后面可能會報(bào)引入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映射到指定的方法進(jìn)行處理
from django.urls import path from demo import views urlpatterns = [ #注冊 path('regist', views.regist), #登錄 path('login', views.login) ]
正常演示
- 正常注冊
在這里插入圖片描述
-
正常登錄
在這里插入圖片描述 -
正常顯示
在這里插入圖片描述
XSS攻擊演示
-
XSS注冊：將顯示與界面上的字段虫腋，用html標(biāo)簽來注冊骄酗，這里顯示的字段是nickname，寫成：
//超鏈接標(biāo)簽指向我的csdn博客中的一篇文章悦冀，這個超鏈接包含了這篇文章中的一張圖片趋翻，效果：點(diǎn)擊這張圖片會跳轉(zhuǎn)至我的博客 <a ><image src='https://img-blog.csdnimg.cn/20190410112515201.png' /></a>
在這里插入圖片描述
-
XSS登錄：與正常登錄一樣
在這里插入圖片描述 -
XSS顯示
在這里插入圖片描述 -
點(diǎn)擊后跳轉(zhuǎn)至我的csdn中的一片文章
在這里插入圖片描述
原理
由于用戶輸入的數(shù)據(jù)可能帶有具有攻擊行的html標(biāo)簽或者js代碼，而瀏覽器將用戶的輸入直接渲染出來所以會造成這樣的效果
避免
- 將特殊字符過濾或者轉(zhuǎn)義
- 良好的代碼習(xí)慣雏门，多思考自己的代碼會不會有沒有漏洞
代碼
小結(jié)
歡迎各位大佬進(jìn)來討論嘿歌，共同進(jìn)步
