今天說一說和前端相關的Web安全問題和開發過程中經常遇到的跨域問題。

1．Web安全

1.1 XSS

基本原理

XSS (Cross-Site Scripting)，跨站腳本攻擊通過在用戶的瀏覽器內運行非法的HTML標簽或JavaScript進行的一種攻擊。

攻擊手段

攻擊者往 Web 頁面里插入惡意網頁腳本代碼，當用戶瀏覽該頁面時，嵌入?Web 頁面里面的腳本代碼會被執行，從而達到攻擊者盜取用戶信息或其他侵犯用戶安全隱私的目的。

XSS攻擊分類

反射型xss攻擊。通過給被攻擊者發送帶有惡意腳本的URL或將不可信內容插入頁面，當URL地址被打開或頁面被執行時，瀏覽器解析、執行惡意腳本。

反射型xss的攻擊步驟：1. 攻擊者構造出特殊的 URL或特殊數據；2. 用戶打開帶有惡意代碼的 URL 時，Web服務器將惡意代碼從 URL 中取出，拼接在 HTML 中返回給瀏覽器；3. 用戶瀏覽器接收到響應后解析執行，混在其中的惡意代碼也被執行；4. 惡意代碼竊取用戶數據并發送到攻擊者的網站，或者冒充用戶的行為，調用目標網站接口執行攻擊者指定的操作。

防御：1.Web頁面渲染的所有內容或數據都必須來自服務端；2. 客戶端對用戶輸入的內容進行安全符轉義，服務端對上交內容進行安全轉義；3.避免拼接html。

存儲型xss。惡意腳本被存儲在目標服務器上。當瀏覽器請求數據時，腳本從服務器傳回瀏覽器去執行。

存儲型xss的攻擊步驟：1. 攻擊者將惡意代碼提交到目標網站的數據庫中；2.用戶瀏覽到目標網站時，前端頁面獲得數據庫中讀出的惡意腳本時將其渲染執行。

防御：防范存儲型XSS攻擊，需要我們增加字符串的過濾：前端輸入時過濾；服務端增加過濾；前端輸出時過濾。

通常有三種方式防御XSS攻擊：1. Content Security Policy（CSP）。CSP 本質上就是建立白名單，開發者明確告訴瀏覽器哪些外部資源可以加載和執行。我們只需要配置規則，如何攔截是由瀏覽器自己實現的。我們可以通過這種方式來盡量減少 XSS 攻擊。通常可以通過兩種方式開啟，例如只允許加載相同域下的資源：

設置 HTTP Header 中的 CSP（Content-Security-Policy: default-src 'self'）

設置meta 標簽的方式（）

2. 轉義字符。用戶的輸入永遠不可信任的，最普遍的做法就是轉義輸入輸出的內容，對于引號、尖括號、斜杠進行轉義：

function escape(str) { str = str.replace(/&/g, '&') str = str.replace(//g, '>') str = str.replace(/"/g, '&quto;') str = str.replace(/'/g, ''') str = str.replace(/`/g, '`') str = str.replace(/\//g, '/') return str }

但是對于顯示富文本來說，顯然不能通過上面的辦法來轉義所有字符，因為這樣會把需要的格式也過濾掉。對于這種情況，通常采用白名單過濾的辦法：

const xss = require('xss') let html = xss('

XSS Demo

XSS Demo

經過白名單過濾，dom中包含的