摘要：

本文討論web前端安全問題以及應對措施，瀏覽器同源策略以及對資源跨域訪問的幾種解決方案

本文分享自華為雲社群《Web安全和瀏覽器跨域訪問》，原文作者：kg-follower 。

今天說一說和前端相關的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（/

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

‘）

console。log（html）

XSS Demo

<；script>；alert（”xss“）；<；/script>；

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