這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 JSONP是一種很遠古用來解決跨域問題的技術，當然現在實際工作當中很少用到該技術了，但是很多同學在找工作面試過程中還是經常被問到，本文將帶您深入瞭解JSONP的工作原理、使用場景及安全註意事項，讓您輕鬆掌握JSONP。 JSONP是什麼？ ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
JSONP是一種很遠古用來解決跨域問題的技術，當然現在實際工作當中很少用到該技術了，但是很多同學在找工作面試過程中還是經常被問到，本文將帶您深入瞭解JSONP的工作原理、使用場景及安全註意事項，讓您輕鬆掌握JSONP。
JSONP是什麼？
JSONP，全稱JSON with Padding，是一項用於在不同域之間進行數據交互的技術。這項技術的核心思想是通過在頁面上動態創建<script>標簽，從另一個域載入包含JSON數據的外部腳本文件，然後將數據包裹在一個函數調用中返回給客戶端。JSONP不僅簡單而且強大，尤其在處理跨域數據請求時表現出色。
JSONP的工作原理
JSONP的工作流程如下：
- 客戶端請求數據：首先，客戶端會創建一個
<script>標簽，向包含JSON數據的遠程伺服器發出請求。這個請求通常包括一個名為callback的參數，用來指定在數據載入完畢後應該調用的JavaScript函數的名稱。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<h1>JSONP Example</h1>
<div id="result"></div>
<script>
// 定義JSONP回調函數
function callback(data) {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `Name: ${data.name}, Age: ${data.age}`;
}
// 創建JSONP請求
const script = document.createElement('script');
script.src = 'http://localhost:3000/data?callback=callback';
document.body.appendChild(script);
</script>
</body>
</html>
- 伺服器響應：伺服器收到請求後，將JSON數據包裝在指定的回調函數中，並將其返回給客戶端。響應的內容類似於：
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
// 定義一個簡單的JSON數據
const jsonData = {
name: 'John',
age: 30,
};
// 添加路由處理JSONP請求
router.get('/data', (ctx) => {
const callback = ctx.query.callback;
if (callback) {
ctx.body = `${callback}(${JSON.stringify(jsonData)})`;
} else {
ctx.body = jsonData;
}
});
// 將路由註冊到Koa應用程式
app.use(router.routes()).use(router.allowedMethods());
// 啟動Koa應用程式
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
- 客戶端處理數據：在客戶端的頁面中，我們必須事先定義好名為
callback的函數，以便在響應被載入和執行時被調用。這個函數會接收JSON數據，供我們在頁面中使用。
JSONP使用場景
跨域請求：JSONP主要用於解決跨域請求問題，尤其適用於無法通過CORS或代理等方式實現跨域的情況。 數據共用：在多個功能變數名稱之間共用數據，可以利用JSONP實現跨域數據共用。 第三方數據獲取：當需要從第三方網站獲取數據時，可以使用JSONP技術。
使用JSONP註意事項
JSONP的簡單性和廣泛的瀏覽器支持使其成為跨域數據交互的強大工具。然而，我們也必須謹慎使用它，因為它存在一些安全考慮，我們分析下它的優缺點：
優點：
- 簡單易用：JSONP非常容易實現和使用，無需複雜的配置。
- 跨瀏覽器支持：幾乎所有現代瀏覽器都支持JSONP。
- 繞過同源策略：JSONP幫助我們繞過了同源策略的限制，輕鬆獲取跨域數據。
安全考慮：
- XSS風險：JSONP未經過濾的數據可能會引起XSS攻擊，因此需要對返回的數據進行過濾和驗證。
- CSRF攻擊：使用JSONP時要註意防範CSRF攻擊，可以通過添加隨機數等方式增強安全性。
- 僅支持GET請求：JSONP只支持GET請求，不適用於POST等其他HTTP方法。
- 難以處理HTTP錯誤：JSONP難以有效處理HTTP錯誤，在請求失敗時的異常處理比較困難。
隨著技術的發展，JSONP已不再是首選跨域解決方案，但瞭解它的工作原理仍然有助於我們更深入地理解跨域數據交互的基本原理。在實際項目中，根據具體需求和安全考慮，建議優先選擇CORS或代理伺服器方式處理跨域問題。
本文轉載於:
https://juejin.cn/post/7280435879548715067
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
