前端安全 - XSS

前端安全中，常常提到的有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個

< : &lt;
> : &gt;
" : &quot;
' : &apos;
& : 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