前言

在日常項(xiàng)目開發(fā)過程中，跨域以及如何解決跨域問題是前后端開發(fā)同學(xué)繞不開的話題。JSONP 跨域就是一種經(jīng)典的解決跨域問題的方案。

一、同源策略和跨域

1.1 同源策略

1.1.1 什么是同源

如果兩個頁面的協(xié)議，域名和端口都相同，則兩個頁面具有相同的源例如，下表給出了相對于 http://www.test.com/index.html 頁面的同源檢測：

1.1.2 什么是同源策略

同源策略（英文全稱 Same origin policy）是瀏覽器提供的一個安全功能。

MDN 官方給定的概念：同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進(jìn)行交互。這是一個用于隔離潛在惡意文件的重要安全機(jī)制。

通俗的理解：瀏覽器規(guī)定，A 網(wǎng)站的 JavaScript，不允許和非同源的網(wǎng)站 C 之間，進(jìn)行資源的交互，例如：

• 無法讀取非同源網(wǎng)頁的 Cookie、LocalStorage 和 IndexedDB
• 無法接觸非同源網(wǎng)頁的 DOM
• 無法向非同源地址發(fā)送 AJAX 請求

1.2 跨域

1.2.1 什么是跨域

同源指的是兩個 URL 的協(xié)議、域名、端口一致，反之，則是跨域。

出現(xiàn)跨域的根本原因：瀏覽器的同源策略不允許非同源的 URL 之間進(jìn)行資源的交互。

網(wǎng)頁：http://www.test.com/index.html

接口：http://www.api.com/userlist

1.2.2 瀏覽器對跨域請求的攔截

注意：瀏覽器允許發(fā)起跨域請求，但是，跨域請求回來的數(shù)據(jù)，會被瀏覽器攔截，無法被頁面獲取到！

1.2.3 如何實(shí)現(xiàn)跨域數(shù)據(jù)請求

實(shí)現(xiàn)跨域數(shù)據(jù)請求方法有很多，比如JSONP、CORS、postMessage、Websocket、Nginx反向代理、window.name + iframe 、document.domain + iframe、location.hash + iframe等。其中最主要的三種解決方案，分別是 JSONP 和 CORS 和 Nginx 反向代理。

• JSONP：出現(xiàn)的早，兼容性好（兼容低版本IE）。是前端程序員為了解決跨域問題，被迫想出來的一種臨時解決方案。缺點(diǎn)是只支持 GET 請求，不支持 POST 請求。
• CORS：出現(xiàn)的較晚，它是 W3C 標(biāo)準(zhǔn)，屬于跨域 AJAX 請求的根本解決方案。支持 GET 和 POST 請求。缺點(diǎn)是不兼容某些低版本的瀏覽器。
• Nginx反向代理：同源策略對服務(wù)器不加限制，是最簡單的跨域方式。只需要修改nginx的配置即可解決跨域問題，支持所有瀏覽器，支持 session，不需要修改任何代碼，并且不會影響服務(wù)器性能。

二、JSONP 概述

JSONP (JSON with Padding) 是 JSON 的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。

2.1 JSONP原理

事先定義一個用于獲取跨域響應(yīng)數(shù)據(jù)的回調(diào)函數(shù)，并通過沒有同源策略限制的script標(biāo)簽發(fā)起一個請求（將回調(diào)函數(shù)的名稱放到這個請求的query參數(shù)里），然后服務(wù)端返回這個回調(diào)函數(shù)的執(zhí)行，并將需要響應(yīng)的數(shù)據(jù)放到回調(diào)函數(shù)的參數(shù)里，前端的script標(biāo)簽請求到這個執(zhí)行的回調(diào)函數(shù)后會立馬執(zhí)行，于是就拿到了執(zhí)行的響應(yīng)數(shù)據(jù)。

2.2 優(yōu)點(diǎn)

• 它不像XMLHttpRequest對象實(shí)現(xiàn)的Ajax請求那樣受到同源策略的限制
• 它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持
• 并且在請求完畢后可以通過調(diào)用callback的方式回傳結(jié)果

2.3 缺點(diǎn)

• 它只支持GET請求而不支持 POST 等其它類型的 HTTP 請求
• 它只支持跨域 HTTP 請求這種情況，不能解決不同域的兩個頁面之間如何進(jìn)行JavaScript 調(diào)用的問題

三、JSONP 應(yīng)用流程

• 設(shè)定一個script標(biāo)簽

  <script src="http://jsonp.js?callback=cb"></script>
  
  // 或
  
  let script = document.createElement('script');
  script.src = "http://jsonp.js?callback=cb";
  body.append(script)

• callback定義了一個函數(shù)名，而遠(yuǎn)程服務(wù)端通過調(diào)用指定的函數(shù)并傳入?yún)?shù)來實(shí)現(xiàn)傳遞參數(shù)，將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 腳本，開始解析和執(zhí)行function(response)

四、JSONP 實(shí)現(xiàn)

3.1 簡單的實(shí)例：

一個簡單的 JSONP 實(shí)現(xiàn)，其實(shí)就是拼接URL，然后將動態(tài)添加一個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 
});

服務(wù)器端代碼：

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 實(shí)例：

(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++;

        // 添加回調(diào)函數(shù)
        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;

        // 傳遞的是一個匿名的回調(diào)函數(shù)，要執(zhí)行的話，暴露為一個全局方法
        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攻擊

前端構(gòu)造一個惡意頁面，請求JSONP接口，收集服務(wù)端的敏感信息。如果JSONP接口還涉及一些敏感操作或信息（比如登錄、刪除等操作），那就更不安全了。

解決方法：驗(yàn)證JSONP的調(diào)用來源（Referer），服務(wù)端判斷 Referer 是否是白名單，或者部署隨機(jī) Token 來防御。

5.2 XSS漏洞

不嚴(yán)謹(jǐn)?shù)?nbsp;content-type 導(dǎo)致的 XSS 漏洞，想象一下 JSONP 就是你請求 http://abc.com?callback=douniwan, 然后返回 douniwan({ data })，那假如請求 http://abc.com?callback=<script>alert(1)</script> 不就返回 <script>alert(1)</script>({ data })了嗎，如果沒有嚴(yán)格定義好 Content-Type（ Content-Type: application/json ），再加上沒有過濾 callback 參數(shù)，直接當(dāng) HTML 解析了，就是一個赤裸裸的 XSS 了。

解決方法：嚴(yán)格定義 Content-Type: application/json，然后嚴(yán)格過濾 callback 后的參數(shù)并且限制長度（進(jìn)行字符轉(zhuǎn)義，例如<換成&lt，>換成&gt）等，這樣返回的腳本內(nèi)容會變成文本格式，腳本將不會執(zhí)行。

5.3 服務(wù)器被黑，返回一串惡意執(zhí)行的代碼

可以將執(zhí)行的代碼轉(zhuǎn)發(fā)到服務(wù)端進(jìn)行校驗(yàn) JSONP 內(nèi)容校驗(yàn)，再返回校驗(yàn)結(jié)果。

參考

前端也需要了解的 JSONP 安全

跨域與JSONP_小小段的博客-CSDN博客

跨域資源共享 CORS 詳解 - 阮一峰的網(wǎng)絡(luò)日志

總結(jié)

到此這篇關(guān)于JSONP跨域原理以及實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)JSONP跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！