基本的 HTML 跳脫模式會將五個對語法敏感的字元替換為 HTML 安全的參照:& 符號變成 &、小於符號變成 <、大於符號變成 >、雙引號變成 ",而撇號變成 '。這五個對應關係是 HTML 跳脫速查表的核心,因為該工具保護了那些可以開始、結束、加引號,或以其他方式參與 HTML 語法的字元。普通的 ASCII 字母、數字、空格、定位點 (tab) 和換行符仍然保持可讀,因此編碼並不會將整個輸入變成一長串實體名稱。對於像 A & B < C 這樣的文字,有用的結果是 A & B < C:& 符號會先被處理,這樣可以防止產生的 & 符號再次被編碼。HTML Entity Encoder / Decoder 在其基本編碼模式中即可產生這樣的結果。它也提供一個非 ASCII 模式,用於需要讓 ASCII 126 以上的每個碼點都以大寫十六進位數值參照呈現的工作流程;在該模式下,像 😀 這樣的表情符號會變成一個 😀 參照,而不是兩個代理對參照。解碼模式則反過來進行,使用瀏覽器目前的 HTML 解析器來解析目前的具名參照,以及十進位或十六進位的數值參照。請將任一輸出視為純文字。跳脫可以保護字串中的語法字元,但它並不會清理整份文件,也無法讓它在每種程式設計與網頁情境中都變得安全。

html escape cheat sheet
HTML 跳脫速查表:保留字元

基本模式中的保留字元

這個快速參考涵蓋了基本編碼所處理的五個字元。它刻意保持精簡:這些是固定的 HTML 安全輸出,而不是解碼時所支援之所有具名實體的完整目錄。

字元基本輸出在 HTML 語法中的角色
& 符號:&&它會開始一個字元參照,因此必須在任何產生的參照再次被解讀之前先加以保護。
小於符號:<<它會開始一個 HTML 標籤,或可能出現在看起來像標記的文字中。
大於符號:>>參與標籤語法,並與小於符號一起受到保護。
雙引號:""經常用來界定 HTML 屬性值。
撇號:''可以用來界定以單引號括住的 HTML 屬性值。

順序很重要。先編碼 & 符號表示原始的 & 符號會變成安全輸出的開頭,但這個新建立的 & 符號不會再被處理第二次。雙引號和撇號都會受到保護,因為接收端的屬性可能使用任一種引號風格。對它們進行跳脫並不能取代使用一個能感知情境的正確 HTML 序列化器,而當最終目的地是純文字時,保護大於符號仍然有用。關於參照的可展開說明,請參閱 MDN 的 character reference glossary

編碼與解碼模式

請選擇與期望結果相符的模式。基本編碼是現代 HTML 中可讀的預設選項。非 ASCII 編碼會加上數值表示法,而解碼則處理範圍更廣的參照集。

模式方向輸出行為最適合的情境
基本編碼從字面字元到 HTML 參照替換五個保留字元,並讓一般可讀的文字大致保持原樣。在偏好清晰、簡潔結果時,用於一般 HTML 文字跳脫。
非 ASCII 編碼從字面字元到 HTML 參照套用相同的語法保護,並將 126 以上的每個碼點轉換為大寫十六進位參照。舊版傳輸、教學範例,或確實需要數值參照的工作流程。
解碼從 HTML 參照到 Unicode 文字使用作用中的瀏覽器解析器來解析目前的具名、十進位與十六進位參照。檢查或還原包含既有參照的文字。

基本模式並不會列出每一個可列印字元,且會讓像版權符號和表情符號這類非 ASCII 字元保持可讀的形式。現代 UTF-8 的 HTML 可以直接包含 Unicode,而 MDN 建議避免不必要的參照。因此,非 ASCII 模式是一種明確的格式選擇,而不是一般 HTML 的必要選項。解碼模式也比基本編碼表的範圍更廣:它可以解析瀏覽器目前完整的具名參照集,包括舊式別名,以及會產生多個碼點的參照。它並不是這個小型基本編碼表的精確反向對應。

使用該工具編碼或解碼 HTML 文字

  1. 選擇操作與模式。選擇編碼字元 (Encode characters)解碼參照 (Decode references)。編碼時,請選擇適用的模式。若希望結果最具可讀性,請使用基本模式;當確實需要大寫十六進位數值參照時,請選擇非 ASCII 模式。可用的具名與數值解碼行為來自作用中的瀏覽器解析器,因此不需要另行選擇參照表。
  2. 貼上來源並執行轉換。將一個小型且具代表性的樣本貼到輸入欄位中,並選擇轉換按鈕。在處理整個區塊之前,請先測試這個樣本,特別是當其中包含 & 符號、角括號、引號或輔助平面的 Unicode 字元時。輸入上限為 500,000 個 JavaScript 字元。轉換完全在瀏覽器中進行,不會上傳文字、不會儲存歷史紀錄、不會擷取遠端參照表,也不會傳輸輸入內容。
  3. 檢查輸出並確認其目的地。確認 & 符號、角括號、引號與撇號都已產生預期的參照。如果選擇了非 ASCII 模式,請確認 ASCII 126 以上的碼點採用大寫十六進位表示法,並確認一個表情符號是由一個完整的參照來表示。解碼結果會以純文字形式出現在唯讀的文字區域中。請只在確認接收端的情境在其最終輸出邊界採用能感知 HTML 的跳脫之後,再複製該結果。

解碼模式所能解析的內容

解碼器使用一個獨立的 textarea 來要求瀏覽器的 HTML 解析器解讀來源。這讓解碼模式得以存取解析器目前的具名參照,以及它對十進位與十六進位數值參照的處理方式。回傳的值並不會以標記的形式插入到可見的頁面中,也不會被執行。即使解碼後的字元看起來像 HTML 元素,它仍然只是純文字。

舉例來說,來源 <script> 可以變成逐字元序列 <script>。該工具所顯示的字串並非作用中的標記,但將它複製到一個不安全的 innerHTML sink 中可能會造成漏洞。請將解碼後的輸出視為不受信任的資料。WHATWG HTML Living Standard's named character references 定義了目前的表格,包括舊式別名與對應到多個碼點的參照。瀏覽器可能會依其實作的 HTML 標準保留或標準化某些舊式解析細節。如果下游系統使用 XML,請記得 XML 有一個較小的預定義實體集以及不同的解析規則。

依接收情境選擇跳脫方式

HTML 跳脫適用於最終 HTML 輸出邊界的文字。同一個字串在另一種語言或協定中可能需要完全不同的處理方式。

  • HTML 文位元組點:在將值以文字形式插入之前,基本或非 ASCII 編碼可以保護該工具所定義的五個語法字元。在應用程式中,框架的自動跳脫或一個可信任的樣板引擎通常是更安全的自動化邊界。
  • HTML 屬性:請確認屬性值是如何序列化的,包括它的引號風格以及任何框架規則。該工具固定的引號與撇號對應並不會讓任意屬性的建構變得安全。
  • URL 或查詢值:請使用 URL 專用的百分比編碼,而不是把 HTML 實體當作 URL 編碼。HTML 參照無法取代對有效 URL 組件的規則。
  • JavaScript、CSS、SQL 或 HTTP 標頭:請使用該目的地所要求的跳脫系統。HTML 實體輸出並不能取代能感知情境的編碼、預備好的陳述式 (prepared statements),或可信任的協定堆疊。
  • XML 文件:請遵循 XML 解析規則及其較小的實體集,而不是假設每一個目前的 HTML 具名參照都是預定義的 XML 實體。
  • 不受信任的 HTML 輸入:對一個字串進行編碼並無法清理一份文件,也無法安全地接受豐富標記。Sanitizer 或嚴格的 allowlist 是另一項獨立需求,而內容安全政策 (Content Security Policy) 並不能取代輸出邊界的跳脫。

解碼後的文字也可能含有看起來像標記的內容,因此請勿直接將其移入能夠接收標記的 sink。請依據資料以及該資料被解讀的確切位置,選擇跳脫或驗證機制。

複製輸出前的預檢

  1. 說明預期的結果。決定目的地需要的是編碼後的 HTML 參照,還是解碼後的 Unicode 文字。
  2. 選擇範圍最窄的模式。針對可讀的 HTML,請優先使用基本編碼。只有當接收端的工作流程確實需要數值表示法時,才選擇非 ASCII 編碼。
  3. 驗證具代表性的樣本。確認 & 符號首先受到保護,並在相關邊界處檢查小於、大於、引號與撇號。
  4. 必要時檢查 Unicode 行為。在非 ASCII 模式下,像 😀 這樣的表情符號應變成一個 😀 參照。在解碼模式下,像 © 這樣的現行具名參照應解析為 ©。
  5. 檢查大小與目的地。請將輸入控制在 500,000 個 JavaScript 字元以內,檢查最終結果,並只在合適且能感知情境的工作流程中複製它。

這份速查表提供了基本的對應關係,以及正確使用它們所需的決策依據。HTML Entity Encoder / Decoder 能處理字面到參照的轉換、可選的非 ASCII 數值輸出,以及基於瀏覽器的參照解碼,且不會傳輸來源。

相關閱讀:HTML 跳脫指令行 vs 線上工具:該選哪一個

相關閱讀:文字轉十六進位速查表:UTF-8 值與格式參考