PHP HTML 標籤過濾實戰：從 strip_tags 到圖片保留的進階策略

為什麼需要 HTML 過濾？

在開發文章系統、評論區、論壇等使用者生成內容（UGC）場景時，若直接儲存並輸出使用者提交的原始 HTML，極易導致 XSS 跨站腳本攻擊、版面錯亂或惡意程式碼注入。因此，伺服端必須對輸入進行嚴格的標籤過濾與轉義。

內建函式對比

實測發現 strip_tags() 在處理巢狀標籤、不完整標籤時表現更穩健，但單純使用仍不足以應對「保留圖片、過濾腳本」的混合需求。

進階方案：二次處理保留圖片

參考微博、QQ 空間的動態呈現邏輯，採用「過濾 → 提取 → 重組」三步驟：

1. 全量過濾：先用 strip_tags($content, '<img>') 僅保留 <img> 標籤。
2. 正則提取：解析 src、alt、width/height 等屬性，建立圖片資料陣列。
3. 動態重組：將文字內容與圖片分離，前端以「文字優先、圖片九宮格/單張大圖」佈局輸出。

程式碼範例

function purify_content($raw_html) {
    // 1. 僅保留 img 標籤
    $clean = strip_tags($raw_html, '<img>');
    
    // 2. 提取圖片資訊
    $images = [];
    preg_match_all('/<img[^>]+src=["\']([^"\']+)["\'][^>]*>/i', $clean, $matches);
    foreach ($matches[1] as $idx => $src) {
        // 可在此驗證圖片域名、大小、格式
        $images[] = ['src' => $src, 'order' => $idx];
    }
    
    // 3. 移除所有標籤得純文字
    $text = strip_tags($clean);
    
    return [
        'text' => $text,
        'images' => $images
    ];
}

前端呈現建議

• 單張圖：寬度 100%，高度自適應，置於標題下方。
• 多張圖：參考微博 3×3 九宮格，超過 9 張顯示「+N」入口。
• 長圖/長文：採用漸變遮罩 +「展開全文/查看大圖」交互。

安全性補強

1. 域名白名單：僅允許自有 CDN、受信任圖床域名（如 *.yourcdn.com、wx.qlogo.cn）。
2. 屬性清洗：移除 onload、onerror、style 等高風險屬性。
3. CSP 標頭：配合 Content-Security-Policy: img-src 'self' https://trusted-cdn.com; 從瀏覽器層面攔截異常請求。

結語

單一函式無法完美平衡安全與體驗。採用「伺服端嚴格清洗 + 結構化資料輸出 + 前端彈性渲染」的分層架構，才能同時達成 XSS 防護、圖文混排、多端適配三大目標。