這里給大家分享我在網(wǎng)上總結出來的一些知識，希望對大家有所幫助
JSONP是一種很遠古用來解決跨域問題的技術，當然現(xiàn)在實際工作當中很少用到該技術了，但是很多同學在找工作面試過程中還是經(jīng)常被問到，本文將帶您深入了解JSONP的工作原理、使用場景及安全注意事項，讓您輕松掌握JSONP。
JSONP是什么？
JSONP，全稱JSON with Padding，是一項用于在不同域之間進行數(shù)據(jù)交互的技術。這項技術的核心思想是通過在頁面上動態(tài)創(chuàng)建<script>標簽，從另一個域加載包含JSON數(shù)據(jù)的外部腳本文件，然后將數(shù)據(jù)包裹在一個函數(shù)調用中返回給客戶端。JSONP不僅簡單而且強大，尤其在處理跨域數(shù)據(jù)請求時表現(xiàn)出色。
JSONP的工作原理
JSONP的工作流程如下：
-
客戶端請求數(shù)據(jù)：首先，客戶端會創(chuàng)建一個
<script>標簽，向包含JSON數(shù)據(jù)的遠程服務器發(fā)出請求。這個請求通常包括一個名為callback的參數(shù)，用來指定在數(shù)據(jù)加載完畢后應該調用的JavaScript函數(shù)的名稱。
<!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回調函數(shù)
function callback(data) {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `Name: ${data.name}, Age: ${data.age}`;
}
// 創(chuàng)建JSONP請求
const script = document.createElement('script');
script.src = 'http://localhost:3000/data?callback=callback';
document.body.appendChild(script);
</script>
</body>
</html>
- 服務器響應：服務器收到請求后，將JSON數(shù)據(jù)包裝在指定的回調函數(shù)中，并將其返回給客戶端。響應的內容類似于：
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
// 定義一個簡單的JSON數(shù)據(jù)
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}`);
});
-
客戶端處理數(shù)據(jù)：在客戶端的頁面中，我們必須事先定義好名為
callback的函數(shù)，以便在響應被加載和執(zhí)行時被調用。這個函數(shù)會接收JSON數(shù)據(jù)，供我們在頁面中使用。
JSONP使用場景
跨域請求：JSONP主要用于解決跨域請求問題，尤其適用于無法通過CORS或代理等方式實現(xiàn)跨域的情況。 數(shù)據(jù)共享：在多個域名之間共享數(shù)據(jù)，可以利用JSONP實現(xiàn)跨域數(shù)據(jù)共享。 第三方數(shù)據(jù)獲?。寒斝枰獜牡谌骄W(wǎng)站獲取數(shù)據(jù)時，可以使用JSONP技術。
使用JSONP注意事項
JSONP的簡單性和廣泛的瀏覽器支持使其成為跨域數(shù)據(jù)交互的強大工具。然而，我們也必須謹慎使用它，因為它存在一些安全考慮，我們分析下它的優(yōu)缺點：
優(yōu)點：
- 簡單易用：JSONP非常容易實現(xiàn)和使用，無需復雜的配置。
- 跨瀏覽器支持：幾乎所有現(xiàn)代瀏覽器都支持JSONP。
- 繞過同源策略：JSONP幫助我們繞過了同源策略的限制，輕松獲取跨域數(shù)據(jù)。
安全考慮：
- XSS風險：JSONP未經(jīng)過濾的數(shù)據(jù)可能會引起XSS攻擊，因此需要對返回的數(shù)據(jù)進行過濾和驗證。
- CSRF攻擊：使用JSONP時要注意防范CSRF攻擊，可以通過添加隨機數(shù)等方式增強安全性。
- 僅支持GET請求：JSONP只支持GET請求，不適用于POST等其他HTTP方法。
- 難以處理HTTP錯誤：JSONP難以有效處理HTTP錯誤，在請求失敗時的異常處理比較困難。
隨著技術的發(fā)展，JSONP已不再是首選跨域解決方案，但了解它的工作原理仍然有助于我們更深入地理解跨域數(shù)據(jù)交互的基本原理。在實際項目中，根據(jù)具體需求和安全考慮，建議優(yōu)先選擇CORS或代理服務器方式處理跨域問題。文章來源：http://www.zghlxwxcb.cn/news/detail-747108.html
本文轉載于:
https://juejin.cn/post/7280435879548715067
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-747108.html
到了這里，關于記錄--求你了，別再說不會JSONP了的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
