JSONP (JSON with Padding) 是一種用於繞過瀏覽器同源策略的技巧,它允許網頁從不同域名的伺服器請求資料。它利用了 <script>
標籤不受同源策略限制的特點。
原理:
- 動態建立
<script>
標籤: 前端 JavaScript 程式碼動態建立一個<script>
標籤。 - 設定
src
屬性: 將目標伺服器的 URL 設定為<script>
標籤的src
屬性。這個 URL 包含要請求的資料以及一個回撥函式名。例如:https://example.com/data?callback=myCallback
。 - 伺服器端響應: 伺服器端接收到請求後,將資料包裝在指定的回撥函式中,然後返回 JavaScript 程式碼。例如:
myCallback({"name": "Gemini", "version": "Pro"});
- 瀏覽器執行回撥函式: 瀏覽器下載並執行返回的 JavaScript 程式碼。這會呼叫預先定義好的回撥函式
myCallback
,並將資料作為引數傳遞給它。 - 前端處理資料: 在
myCallback
函式中,前端程式碼可以訪問接收到的資料並進行處理。
解決的問題:
JSONP 主要解決的是跨域資料請求的問題。在 Web 開發中,同源策略限制了從一個源載入的文件或指令碼如何與來自另一個源的資源進行互動。這是一種重要的安全機制,可以防止惡意網站竊取使用者資料。然而,它也限制了從不同域名獲取資料的合法需求。JSONP 提供了一種變通方案,允許跨域請求資料。
侷限性:
- 只支援 GET 請求: JSONP 只能用於 GET 請求,不支援 POST 等其他 HTTP 方法。這是因為
<script>
標籤只能發出 GET 請求。 - 安全性問題: 由於 JSONP 依賴於執行從外部伺服器返回的 JavaScript 程式碼,因此存在一定的安全風險。如果目標伺服器不可信,可能會返回惡意程式碼。
- 錯誤處理困難: JSONP 沒有提供標準的錯誤處理機制。如果請求失敗,很難獲取詳細的錯誤資訊。
現代替代方案:
如今,更推薦使用 CORS (Cross-Origin Resource Sharing) 來實現跨域請求。CORS 是一種更安全、更靈活的解決方案,它允許伺服器明確指定哪些域名可以訪問其資源。 如果伺服器支援 CORS,則應優先使用 CORS 而不是 JSONP。 只有在 dealing with legacy systems 不支援 CORS 的情況下才考慮使用 JSONP。