前端安全中，經常提到的有XSS，對前端的影響可以說是一直都在，如果專案沒有做好足夠的保護，那麼可能就會存在XSS漏洞。這裡，我們就來看以下什麼是XSS以及XSS的危害，如何防範？
what
XSS，跨站指令碼攻擊( Cross Site Script ), 簡寫的話就是CSS，但是在前端，CSS已經是樣式來，所以，跨站指令碼攻擊就用了XSS。
那麼？XSS是什麼呢？指令碼攻擊，顧名思義，就是通過指令碼來攻擊系統，在前端，最常用的就是javascript，當然，html、css也有可能造成攻擊。
XSS，其實還細分為三種型別：反射型XSS、儲存型XSS、基於DOM的XSS
反射型XSS（非持久型）
當使用者點選惡意連結，或者提交表單，或者進入惡意網站時，惡意指令碼就會進入受害者的頁面，然後惡意指令碼執行，就造成了反射型XSS。
儲存型XSS（持久型）
儲存型XSS，顧名思義，存起來的XSS，在web專案中，就是儲存到資料庫中了。
這種XSS，指令碼是存在伺服器的，下次請求的時候，客戶端拿到指令碼並且執行。
基於DOM的XSS
惡意指令碼會修改頁面DOM結構，就是基於DOM的XSS
危害
說了那麼久，到底，XSS有什麼危害呢？
cookie劫持
看完前面的，我們應該都知道，XSS可以在受害者的網頁中注入惡意的指令碼，那麼javascript重要的一點，就是可以讀取document.cookie來獲取使用者的cookie。
cookie是網站用來儲存使用者資訊用的，如果攻擊者拿到來使用者的cookie，那麼攻擊者就可以假冒受害者進入網站了。
看下這個例子，我們在頁面中插入一個img標籤，onerror事件中獲取頁面的cookie。如果說攻擊者直接把cookie傳送給攻擊者自己，那麼攻擊者就可以輕而易舉的假冒我們了。
<img src="//err.jpg" onerror="alert(document.cookie)">
複製程式碼XSS釣魚
釣魚執法，相信大家都不陌生，XSS釣魚也是如此。
XSS攻擊就是自動執行指令碼，那麼當遇到需要使用者互動的時候，XSS就攻擊不了了。
有方法，就有對策。既然都已經可以實現XSS攻擊了，直接搞一個彈窗讓使用者操作也不是難事。只要使用者輸入，那攻擊者自然就可以拿到想要的資訊了。
XSS蠕蟲
XSS蠕蟲，相比於其他蠕蟲，XSS蠕蟲是在使用者層面的，不會造成伺服器當機，但是卻像病毒一樣不斷的在使用者之間進行傳播。（基於網站是社交網站類）
相對於其他XSS危害，XSS蠕蟲的影響是最大的。
注入程式碼將使用者資訊和使用者頁面程式碼傳送給攻擊者web應用程式，然後當使用者訪問web應用程式時，蠕蟲自身繼續進行資料傳送感染。這種感染的效果的裂變的。使用者越是活躍，感染就越可怕。
第一個XSS蠕蟲是經典的薩米，利用ajax將自己新增到其他使用者的關注列表中。
防範
既然XSS那麼可怕，那我們要怎麼防範被攻擊呢？
方法還是有的，只要系統做好防護，那麼基本都是可以防XSS的。
httponly
cookie的引數httponly，就是不允許通過document.cookie訪問cookie，所以只要我們對敏感的cookie設定了httponly，那麼客戶端就算注入了XSS，但是攻擊者也拿不到使用者的cookie。
想了解cookie的，可檢視樓主另外一篇文章 cookie & session
CSP
CSP，也是經典的XSS防範手段，通過白名單的配置，我們可以禁止頁面執行inline指令碼&樣式，從而有效緩解XSS攻擊。
當然，CSP最好要搭配https來使用，更加安全。
想了解CSP的，可檢視樓主另外一篇文章 前端安全 - CSP
輸入校驗
對於使用者的輸入，我們一律都認為是不可信的。
所以，使用者輸入的東西我們都要進行校驗，特殊字元、格式、長度等，根據業務來設計。
前端頁面做校驗是必須的，介面校驗也是必須的，畢竟頁面和介面是分開的。使用者當然可以直接呼叫介面來繞過輸入的校驗，所以，介面校驗也是及其重要的一環。
輸出轉義
有的同學可能會問，輸入都進行校驗了，為什麼還要做輸出轉義呢？
答案是：服務端過來的資料，我們也要認為是不可信的，因為我們並不知道，服務端給我們資料的時候，到底做來什麼處理，會不會影響頁面。
轉義也是3種：HTML轉義、javascript轉義、URL轉義
HTML轉義
當我們要把資料貼進HTML標籤的時候，一定要記得先將資料進行HTML轉義，避免出現變成HTML標籤的情況，那就不是我們想要的。
HTML轉義的字元有這5個
< : <
> : >
" : "
' : '
& : amp;
複製程式碼javascript轉義
當我們拿到服務端資料要在js中操作的時候，也要注意對資料進行javascript轉義。
javascript轉義的字元，就是給特殊字元加 \
' : \'
" : \"
\ : \\
換行 : \n
複製程式碼URL轉義
無論是使用者傳入的資料，還是服務端傳來的資料，當這些資料要放到URL連結中提供使用者開啟的時候，這個時候注意了，需要進行URL轉義。
因為URL各瀏覽器編碼不一，所以最好的方式就是開發者自己統一編碼。
URL轉義只需要利用好encodeURIComponent即可
encodeURIComponent(key) + "=" + encodeURIComponent(value)
複製程式碼web編碼，可檢視樓主另外一篇文章 字元編碼
寫在最後
XSS攻擊，是不容小覷的，對於我們自己的網站，我們還是要做好防範，及時避免問題的出現。
我們可以看下owasp 2017 釋出的 top10 安全風險，XSS排在第七位，所以，大家要做好安全防範，規避XSS。
附上OWASP top 10 2017 版本 OWASP Top 10 2017