To defend against XSS and CSRF, sanitize user input using libraries like DOMPurify, avoid dangerous JavaScript methods such as innerHTML and eval(), implement a strict Content Security Policy, encode output when inserting user data, use anti-CSRF tokens tied to user sessions, set SameSite attributes on cookies (Lax or Strict), validate origin and referer headers cautiously, employ the double submit cookie圖案，並利用諸如反應和角度的框架中的內(nèi)置保護，同時避免不安全的特徵；始終將用戶數(shù)據(jù)視為不受信任的情況，並採用分層安全措施，包括安全的HTTP標頭，以有效保護前端應用程序。

前端安全性經(jīng)常被忽略，但與後端保護同樣重要。最常見和危險的客戶端威脅是跨站點腳本（XS）和跨站點請求偽造（CSRF） 。儘管這些攻擊針對不同的漏洞，但兩者都可能導致數(shù)據(jù)盜用，帳戶接管和用戶信任的丟失。這是有效捍衛(wèi)您的前端應用程序的方法。

1。防止跨站點腳本（XSS）

當攻擊者將惡意腳本注入其他用戶查看的網(wǎng)頁中時，就會發(fā)生XSS。這些腳本在受害者的瀏覽器中運行，可能會竊取餅乾，會話令牌或重定向到網(wǎng)絡釣魚站點。

關鍵預防策略：

• 消毒用戶輸入
  切勿信任用戶的數(shù)據(jù)。始終對前端和後端進行驗證和驗證輸入。在渲染之前，請使用諸如Dompurify之類的庫清潔HTML內(nèi)容：

  

  從“ dompurify”導入dompurify;
  const clean = dompurify.sanitize（dirtyhtml）;

• 避免危險的JavaScript方法
  諸如innerHTML ， document.write()和eval()之類的方法可以執(zhí)行注入的腳本。喜歡更安全的替代方案：

  • 插入純文本時，請使用textContent而不是innerHTML 。
  • 避免使用用戶提供的字符串eval()和new Function() 。

• 使用內(nèi)容安全策略（CSP）
  CSP是功能強大的HTTP標頭，它限制了腳本可以在您的頁面上運行的腳本。例如：

  

   content-security-policy：default-src'self'; script-src'self'https://trusted-cdn.com;

  這會阻止內(nèi)聯(lián)腳本，僅允許您的域和批準的CDN腳本。

• 編碼輸出
  將用戶數(shù)據(jù)動態(tài)插入HTML時，請確保正確編碼。大多數(shù)現(xiàn)代框架（反應，角，vue）會自動執(zhí)行此操作，但要對React中的dangerouslySetInnerHTML固定型。

2。阻止跨站點偽造（CSRF）

CSRF欺騙用戶的瀏覽器，向他們經(jīng)過身份驗證的站點提出意外請求（例如更改密碼或付款）而沒有知識。

有效的CSRF保護：

• 使用抗CSRF令牌
  為每個用戶會話生成一個唯一的，不可預測的令牌，並將其包含在表單或API請求中。服務器必須在處理請求之前驗證此令牌。

   <input type =“ hidden” name =“ csrf_token” value =“ unique random-value”>

  該令牌應與用戶的會話綁定並每次會話再生。

• 利用samesite cookie屬性
  用SameSite=Strict = SameSite=Lax ，以防止瀏覽器以跨站點請求發(fā)送它們：

   set-cookie：sessionid = abc123;路徑=/;安全的; httponly; samesite = lax

  • Lax ：允許使用安全的頂級導航中的cookie（例如，鏈接點擊）。
  • Strict ：在所有跨站點上下文中阻止cookie（更安全，但會破壞一些流）。

• 驗證原點和推薦人標頭（謹慎）
  關於敏感的動作，檢查請求是否源自您的域。但是，不要僅僅依靠這些標頭 - 在某些情況下可能會欺騙或缺少。

• 使用雙提交曲奇圖案
  將隨機令牌存儲在cookie中，還將其發(fā)送到請求主體或標題中。由於攻擊者無法閱讀您的cookie（由於相同的原始政策），因此他們無法在請求中復制令牌。

獎勵：特定於框架的技巧

• React / Angular / Vue ：這些框架提供內(nèi)置的XSS保護措施（例如，自動逃脫），但對旁路功能保持謹慎，例如dangerouslySetInnerHTML或v-html 。
• SPA API架構：確保您的API檢查CSRF令牌或使用SameSite cookie?？紤]將JWT與適當?shù)拇鎯κ褂茫ū苊馐褂妹舾辛钆频膌ocalstorage）。

確保前端不是一個魔術修復，這是層次。結合輸入消毒，安全的標題，抗驗證令牌和智能餅乾政策。大多數(shù)攻擊因小小的監(jiān)督而成功，因此保持一致。基本上，將所有用戶數(shù)據(jù)視為不受信任的情況，並讓瀏覽器幫助您使用現(xiàn)代安全標頭。

以上是保護前端：防止XSS和CSRF攻擊的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！