理解 JSLike：一個符合 CSP 安全性的 JavaScript 與 TypeScript 直譯器
在網頁瀏覽器中執行動態程式碼時，嚴格的內容安全政策（Content Security Policy，CSP）常常成為障礙。為了防止跨站腳本（Cross‑Site Scripting，XSS）攻擊，許多現代應用程式會停用 eval() 與 new Function() 建構子，實質上阻斷了執行動態產生腳本的能力。這對於開發需要即時程式碼執行的工具（如 Playground、互動教學或外掛系統）而言，帶來了相當大的挑戰。
JSLike 正是為了解決此問題而誕生，提供一個符合 CSP 安全性的直譯器，能處理不僅是標準 JavaScript，還包括 TypeScript（TS）、JSX 與 TSX。透過在自身環境中解釋程式碼，而非使用瀏覽器原生引擎執行，JSLike 能繞過 CSP 所施加的限制，同時保持高度的語言相容性。
JSLike 的運作方式
與傳統的轉譯器（將 TypeScript 或 JSX 轉換成瀏覽器可執行的 JavaScript）不同，JSLike 充當直譯器。它會解析提供的原始碼，並在自己的執行環境中執行其邏輯。這樣的架構選擇對安全性至關重要：因為它不依賴 eval() 或其他不安全的函式，自然不會觸發 CSP 違規。
支援的語言
JSLike 的主要優勢之一是對現代 Web 生態系的廣泛支援。它設計用來處理：
- JavaScript（JS）： 標準 ECMAScript 邏輯。
- TypeScript（TS）： 含型別註記的程式碼，允許更健全的邏輯定義。
- JSX/TSX： React 與其他 UI 函式庫大量使用的語法擴充，讓直譯器能處理類似元件的結構。
折衷：直譯 vs. 原生執行
雖然 JSLike 解決了 CSP 的困境，但使用直譯器而非原生執行必然伴隨一些折衷。原生 JavaScript 執行由 V8、SpiderMonkey 等引擎高度優化，對大多數任務而言可提供近乎即時的效能。相較之下，直譯器必須手動遍歷抽象語法樹（AST）並自行管理狀態，天然較慢。
對於大多數使用情境——例如文件網站中的小段程式碼或輕量的內部工具——這種效能損失可以忽略不計。然而，對於計算密集型任務而言，直譯的開銷會成為限制因素。
使用案例與實務應用
JSLike 在安全性不可妥協且仍需彈性的環境中特別有價值。可能的應用包括：
- 互動式文件說明：允許使用者直接在瀏覽器中執行程式碼範例，同時不會破壞網站的安全標頭。
- 教育 Playground：為學生提供安全的環境，以實驗 TSX 或 TypeScript，且不需要完整的後端編譯管線。
- 沙箱化外掛：讓第三方擴充功能在與主應用全域範圍隔離的情況下執行邏輯，並受 CSP 保護。
透過提供在符合 CSP 的前提下執行 TSX 等複雜語法的方式，JSLike 填補了前端工具領域中的一個利基，平衡了動態執行的需求與現代 Web 安全標準的必要性。