清理 SVG 檔案的種種苦難

背景

這篇文章深入探討了 Scratch 平台在處理使用者上傳的 SVG 檔案時所面臨的長期安全挑戰。由於 SVG 本質上是基於 XML 的標記語言而非單純的圖檔，Scratch 為了測量圖形邊界而將其解析並插入 DOM 的行為，導致了長達數年的跨站腳本攻擊（XSS）與隱私洩漏漏洞，即便多次引入 DOMPurify 或 CSS 解析器進行清理，依然難以完全杜絕攻擊者利用複雜的 CSS 規則或函式庫漏洞進行滲透。

社群觀點

Hacker News 的討論聚焦於 SVG 格式過於臃腫且功能過剩的本質。許多評論者指出，SVG 從來就不是一種純粹的影像格式，而是一套完整的標記語言，其危險程度與 HTML 不相上下。這也解釋了為何像 Google Slides 這樣的大型產品，即便用戶需求極高，仍長達十五年拒絕支援 SVG。社群普遍認為，試圖透過「清理」（Sanitization）來確保 SVG 安全是一場註定失敗的追逐戰，因為攻擊者總能找到新的方式繞過過濾規則，例如利用大小寫變體、內聯事件處理器或深層嵌套的 CSS 引用。

針對解決方案，討論中出現了兩種主要思維。一派觀點主張推動「受限的向量圖形格式」（如 SVG-ES 或 TinyVG），僅保留路徑與填充等核心繪圖功能，徹底移除腳本執行與外部資源載入的能力。這類觀點認為，大多數真實世界的應用場景只需要靜態圖形，而不需要那些「聰明但危險」的功能。然而，另一派意見則擔憂這種做法會破壞現有工具鏈的相容性，因為設計師常用的向量編輯軟體往往會產生複雜的標記，若強制轉譯或刪減功能，可能會導致動畫失效或渲染錯誤。

此外，部分技術專家提出應從瀏覽器底層或架構層面解決問題。有人建議瀏覽器應為內聯 SVG 提供類似 iframe 的沙盒屬性（sandbox attribute），讓開發者能以宣告式的方式禁用腳本與外部請求。也有人指出，內容安全政策（CSP）才是目前最可靠的防禦手段，透過在 iframe 中嵌入 meta 標籤設定嚴格的 CSP，可以在不依賴複雜清理邏輯的情況下，由瀏覽器強制執行安全限制，防止惡意代碼與外部伺服器通訊。

延伸閱讀

在討論中被多次提及的替代方案是 TinyVG（tinyvg.tech），這是一個旨在提供安全、二進位且易於解析的向量圖形標準。另外，關於如何利用 iframe 的 srcdoc 屬性配合 meta CSP 來建立安全的渲染環境，也是留言中推薦的實務技巧。