JavaScript 正則表達式限制 HTML 標籤白名單：僅允許 , , ,

,
並支援屬性過濾

正則詳細拆解

完整驗證函數 (含標籤閉合檢查)

正則無法完美檢查標籤巢狀閉合 (如 ``)。生產環境建議**結合 DOMParser 驗證結構 + 正則過濾標籤白名單**：

function validateHtmlWhitelist(html) {
  // 1. 正則快速檢查非法標籤
  const forbiddenTagRegex = /<(?!(?:\/?(?:i|b|u|p|br))[\s/>])[^>]*>/i;
  if (forbiddenTagRegex.test(html)) {
    return {valid: false, reason: '包含非白名單標籤'};
  }

  // 2. DOMParser 驗證結構合法性 (瀏覽器環境)
  try {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    // 檢查解析錯誤
    if (doc.querySelector('parsererror')) {
      return {valid: false, reason: 'HTML 結構錯誤 (標籤未閉合/巢狀錯誤)'};
    }
    // 可選：進一步遍歷所有元素再次確認標籤名
    const allElements = doc.body.getElementsByTagName('*');
    const allowed = new Set(['i', 'b', 'u', 'p', 'br']);
    for (let el of allElements) {
      if (!allowed.has(el.tagName.toLowerCase())) {
        return {valid: false, reason: `發現非白名單標籤: <${el.tagName}>`};
      }
    }
    return {valid: true, sanitized: doc.body.innerHTML};
  } catch (e) {
    return {valid: false, reason: '解析異常: ' + e.message};
  }
}

// Node.js 環境可用 'xmldom' 或 'jsdom' 替代 DOMParser

安全性補充：XSS 防護

• 白名單過濾**不等於**完整 XSS 防護。攻擊者可利用允許標籤的屬性注入事件處理器：`

  `。

• **必須**在儲存/輸出前進行**屬性白名單過濾** (如僅允許 `style`, `class`, `id`)，或使用成熟庫：**DOMPurify** (前端/Node.js 通用)。
• DOMPurify 範例：

  
  import DOMPurify from 'dompurify';
  const clean = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['i', 'b', 'u', 'p', 'br'],
    ALLOWED_ATTR: ['style', 'class', 'id']
  });
  

總結

JS 限制 HTML 標籤白名單：**正則否定前瞻快速攔截非法標籤 + DOMParser 驗證結構 + DOMPurify 徹底淨化屬性**。三層防護確保使用者生成內容安全、合規、結構完整。