一、代碼層面的安全驗證

1. 審查代碼中的安全風險

• XSS 漏洞：

  • 檢測點：
    • 檢查是否直接使用 innerHTML 或 document.write() 插入未過濾的用戶輸入。
    • 驗證是否對用戶輸入進行轉義（如使用 DOMPurify 或 textContent）。
  • 示例：

    // 危險寫法
    element.innerHTML = userInput; 
    // 安全寫法
    element.textContent = userInput; 
    

• 不安全的第三方庫：

  • 工具：
    • 安全審計指令：npm audit / yarn audit：掃描項目依賴中的已知漏洞。
    • Snyk / Dependabot：自動監控并修復依賴漏洞。

2. 驗證 CSP（內容安全策略）配置

• 檢查點：
  • 是否禁用 'unsafe-inline' 和 'unsafe-eval'？
  • 是否通過 nonce 或 hash 簽名允許必要的內聯腳本？
• 工具：
  • 瀏覽器控制臺查看 CSP 違規報告。
  • 在線工具：CSP Evaluator 分析策略強度。

二、工具自動化檢測

1. 使用瀏覽器開發者工具

• Network 面板：
  • 檢查敏感數據（如 API 密鑰、Token）是否通過 URL 或請求頭泄露。
  • 驗證 HTTPS 是否強制啟用（無混合內容警告）。
• Security 面板：
  • 查看證書有效性、TLS 版本和加密套件。
  • 檢測跨域資源加載是否安全（如 CORS 配置）。

2. 安全掃描工具

• Lighthouse（集成于 Chrome DevTools）：
  • 檢測 HTTPS 配置、安全頭（如 CSP、HSTS）、被動混合內容。
• OWASP ZAP / Burp Suite：
  • 自動化掃描 XSS、CSRF、CORS 配置錯誤等漏洞。
• WebPageTest：
  • 檢查資源加載安全性和 HTTPS 合規性。

三、手動測試常見攻擊場景

1. 驗證點擊劫持（Clickjacking）防御

• 測試步驟：
  1. 嘗試將頁面嵌入到 <iframe> 中：

     <iframe src="https://your-site.com"></iframe>
     

  2. 檢查是否觸發 X-Frame-Options: DENY 或 CSP 的 frame-ancestors 策略。
  3. 使用工具如 Clickjacking Test Tool 模擬攻擊。

2. CSRF 漏洞驗證

• 測試步驟：
  1. 構造一個偽造的 POST 請求表單（無 CSRF Token）：

     <form action="https://your-site.com/transfer" method="POST">
       <input type="hidden" name="amount" value="1000">
     </form>
     

  2. 提交表單，檢查服務端是否返回 403 Forbidden。

3. 敏感信息泄露檢查

• 測試點：
  • 前端代碼中是否硬編碼 API 密鑰、數據庫密碼？
  • 錯誤頁面是否暴露堆棧信息或服務器版本？
• 工具：
  • 使用 grep 或代碼編輯器全局搜索敏感關鍵詞（如 password、secret）。

四、安全頭與網絡配置驗證

1. 檢查關鍵 HTTP 響應頭

• 必需頭：
  • Content-Security-Policy：限制資源加載來源。
  • Strict-Transport-Security (HSTS)：強制 HTTPS。
  • X-Content-Type-Options: nosniff：禁止 MIME 類型嗅探。
  • X-Frame-Options: DENY：防御點擊劫持。
  • Referrer-Policy：控制 Referrer 信息泄露。
• 驗證工具：
  • SecurityHeaders.com 在線檢測響應頭配置。

2. 驗證 HTTPS 配置

• 檢查點：
  • 是否全站強制 HTTPS（無 HTTP 回退）？
  • 證書是否有效且未過期？
  • 是否禁用弱加密算法（如 TLS 1.0、SSLv3）？
• 工具：
  • SSL Labs 測試服務器 SSL/TLS 配置評分。

五、用戶輸入與數據處理驗證

1. 表單與輸入過濾

• 測試步驟：
  1. 在輸入框嘗試注入腳本：<script>alert(1)</script>。
  2. 提交后檢查頁面是否彈窗或腳本執行。
• 防御驗證：
  • 輸入內容是否被轉義（如 < 轉為 <）？
  • 富文本編輯器是否使用白名單過濾（如 DOMPurify）？

2. 文件上傳漏洞檢測

• 測試步驟：
  1. 上傳一個偽裝成圖片的 PHP 文件（如 shell.php.jpg）。
  2. 檢查服務器是否僅按文件內容（而非擴展名）校驗類型。
• 工具：
  • 使用 ExifTool 驗證文件真實類型。

六、第三方資源與依賴審計

1. 檢查第三方腳本安全性

• 驗證點：
  • 加載的 CDN 資源是否使用 integrity 屬性（SRI）：

    <script src="https://cdn.example.com/jquery.js" 
      integrity="sha384-xxxxx"></script>
    

  • 是否監控第三方服務的可用性和安全性（如 Google Analytics 被篡改）？

2. 驗證 Cookie 安全屬性

• 檢查點：
  • 敏感 Cookie 是否標記為 Secure、HttpOnly 和 SameSite=Lax？
• 工具：
  • 瀏覽器開發者工具 → Application → Cookies 查看屬性。

七、持續監控與報告

1. 集成安全測試到 CI/CD
   • 使用 npm audit、Lighthouse CI 在構建流程中自動檢測漏洞。
2. 日志與報警
   • 監控 CSP 違規報告（通過 report-uri 或 report-to）。
   • 使用 Sentry 或 Datadog 捕獲前端錯誤中的安全異常。

總結：前端安全驗證清單

通過以上方法，前端工程師可以系統性驗證和加固網站安全性，結合自動化和手動測試，確保用戶數據和業務邏輯的可靠性