前言

jsonp是一種跨域通訊的手段

原理

原理：
事先定義一個用於獲取跨域響應資料的回撥函式，並通過沒有同源策略限制的script標籤發起一個請求（將回調函式的名稱放到這個請求的query引數裡），然後服務端返回這個回撥函式的執行，並將需要響應的資料放到回撥函式的引數裡，前端的script標籤請求到這個執行的回撥函式後會立馬執行，於是就拿到了執行的響應資料。

缺點：
jsONP只能發起GET請求

實現

第一步：設定一個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實現，其實就是拼接url，然後將動態新增一個script元素到頭部。

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');
});

可靠的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);
    }
});

廣州品牌設計公司https://www.houdianzi.com

JSONP安全性問題

CSRF攻擊

前端構造一個惡意頁面，請求JSONP介面，收集服務端的敏感資訊。如果JSONP介面還涉及一些敏感操作或資訊（比如登入、刪除等操作），那就更不安全了。

解決方法：驗證JSONP的呼叫來源（Referer），服務端判斷Referer是否是白名單，或者部署隨機Token來防禦。

XSS漏洞

不嚴謹的 content-type導致的 XSS 漏洞，想象一下 JSONP 就是你請求http://youdomain.com?callback...然後返回 douniwan({ data })，那假如請求http://youdomain.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 後的引數並且限制長度（進行字元轉義，例如<換成&lt，>換成&gt）等，這樣返回的指令碼內容會變成文字格式，指令碼將不會執行。

伺服器被黑，返回一串惡意執行的程式碼

可以將執行的程式碼轉發到服務端進行校驗JSONP內容校驗，再返回校驗結果。