前端框架安全防范

在現代Web開發中，前端框架如Angular和React已經成為構建復雜單頁面應用（SPA）的主流工具。然而，隨著應用復雜度的增加，安全問題也變得越來越重要。本文將介紹如何在使用Angular和React框架時，防止常見的安全漏洞。

Angular 安全指南

防止跨站腳本攻擊（XSS）

跨站腳本攻擊（XSS）是指攻擊者通過在網頁中注入惡意腳本，從而竊取用戶信息或執行其他惡意操作的行為。Angular通過以下措施來防止XSS攻擊：

1. 值的清理：
   Angular會將所有值視為不可信的，并根據不同的上下文進行清理。主要的安全上下文包括：

   • HTML：用于將值解釋為HTML，例如綁定到innerHTML屬性時。
   • Style：用于將CSS綁定到樣式屬性時。
   • URL：用于URL屬性，例如<a href>。
   • Resource URL：用于加載和執行代碼的URL，例如<script src>。

2. 直接使用DOM API和顯式清理：
   除非強制使用可信類型，否則內置瀏覽器的DOM API不會自動保護您免受安全漏洞的影響。建議使用DOMPurify來清理HTML并防止XSS攻擊。

<h3>綁定 innerHTML</h3>
<p>綁定值：</p>
<p class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>綁定到 innerHTML 的結果：</p>
<p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>

防止跨站請求偽造（CSRF）

跨站請求偽造（CSRF）是一種通過偽造用戶請求來執行未經授權操作的攻擊。Angular通過其內置的XSRFStrategy來防止CSRF攻擊。

1. 客戶端保護：
   Angular的http模塊內置了對CSRF防護的支持，默認啟用了CookieXSRFStrategy。在發送HTTP請求之前，CookieXSRFStrategy會查找名為XSRF-TOKEN的cookie，并設置一個名為X-XSRF-TOKEN的請求頭，其值為該cookie的值。

2. 服務器端驗證：
   服務器需要設置初始的XSRF-TOKEN cookie，并在每次狀態修改請求中確認請求頭中的X-XSRF-TOKEN值與cookie中的值匹配。

React 安全指南

防止跨站腳本攻擊（XSS）

React通過以下措施防止XSS攻擊：

1. 默認數據綁定：
   使用花括號{}進行默認數據綁定時，React會自動對其值進行轉義，從而防止XSS攻擊。這種保護僅在渲染文本內容時有效，而不適用于HTML屬性。

<div>{data}</div>

2. 避免動態屬性值：
   避免未經過自定義驗證的動態屬性值。

// 不推薦的做法
<form action={data}>...

3. URL驗證：
   使用驗證函數來避免基于javascript: URL的腳本注入。可以使用本地URL解析函數進行驗證，然后將解析后的協議屬性匹配到允許列表。

function validateURL(url) {const parsed = new URL(url);return ['https:', 'http:'].includes(parsed.protocol);
}<a href={validateURL(url) ? url : ''}>點擊這里</a>

4. 安全地插入HTML：
   使用dangerouslySetInnerHTML將HTML直接插入DOM節點時，必須事先對內容進行清理。建議使用DOMPurify進行清理。

import purify from "dompurify";<div dangerouslySetInnerHTML={{ __html: purify.sanitize(data) }} />

5. 避免危險的庫代碼：
   避免使用包含dangerouslySetInnerHTML、innerHTML、未經驗證的URL或其他不安全模式的庫。

參考鏈接

• Angular Security - Preventing XSS
• DOMPurify
• React Security - Preventing XSS
• XSRF Protection in Angular