不，在此 CSV 表格圖表產生器中，無論是在頁面上的預覽，或是匯出的 SVG 檔案中，都無法執行 HTML 或 JavaScript。您貼上的每個值都會被視為純文字，而不是標記或腳本。頁面上的預覽是由 React 文位元組點建構而成，這些節點會呈現字元，但不會解讀 HTML，所以看起來像 <script>alert(1)</script> 的儲存格會在頁面上以完全相同的字元顯示。下載的圖片使用 SVG 矩形和文字，其中每個字串在被寫入檔案之前都會經過 XML 跳脫處理，因此角括號、& 符號和引號會變成實體而非標籤。無效的 XML 控制字元會被取代，而不會保留為可執行的標記。此工具僅接受以逗號分隔的文字，使用狀態機進行解析，會拒絕格式錯誤的輸入而不是猜測，並且永遠不會執行解析後的內容。所有資料都不會離開您的瀏覽器 — 沒有標籤、數值、註記、名稱或產生的圖像會被上傳 — 因此儲存格是否可能觸發遠端行為的問題根本不會產生。本文將說明「執行 HTML 或 JavaScript」對於表格儲存格究竟意味著什麼、表格圖表產生器如何保持預覽和 SVG 處於非作用狀態、放心貼上 CSV 的確切步驟，以及強化安全界限的限制。
「執行 HTML 或 JavaScript」對於表格儲存格意味著什麼
當有人詢問儲存格是否能執行 HTML 或 JavaScript 時，他們通常是在問以下兩件事之一。第一，將類似 <b>bold</b> 的內容貼到 CSV 儲存格中，是否會在產生的圖表中產生粗體文字？第二，將 <script>alert('x')</script> 貼上後，是否會在開啟表格時觸發腳本？在這兩種情況下，此工具的答案都是否定的。CSV 是一種純文字格式，沒有格式化或腳本的概念；它儲存的是以分隔符號分隔的記錄，而任何超出顯示字面字元的行為都來自於顯示 CSV 的程式。例如，一個使用 innerHTML 建立 HTML 字串的天真轉換器，可能會將 <b> 解讀為粗體標籤，並執行嵌入的 <script> 標籤，這就是為什麼某些通用轉換器會被標記為跨站腳本風險的原因。表格圖表產生器完全避開了這條路徑：它不會從您的 CSV 組裝 HTML 字串，不會將產生的 SVG 注入文件，也不會為解析後的值綁定事件處理常式。
預覽如何將儲存格保持為純文字
選擇「產生表格圖表」後看到的頁面預覽是一個真正的 HTML 表格，因此其結構在語意上是有意義的 — 頁首和主體儲存格保持可選取且可存取。決定差異的關鍵在於這些儲存格如何被填入內容。預覽使用 React 文位元組點，而非 innerHTML 或 dangerouslySetInnerHTML。文位元組點是 React 渲染樹中的葉節點，儲存一個字串；該字串會以文字形式寫入 DOM，這表示 <、>、& 和 " 等字元會以其字面 Unicode 形式插入。它們不會被解析為標籤分隔符號或實體參考。因此，內容為 <img src=x> 的儲存格會將角括號和「img」這個詞顯示為可見字元，而不是圖片元素。儲存格內容上沒有綁定任何事件處理常式、沒有對值進行 eval，也沒有讓文字作為程式碼執行的執行環境。
下載的 SVG 如何保持非作用狀態
您下載的檔案是一個獨立的 SVG，由作為儲存格方框的 <rect> 矩形和作為值的 <text> 元素組成。每個進入 <text> 節點的字串在被寫入之前都會經過 XML 跳脫。跳脫處理會將 & 符號、角括號、引號和撇號替換為 XML 實體，然後再寫入字串。如果儲存格包含類似 </text><script>...</script> 的內容，則結尾標籤會變成 </text><script>...</script>，開啟 SVG 時不會關閉任何內容，也不會啟動任何內容。無效的 XML 控制字元（即超出允許 XML 範圍的不可列印位元組）會被替換為安全的替代字元，而不是原樣輸出。產生的檔案帶有明確的寬度、高度、viewBox、image role 和可存取的標籤，並使用固定的 Arial 樣式文字和固定顏色，因此無論您將它放在哪裡都是自帶的。
| CSV 儲存格中的輸入 | 頁面預覽顯示的內容 | 匯出的 SVG 包含的內容 |
|---|---|---|
| <b>bold</b> | 字面字元 <b>bold</b>，沒有格式化 | <b>bold</b> 在 <text> 元素內部 |
| <script>alert(1)</script> | 字面字元，不會出現對話框 | XML 跳脫後的實體；不會輸出 <script> 標籤 |
| Said "hello" | Said "hello"（儲存格值，從 "Said ""hello""" 解析） | Said "hello" 作為文字內容 |
| Ada, A. | Ada, A.（一個儲存格，在 CSV 中以引號標記為 "Ada, A."） | Ada, A. 作為文字內容；逗號未拆分儲存格 |
放心貼上 CSV：三步驟逐步說明
- 貼上包含一個頁首列和 1–50 個資料列的 CSV，並將任何包含逗號或換行符號的儲存格用引號標記。像是 Ada, A. 這樣的欄位會變成 "Ada, A."，而包含字面引號的儲存格會變成 "Said ""hello"""。解析器會讀取逗號、CRLF 或 LF 行結尾、引號欄位、嵌入的逗號和雙引號；對於形狀不符的列，它會拒絕而不是默默地修正它們。
- 選擇「產生表格圖表」，並逐列比較解析後的 HTML 預覽與來源資料。確認第一列被視為頁首、每個頁首都包含文字、且後續每列的儲存格數量與頁首列完全相同。預覽是您對解析值的視覺確認，而非試算表，因此您不應該看到公式、排序控制項、篩選器、合併儲存格或自動合計 — 只有字面文字。
- 下載跳脫後的 SVG，並在最終顯示尺寸下檢查較長或較寬的儲存格，然後再發布。圖片將顯示的儲存格限制為 30 個 Unicode 字元，以保持欄寬受限；HTML 預覽會保留完整的解析值，因此如果儲存格長度超過 30 個字元，SVG 中出現的任何可見截斷都是預期中的情況。請檢查拼寫、列對齊、目的地中的顏色對比以及最終的實際尺寸。
強化安全界限的限制
上述安全特性與嚴格的輸入限制相輔相成，也使得注入攻擊更加不可行。解析器接受 2 到 10 個欄位以及 1 到 50 個主體列，並需要一個非空的頁首列。每個儲存格的上限為 120 個 Unicode 字元，整個輸入的上限為 20,000 個 JavaScript 字元。作為實際驗算：最大的合法表格為 10 欄 × 50 列主體，共 500 個儲存格；按照 120 個字元的儲存格上限計算，這將是 60,000 個字元的儲存格文字。20,000 字元的輸入限制會在此之前就達到，因此當表格達到最大寬度時，單一儲存格的實際上限下降為 20,000 ÷ 500 = 40 個字元。較窄表格中的儲存格仍會遵守每個儲存格 120 個 Unicode 字元的上限，因此界限始終是兩者中較小的那一個。該上限使得檔案在普通裝置上易於管理，並使解析保持確定性。引號欄位必須以引號開頭，結尾引號之後只能是逗號或換行符號，因此任何不符合引號規則的「類程式碼」內容會在開始時就被拒絕，而不是被重新解讀。
當您希望儲存格呈現不同行為時
在某些情況下，使用其他工具才是正確的選擇。如果您希望以數值大小為主，長條圖或圓餅圖的傳達效果會比純文字表格更快。對於有開始和結束日期的任務，帶狀圖（甘特圖）能以小型表格無法做到的方式表達持續時間。如果您的來源是 Markdown、現有的 HTML 表格、XLSX 活頁簿、Google Sheets 連結、遠端 URL、JSON 物件、以 Tab 分隔的文字，或是使用分號分隔的地區性 CSV，表格圖表產生器將無法解讀 — 請先將來源轉換為以逗號分隔的 UTF-8 文字，並依照專門的逐步說明（例如 如何從 CSV 製作表格圖表 指南）操作，如果這是您的起點的話。該圖片也不會保留試算表的每個功能，對於非常寬的表格可能需要水平捲動，並且在以小尺寸嵌入時可能難以閱讀。請將來源 CSV 保留為權威的可編輯記錄，並僅在比較每個預覽儲存格與來源後重新下載 SVG。在分頁關閉後不會保留任何資料。
如需更深入的探討，請參閱長條圖產生器範例：從範例資料到 SVG 的逐步說明。