深入理解 JSONP：跨域請求的經典解決方案與安全實踐

什麼是 JSONP？

JSONP（JSON with Padding）是一種非官方的跨域通訊協議。它利用 <script> 標籤不受同源策略限制的特性，透過動態插入腳本標籤向伺服器發起請求，伺服器則返回一段包裹在回呼函數中的 JavaScript 代碼，從而實現跨域數據傳輸。雖然現代開發多改用 CORS，但 JSONP 仍是理解跨域機制的重要基石。

為什麼需要 JSONP？

瀏覽器的同源策略禁止網頁使用 XMLHttpRequest 向不同源的伺服器發送請求。然而 <script>、<img>、<link> 等標籤的 src/href 屬性不受此限制。JSONP 巧妙地利用這一點：客戶端定義一個回呼函數，伺服器返回 callbackName({...json data...}) 形式的腳本，瀏覽器執行該腳本時便會自動調用回呼，將數據傳遞給業務邏輯。

核心實作流程

1. 頁面載入時，動態建立 <script src="/json/people/cleverpig/jsonp/refreshPeopleInfo"></script>，請求伺服器資料。
2. 伺服器輸出 refreshPeopleInfo({"name":"...","age":...,"talking":"..."})。
3. 瀏覽器執行腳本，觸發 refreshPeopleInfo 函數，更新頁面顯示。
4. 使用者點擊「修改」按鈕時，透過表單提交（或 AJAX POST）將新資料送至伺服器，伺服器回傳 JSON 字串，前端解析後更新畫面。

JSONP 的安全風險與防護

核心隱憂

• 任意代碼執行：伺服器返回的腳本在當前頁面上下文中執行，若伺服器被攻破或存在惡意接口，可注入任意 JS 代碼（竊取 Cookie、鍵盤記錄、重定向釣魚等）。
• 資料洩露：JSONP 接口通常無 CSRF 保護，攻擊者可誘導受害者訪問含有 JSONP 請求的頁面，竊取敏感資料。
• eval() 濫用：早期庫常用 eval() 解析 JSON，若輸入未嚴格驗證，極易導致代碼注入。

安全防護最佳實踐

1. 嚴格驗證回呼函數名：僅允許字母、數字、底線組合，拒絕括號、分號等特殊字符。
2. 採用 RFC 4627 正則檢查：在解析前以正則確保字串僅包含合法 JSON 字符，示例：

var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
    text.replace(/"(\\.|[^"\\])*"/g, ''))) &&
    eval('(' + text + ')');

3. 改用 JSON.parse()：現代瀏覽器原生支援，避免 eval() 風險。
4. 設置 HTTP 標頭：回應加上 Content-Type: application/javascript; charset=utf-8，並配合 X-Content-Type-Options: nosniff。
5. 限制 Referer / 實施 Token 驗證：僅允許受信任域名調用，或要求請求攜帶一次性 Token。
6. 優先遷移至 CORS：新專案應採用 CORS（Cross-Origin Resource Sharing），提供更精細的權限控制與更佳安全性。

總結

JSONP 以極簡方式解決了早期跨域難題，但其本質是「信任伺服器執行任意腳本」，安全隱患難以根除。現代前端開發應以 CORS 為主，JSONP 僅作為舊系統維護或極少數不支援 CORS 環境的備選方案，並嚴格落實上述防護措施。