前言
在日常項目開發過程中，跨域以及如何解決跨域問題是前後端開發同學繞不開的話題。JSONP 跨域就是一種經典的解決跨域問題的方案。
💡温馨提示：本文全文 1921 個字，推薦閲讀時間 10min ，加油老鐵！
一、同源策略和跨域
1.1 同源策略
1.1.1 什麼是同源
如果兩個頁面的協議，域名和端口都相同，則兩個頁面具有相同的源
例如，下表給出了相對於 http://www.test.com/index.html 頁面的同源檢測：
1.1.2 什麼是同源策略
同源策略（英文全稱 Same origin policy）是瀏覽器提供的一個安全功能。
MDN 官方給定的概念：同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。
通俗的理解：瀏覽器規定，A 網站的 JavaScript，不允許和非同源的網站 C 之間，進行資源的交互，例如：
- 無法讀取非同源網頁的
Cookie、LocalStorage和IndexedDB - 無法接觸非同源網頁的
DOM - 無法向非同源地址發送
AJAX請求
1.2 跨域
1.2.1 什麼是跨域
同源指的是兩個 URL 的協議、域名、端口一致，反之，則是跨域。
出現跨域的根本原因：瀏覽器的同源策略不允許非同源的 URL 之間進行資源的交互。
網頁：http://www.test.com/index.html
接口：http://www.api.com/userlist
1.2.2 瀏覽器對跨域請求的攔截
注意：瀏覽器允許發起跨域請求，但是，跨域請求回來的數據，會被瀏覽器攔截，無法被頁面獲取到！
1.2.3 如何實現跨域數據請求
實現跨域數據請求方法有很多，比如JSONP、CORS、postMessage、Websocket、Nginx反向代理、window.name + iframe 、document.domain + iframe、location.hash + iframe等。其中最主要的三種解決方案，分別是 JSONP 和 CORS 和 Nginx 反向代理。
- JSONP：出現的早，兼容性好（兼容低版本IE）。是前端程序員為了解決跨域問題，被迫想出來的一種臨時解決方案。缺點是隻支持
GET請求，不支持POST請求。 - CORS：出現的較晚，它是 W3C 標準，屬於跨域
AJAX請求的根本解決方案。支持GET和POST請求。缺點是不兼容某些低版本的瀏覽器。 - Nginx反向代理：同源策略對服務器不加限制，是最簡單的跨域方式。只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持
session，不需要修改任何代碼，並且不會影響服務器性能。
二、JSONP 概述
JSONP (JSON with Padding) 是 JSON 的一種“使用模式”，可用於解決主流瀏覽器的跨域數據訪問的問題。
2.1 JSONP原理
事先定義一個用於獲取跨域響應數據的回調函數，並通過沒有同源策略限制的script標籤發起一個請求（將回調函數的名稱放到這個請求的query參數裏），然後服務端返回這個回調函數的執行，並將需要響應的數據放到回調函數的參數裏，前端的script標籤請求到這個執行的回調函數後會立馬執行，於是就拿到了執行的響應數據。
2.2 優點
- 它不像
XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制 - 它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要
XMLHttpRequest或ActiveX的支持 - 並且在請求完畢後可以通過調用
callback的方式回傳結果
2.3 缺點
- 它只支持
GET請求而不支持POST等其它類型的 HTTP 請求 - 它只支持跨域 HTTP 請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript 調用的問題
三、JSONP 應用流程
-
設定一個
script標籤<script src="http://jsonp.js?callback=cb"></script> // 或 let script = document.createElement('script'); script.src = "http://jsonp.js?callback=cb"; body.append(script) callback定義了一個函數名，而遠程服務端通過調用指定的函數並傳入參數來實現傳遞參數，將function(response)傳遞迴客户端
router.get('/', function (req, res, next) {
(() => {
const data = {
x: 10
};
let params = req.query;
if (params.callback) {
let callback = params.callback;
console.log(params.callback);
res.send(`${callback}(${JSON.stringify(data.x)})`);
} else {
res.send('err');
}
})();
});
- 客户端接收到返回的 JS 腳本，開始解析和執行
function(response)
四、JSONP 實現
3.1 簡單的實例：
一個簡單的 JSONP 實現，其實就是拼接URL，然後將動態添加一個script元素到頭部。
前端 JSONP 方法示例：
function jsonp(req) {
var script = document.createElement('script');
var url = req.url + '?callback=' + req.callback.name;
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}前端 JS 示例：
function hello(res){
alert('hello ' + res.data);
}
jsonp({
url : '',
callback : hello
});服務器端代碼：
var http = require('http');
var urllib = require('url');
var port = 8080;
var data = {'data':'world'};
http.createServer(function(req,res){
var params = urllib.parse(req.url,true);
if(params.query.callback){
console.log(params.query.callback);
// jsonp
var str = params.query.callback + '(' + JSON.stringify(data) + ')';
res.end(str);
} else {
res.end();
}
}).listen(port,function(){
console.log('jsonp server is on');
});3.2 可靠的 JSONP 實例：
(function (global) {
var id = 0,
container = document.getElementsByTagName("head")[0];
function jsonp(options) {
if(!options || !options.url) return;
var scriptNode = document.createElement("script"),
data = options.data || {},
url = options.url,
callback = options.callback,
fnName = "jsonp" + id++;
// 添加回調函數
data["callback"] = fnName;
// 拼接url
var params = [];
for (var key in data) {
params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
}
url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
url += params.join("&");
scriptNode.src = url;
// 傳遞的是一個匿名的回調函數，要執行的話，暴露為一個全局方法
global[fnName] = function (ret) {
callback && callback(ret);
container.removeChild(scriptNode);
delete global[fnName];
}
// 出錯處理
scriptNode.onerror = function () {
callback && callback({error:"error"});
container.removeChild(scriptNode);
global[fnName] && delete global[fnName];
}
scriptNode.type = "text/javascript";
container.appendChild(scriptNode)
}
global.jsonp = jsonp;
})(this);使用示例：
jsonp({
url : "www.example.com",
data : {id : 1},
callback : function (ret) {
console.log(ret);
}
});五、JSONP安全性問題
5.1 CSRF攻擊
前端構造一個惡意頁面，請求JSONP接口，收集服務端的敏感信息。如果JSONP接口還涉及一些敏感操作或信息（比如登錄、刪除等操作），那就更不安全了。
解決方法：驗證JSONP的調用來源（Referer），服務端判斷 Referer 是否是白名單，或者部署隨機 Token 來防禦。
5.2 XSS漏洞
不嚴謹的 content-type 導致的 XSS 漏洞，想象一下 JSONP 就是你請求 http://abc.com?callback=douniwan, 然後返回 douniwan({ data })，那假如請求 http://abc.com?callback=<script>alert(1)</script> 不就返回 <script>alert(1)</script>({ data })了嗎，如果沒有嚴格定義好 Content-Type（ Content-Type: application/json ），再加上沒有過濾 callback 參數，直接當 HTML 解析了，就是一個赤裸裸的 XSS 了。
解決方法：嚴格定義 Content-Type: application/json，然後嚴格過濾 callback 後的參數並且限制長度（進行字符轉義，例如<換成<，>換成>）等，這樣返回的腳本內容會變成文本格式，腳本將不會執行。
5.3 服務器被黑，返回一串惡意執行的代碼
可以將執行的代碼轉發到服務端進行校驗 JSONP 內容校驗，再返回校驗結果。
