XSS防範(fàn)需輸入過(guò)濾、輸出編碼和CSP三方面入手。 1. 輸入過(guò)濾：對(duì)用戶輸入內(nèi)容進(jìn)行HTML轉(zhuǎn)義，使用白名單機(jī)制處理富文本，禁止危險(xiǎn)標(biāo)籤，並在前後端同時(shí)檢查；2. 輸出編碼：根據(jù)輸出位置區(qū)別處理，HTML內(nèi)容用實(shí)體轉(zhuǎn)義，屬性限制類型，JS字符串做相應(yīng)轉(zhuǎn)義，URL參數(shù)用encodeURIComponent處理；3. CSP設(shè)置：通過(guò)HTTP響應(yīng)頭Content-Security-Policy限制腳本來(lái)源，禁用內(nèi)聯(lián)腳本，改用事件監(jiān)聽(tīng)器，作為安全最後一道防線。

XSS (Cross-Site Scripting) 是前端開(kāi)發(fā)中最常見(jiàn)也是最容易被忽視的安全問(wèn)題之一。 JavaScript 作為前端的核心語(yǔ)言，很多安全漏洞都與其使用方式直接相關(guān)。想要真正防止XSS，不能只靠框架的默認(rèn)保護(hù)，還得從編碼習(xí)慣和整體架構(gòu)上入手。

輸入過(guò)濾：別讓惡意內(nèi)容進(jìn)來(lái)

XSS 的本質(zhì)是攻擊者把惡意腳本注入頁(yè)面中被執(zhí)行。最直接的方式就是在用戶輸入階段就做好過(guò)濾。

• 對(duì)所有用戶輸入的內(nèi)容進(jìn)行HTML 轉(zhuǎn)義，比如<script></script>變成<script></script> 。
• 使用白名單機(jī)制處理富文本內(nèi)容，不要輕易允許<script></script> 、 on*屬性等危險(xiǎn)標(biāo)籤。
• 在服務(wù)端也要做同樣的檢查，前後端都不能偷懶。

舉個(gè)例子，如果你用innerHTML 直接插入用戶輸入的數(shù)據(jù)，那基本就是給攻擊者開(kāi)了後門。應(yīng)該優(yōu)先使用textContent 或者React 的{}插值方式，這些方式會(huì)自動(dòng)轉(zhuǎn)義特殊字符。

輸出編碼：不同上下文要區(qū)別對(duì)待

輸出位置不同，防御手段也不同。你不能用同一套規(guī)則去處理放在HTML 標(biāo)籤裡、屬性裡、還是JS 字符串裡的數(shù)據(jù)。

• HTML 內(nèi)容：用HTML 實(shí)體轉(zhuǎn)義
• HTML 屬性：除了轉(zhuǎn)義，最好限制屬性類型，比如input 的value 就比較安全
• JS 字符串：在拼接到script 標(biāo)籤前必須做JS 字符串轉(zhuǎn)義
• URL 參數(shù)：用encodeURIComponent 處理

比如你在寫(xiě)一個(gè)動(dòng)態(tài)生成的<a href="..."></a>鏈接，如果URL 參數(shù)來(lái)自用戶輸入，一定要先encode，否則可能變成跳轉(zhuǎn)到惡意網(wǎng)站的入口。

CSP（內(nèi)容安全策略）：最後一道防線

即使前面都做得不到位，CSP 也能幫你兜底。它能限制頁(yè)面只能加載指定來(lái)源的腳本，還能禁止內(nèi)聯(lián)腳本執(zhí)行。

• 設(shè)置HTTP 響應(yīng)頭Content-Security-Policy
• 禁止'unsafe-inline' ，也就是不讓<script>...</script>這樣的代碼運(yùn)行
• 如果要用內(nèi)聯(lián)事件處理器（如onclick），建議遷移到addEventListener 上

CSP 不是萬(wàn)能的，但它是你應(yīng)用安全的最後一道防線。特別是在大型項(xiàng)目中，很難保證每個(gè)地方都能正確轉(zhuǎn)義和過(guò)濾，這時(shí)候CSP 就顯得特別重要了。

基本上就這些。防止XSS 不復(fù)雜，但很容易忽略細(xì)節(jié)。只要養(yǎng)成良好的編碼習(xí)慣，配合合適的工具和策略，就能避免大部分常見(jiàn)的XSS 攻擊。

以上是關(guān)於防止XSS等常見(jiàn)安全漏洞的關(guān)鍵JS綜述的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！