JSONP 跨域原理及實現

佩奇烹飪家發表於2022-06-07
JSON跨域

前言

在日常專案開發過程中，跨域以及如何解決跨域問題是前後端開發同學繞不開的話題。JSONP 跨域就是一種經典的解決跨域問題的方案。

?溫馨提示：本文全文 1921 個字，推薦閱讀時間 10min ，加油老鐵！

一、同源策略和跨域

1.1 同源策略

1.1.1 什麼是同源

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

20201031133802801.png

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 瀏覽器對跨域請求的攔截

img-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto.webp

注意：瀏覽器允許發起跨域請求，但是，跨域請求回來的資料，會被瀏覽器攔截，無法被頁面獲取到！

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 應用流程

  1. 設定一個script標籤

    <script src="http://jsonp.js?callback=cb"></script>

// 或

let script = document.createElement('script');
script.src = "http://jsonp.js?callback=cb";
body.append(script)
  2. 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');
        }
    })();
});
  1. 客戶端接收到返回的 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 後的引數並且限制長度（進行字元轉義，例如<換成&lt，>換成&gt）等，這樣返回的指令碼內容會變成文字格式，指令碼將不會執行。

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

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

參考

前端也需要了解的 JSONP 安全

跨域與JSONP_小小段的部落格-CSDN部落格

跨域資源共享 CORS 詳解 - 阮一峰的網路日誌

相關文章