一、開場先科普下XSS
跨站腳本攻擊(Cross Site Scripting),為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆,故將跨站腳本攻擊縮寫為XSS。惡意攻擊者往Web頁面里插入惡意Script代碼,當用戶瀏覽該頁之時,嵌入其中Web里面的Script代碼會被執行,從而達到惡意攻擊用戶的目的。
二、直接上代碼實例
在線演示:https://wall-wxk.github.io/blogDemo/2017/01/19/noEncode.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>encode防止xss攻擊</title>
</head>
<body>
<input type="text" id="myInput" />
<button onclick="toSubmit();">提交</button>
<p id="myText" class="demo">hello world!</p>
<script type="text/javascript">
function toSubmit(){
var myText = document.getElementById("myText"),
myInput = document.getElementById("myInput"),
inputValue = myInput.value;
myText.innerHTML = inputValue;
}
</script>
</body>
</html>
實例解釋:這是網站生產環境抽離出來的簡化代碼。在公司的產品中,有很多輸入框提供給用戶輸入一些自定義字符串。方便用戶的同時,也會招惹一些黑客過來搗亂。最簡單的就是xss注入攻擊。
比如上面的實例,我在輸入框直接輸入內容 <h1>wall</h1>
,得到的結果如下:
這種結果,肯定不是產品所想要的。
進一步鼓搗,輸入內容 <script>alert('wall');</script>
如果這段字符串是保存在數據庫里。那么下次用戶刷新這個頁面,alert方法將會被執行,也就是會彈出 wall 這個信息。
因為能插入js代碼,那這個想象空間就很大了,幾乎很多事都能干。
最簡單的就是用js獲取訪問當前網站的用戶的document.cookie,然后ajax發送到信息收集網站,那么用戶就等于在裸泳了。
三、解決方式-對字符串進行轉義后再輸出
- 1.在存儲進數據庫的時候,對字符串進行encode
這種方式可以解決一部分問題,但是不夠靈活。因為字符串有可能輸出在html,也有可能輸出在JavaScript代碼中。 - 2.在使用字符串的時候進行encode
這種方式是根據使用場景,在前端輸出時,按需求進行encode,靈活應對。
四、直接上encode方法
function encodeHtml(html){
return html && html.replace ?
(
html.replace(/&/g, "&") //轉換&符號
.replace(/ /g, " ") // 轉換空格
.replace(/\b +/g, " ") // 轉換多個空格為單個空格
.replace(/</g, "<") // 轉換小于符號
.replace(/>/g, ">") // 轉換大于符號
.replace(/\\/g, "\") // 轉換斜杠符號
.replace(/\'/g, "'") // 轉換單引號
.replace(/\"/g, """) // 轉換雙引號
.replace(/\n/g, "<br/>") // 轉換換行符號
.replace(/\r/g, "") //轉換回車符號
)
: html;
}
代碼的作用是把對應的特殊符號,轉換為轉義字符,而不是直接插入html中。
這樣,不管用戶輸入什么內容,都可以直接轉換成字符串輸出在html中。
比如再次輸入內容 <script>alert('wall');</script>
,得到的結果如下:
perfect!直接把xss漏洞給堵上了!
五、科普下轉義字符
更多內容,可以查看HTML轉義字符表
在線演示:https://wall-wxk.github.io/blogDemo/2017/01/19/xss.html
最后,附上完整的測試代碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>encode防止xss攻擊</title>
</head>
<body>
<input type="text" id="myInput" />
<button onclick="toSubmit();">提交</button>
<p id="myText" class="demo">hello world!</p>
<script type="text/javascript">
function toSubmit(){
var myText = document.getElementById("myText"),
myInput = document.getElementById("myInput"),
inputValue = myInput.value;
myText.innerHTML = encodeHtml(inputValue);
}
function encodeHtml(html){
return html && html.replace ?
(
html.replace(/&/g, "&") //轉換&符號
.replace(/ /g, " ") // 轉換空格
.replace(/\b +/g, " ") // 轉換多個空格為單個空格
.replace(/</g, "<") // 轉換小于符號
.replace(/>/g, ">") // 轉換大于符號
.replace(/\\/g, "\") // 轉換斜杠符號
.replace(/\'/g, "'") // 轉換單引號
.replace(/\"/g, """) // 轉換雙引號
.replace(/\n/g, "<br/>") // 轉換換行符號
.replace(/\r/g, "") //轉換回車符號
)
: html;
}
</script>
</body>
</html>
![]() |
不含病毒。www.avast.com |