在瀏覽器中編輯 HTML 代表在當前的分頁中撰寫標記與 CSS，並即時看到該程式碼的渲染結果，而其中控制最嚴謹的做法，是使用一個沙盒化的編輯器，允許最多 50,000 個字元的 HTML 與 30,000 個字元的 CSS，同時封鎖所有腳本與遠端資源。最簡潔的實作方式，是一個並排顯示的瀏覽器工具，將兩個純文字編輯器與一個受限制的本機預覽搭配在一起，例如 Online HTML Editor。該編輯器使用一個帶有空白沙盒權杖清單的 iframe，以及預設拒絕的內容安全政策（Content Security Policy），因此 JavaScript、表單提交、快顯視窗、導覽，以及外部資源在設計上就全部遭到封鎖。預覽僅在你按下「Update preview」按鈕時才會重新整理，且不會上傳、儲存到帳號，或傳送至任何 API。其結果是一種快速、封閉的方式，可用來學習標記、檢視版面配置片段，或在將某個靜態元件想法複製到安全性截然不同的真實專案之前先做驗證。
「在瀏覽器中編輯 HTML」實際涵蓋的範圍
搜尋「在瀏覽器中編輯 HTML」會分成三種截然不同的工作，而將它們混為一談，是最快選錯工具的方式。第一項工作是檢查或暫時修改不是你撰寫的網頁，這正是瀏覽器內建的開發者工具所設計的功能。第二項工作是開啟磁碟上的靜態檔案並在本機預覽，這正是 file:// 網址或一個小型靜態伺服器所能處理的工作。第三項工作是在當前分頁中組合一個自給自足的 HTML 與 CSS 片段，以學習某個標籤、驗證某個版面配置想法，或分享某個靜態元件，而這正是沙盒化瀏覽器內編輯器的用武之地。
本文聚焦於第三項工作。當你需要對正式上線的網站進行除錯時，沙盒化編輯器是開發者工具的差勁替代方案；而且它也無法像真正的靜態伺服器那樣存取遠端資源。它能做的是提供一個穩定的雙窗格工作區，讓 HTML 與 CSS 並排顯示，點一下按鈕就能取得全新的預覽。Online HTML Editor 正是專為此工作流程而打造，而本文的其餘部分將逐步說明它的運作方式、沙盒允許的內容，以及其限制所在。
為何沙盒化並排編輯器能解決快速測試的工作
當你想在瀏覽器中編輯 HTML 時，誘人的做法是開一個空白分頁、貼上一段片段，然後依賴瀏覽器來渲染它。這確實可行，但一旦你的片段超過單一段落的長度，就會產生三個問題。第一，沒有明確的地方來存放你的 CSS，因此樣式會分散在行內屬性、style 區塊，以及你早已遺忘的獨立檔案之中。第二，片段中的任何 JavaScript 都會立即執行，並完整存取你的分頁，包括 Cookie、剪貼簿，以及網址列。第三，外部資源（例如 Google Fonts、CDN 圖片，或第三方樣式表）會在未經審查的情況下載入，這可能洩漏你正在查看的網頁，或在離線時悄悄失敗。
沙盒化瀏覽器內編輯器一次解決了上述全部三個問題。HTML 與 CSS 位於兩個具名的文字區域中，因此標記與樣式表在視覺上是分開的，也容易複製。預覽是在一個帶有空白沙盒權杖清單的 iframe中渲染，這表示該 iframe 以獨立來源執行、不允許任何腳本，且預覽中的程式碼完全無法觸及託管它的網頁。預覽上附加了一個預設拒絕的內容安全政策，因此即便你忘了腳本已遭到封鎖而貼上一個 script 標籤，瀏覽器仍會拒絕執行它。
由於資料不會離開你的分頁，這個工作流程在建構上就是私密的。預覽背後沒有上傳步驟、沒有帳號，也沒有 API 呼叫。對於一個用來學習標籤、或檢查某個 flexbox 想法是否真的可行的工具來說，這才是正確的預設，而 Online HTML Editor 也實作了同樣的預設。
如何使用 Online HTML Editor 在瀏覽器中編輯 HTML
這個編輯器刻意保持精簡，因此下列步驟涵蓋了從開啟工具到複製可信結果的完整工作流程。
- 在瀏覽器中開啟 Online HTML Editor。頁面載入時，左側編輯器、右側編輯器，以及預覽區會同時顯示在同一畫面上。
- 在左側編輯器中輸入或編輯一段範圍明確的 HTML 片段。請讓片段保持自給自足：一個帶有標題與段落的 div 就足以觀察渲染行為。HTML 欄位最多接受 50,000 個字元。
- 在右側編輯器中加入選擇性的 CSS。請將右側窗格視為你的樣式表，而非第二個 HTML 區域；CSS 中不區分大小寫的結尾風格序列會被中和，使某個值無法逸出為新的 HTML 元素。
- 按下 Update preview 按鈕，以建立一份全新的srcdoc 文件，並將其放入沙盒化的 iframe 中。在你按下按鈕之前，預覽不會有任何變動，因此你輸入時的編輯狀態會保持穩定。
- 在預覽區中檢視結果。行內樣式以及 data 或 blob 圖片會被渲染，而遠端字型、腳本、表單與導覽則不會。
- 重複進行：編輯任一窗格，然後再次按下 Update preview。當你想將片段移至真正的專案時，直接從編輯器中複製你滿意的 HTML 與 CSS 即可。
沙盒內部：預覽允許與封鎖的內容
預覽是圍繞著一組明確的小規則所建構的，在開始之前先閱讀下表，能省下「為什麼我的圖片沒有載入」的來回循環。允許的行為刻意設計得很狹窄，因為目標是測試標記與樣式，而不是重現正式上線的網頁。
| 能力 | 在 Online HTML Editor 預覽中的行為 |
|---|---|
| JavaScript 執行 | 封鎖。iframe 帶有空白沙盒權杖清單，因此 allow-scripts 權限並不存在。 |
| 行內樣式 | 允許。右側編輯器中的 CSS 會作為樣式表套用於 srcdoc 之中。 |
| 外部 CSS、字型、圖片、影片、API、iframe | 封鎖。內容安全政策預設拒絕所有資源。 |
| Data 或 Blob 圖片 | 允許，用於自給自足的實驗。 |
| 表單提交與導覽 | 封鎖。沒有 target、沒有 form action，且預覽無法導覽託管頁面。 |
| 基礎 URL（Base URL）變更 | 封鎖。base 標籤無法將預覽重新導向至其他來源。 |
| 對託管分頁的同源存取 | 不可用。iframe 以獨立來源執行。 |
| 使用者上傳的內容 | 無。編輯器與預覽皆停留在當前分頁中；不會傳送至伺服器或儲存到帳號。 |
有一個值得知道的細節：你的片段內部的第二個內容安全政策 meta 標籤，無法放寬這些規則。瀏覽器的政策是合併而非取代，因此較嚴格的規則會勝出。這正是避免片段悄悄將預覽變成真正網頁的關鍵。
瀏覽器內編輯器相較於真實 IDE 的限制
瀏覽器內編輯器無法取代完整的開發環境，假裝它能取代只會浪費除錯時間。Online HTML Editor 不會剖析你的標記、不會重構它，也不會警告你無障礙方面的問題；它只會渲染你所撰寫的內容。它不會執行建置系統，因此 Sass、PostCSS，以及元件框架等功能皆不在範圍內。它不會跨瀏覽器進行測試，因此預覽反映的是你開啟該工具的瀏覽器引擎，包括其預設的表單控制項外觀與 CSS 功能支援。
這裡也涉及一個重要的安全性框架問題。預覽並非用來清理你打算發布到其他地方的程式碼的工具。iframe 與內容安全政策在你進行實驗時保護你的分頁，但若在沒有這層保護的情況下將同一份 HTML 複製到正式網站，就會形成不同的安全性表面。請將編輯器視為素描本，然後在目的端的專案中驗證語意、響應式行為、無障礙、SEO，以及你的正式上線 CSP。至於確實需要腳本執行環境、更複雜的前端工作，獨立的沙盒化 JavaScript Playground 才是合理的下一步，而不是勉強將 HTML 編輯器套用在這類用途上。
若你需要更視覺化的常見元件模式教學，關於使用 CSS 與 HTML 製作按鈕的視覺化教學是自然的延伸閱讀，該教學使用同一個編輯器作為其素描本。
何時瀏覽器內編輯器是合適的工具
當重點在於片段本身，而非其周圍的應用程式時，就該選用 Online HTML Editor。它適合用於學習新標籤或偽類、肉眼檢查 flex 容器是否會如你預期般換行、勾勒一個靜態卡片或主視覺、製作一次性電子郵件風格的版面，或檢查小幅 CSS 調整在你將進行測試的同一瀏覽器中的呈現效果。對於任何依賴遠端資源的片段、需要執行 JavaScript 的網頁，或需要跨瀏覽器截圖的工作流程，它都不適合。在這些情況下，請改用真正的靜態專案、元件框架，或符合你所關注之正式上線環境的託管預覽。