1. 什麼是 JavaScript 注入攻擊？
每當接受用戶輸入的內容並重新顯示這些內容時，網站就很容易遭受 JavaScript 注入攻擊。讓我們研究一個容易遭受 JavaScript 注入攻擊的具體應用程序。假設已經創建了一個客戶反饋網站。客戶可以訪問網站並輸入對產品的反饋信息。當客戶提交反饋時，反饋信息重新顯示在反饋頁面上。
舉個例子
首先， 我在某個輸入框中輸入js代碼
<script type="text/javascript"> alert("我是javascript代碼！");</script>
然後發送都後臺，傳送的數據是這樣的
存到數據庫是這樣的
最後一步，就是存到數據庫後，前臺頁面再去取數據的時候，就··········
執行你的js代碼了。
我現在只是做測試例子，不是惡意攻擊。外面的世界太複雜，說不定哪天你的網站就中獎了，所以還是得處理下這塊。
方法
利用jq做還是蠻方便的
/*對html標籤進行轉義*/
function htmlEncode(value){ //value爲輸入的值
return $('<span/>').text(value).html(); //.這裏的span標籤沒啥含義，換着其他標籤也可以，div，p a都行
}
/*對html標籤進行反轉義*/
function htmlDecode(value){
return $('<span/>').html(value).text();
}直接上例子，看的清楚些。
將` <script type="text/javascript"> alert("我是javascript代碼！");</script>` 轉義後的結果
然後把轉義後的字符串發給後臺就好了。
等到前端要取這條數據的時候，你要是顯示
<script type="text/javascript"> alert("我是javascript代碼！");</script>
這樣的話，直接把後臺返回的數據，
var str = "<script type="text/javascript"> alert("我是javascript代碼！");</script>"
$("#container").html(str);// 直接html，不需要再反轉義哈測試代碼附上:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<style type="text/css">
#textarea {
width: 500px;
height: 200px;
margin: 0 auto;
display: block;
}
.div {
width: 800px;
margin: 0 auto;
}
</style>
<textarea id="textarea">
</textarea>
<!-- <script type="text/javascript"> alert("我是javascript代碼！");</script> -->
<div class="div">
<button id="re">轉義</button> <button id="re2">反轉義</button>
<h4>轉義</h4>
<p id="show"></p>
<h4>反轉義</h4>
<p id="show2"></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
(function(){
function htmlEncode(value){
return $('<span/>').text(value).html();
}
function htmlDecode(value){
return $('<span/>').html(value).text();
}
$("#re").click(function() {
var $textarea = $("#textarea");
var $show = $("#show");
var str = $textarea.val();
str = htmlEncode(str);
$show.text(str);
});
$("#re2").click(function() {
var $textarea = $("#textarea");
var $show = $("#show2");
var str = $textarea.val();
str = htmlDecode(str);
$show.text(str); //要注意這裏哈。text()和html方法的不同
});
})();
</script>
</body>
</html>注意
一定要注意text方法和html方法的不同哈
這裏是 html標籤轉義和反轉義 http://blog.csdn.net/wx11408115/article/details/78202243
說得不對或不好的地方，請指教哈，相互學習。