深入剖析jsonp跨域

一、jsonp跨域是什麼

1、由來

在Web應用中，為了保證用戶瀏覽的速度，許多網頁會採用Ajax技術在頁面上進行部分刷新，在這個過程中，為了保護用戶的信息和系統的安全，服務器放置了許多控制訪問的機制，如同源策略(Same Origin Policy)。這個策略禁止一個網頁去調用另一個來源的頁面上的資源。例如，stogege.com的網頁腳本無法取得www.google.com的內容，因為它們不是同源。

但有些情況下，我們需要在不同的域名或端口之間進行數據交互，這時候就需要使用jsonp跨域技術。

2、原理

JSONP(「JSON with padding」)是JSON的一種「使用模式」，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。Jsonp的實現方法就是在服務器端加上一個回調函數，然後返回時將數據作為這個回調函數的參數，然後客戶端通過 script 標籤引入這個 URL，就可以拿到遠程返回的 JS 代碼，並在回調函數裏面拿到拿到數據了。由於同源策略的限制，XmlHttpRequest無法跨越域名獲取數據，而script標籤的SRC屬性是沒有跨域限制的。這樣適用JSONP實現跨域數據請求。

// client端
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}
 
window.onload = function () {
  addScriptTag('http://domain2.com:8080/login?user=admin&callback=foo');
};
 
function foo(data) {
  alert('Your name is ' + data.name);
}
 
// server端
if (url.parse(req.url, true).pathname === '/login') {
  var data = {name: 'admin'};
  var callback = url.parse(req.url, true).query.callback;
  if (callback) {
    res.end(callback + '(' + JSON.stringify(data) + ')');   
  } else {
    res.end(JSON.stringify(data));
  }
}

二、jsonp的優缺點

1、優點

（1）兼容性好：JSONP在實現上比較簡單，在老式瀏覽器上都可以兼容正常使用；

（2）能夠使用不同源下的已存在的服務：JSONP通過script標籤來調用，無須Ajax的標準化支持，因此可以跨越不同源而無需要後台支持；

2、缺點

（1）可讀性差：JSONP返回的數據要求是JSON格式的，這種格式對於閱讀來說不太友好，可讀性差；

（2）不安全：JSONP是可以進行跨域操作的，也就意味着當被請求的服務存在安全漏洞時，這種操作可能會導致一定的安全風險，代碼難以維護。

三、jsonp的應用場景

1、富客戶端Web應用

富客戶端Web應用通常需要動態獲取各種數據，這些數據通常來自不同的域名，而JSONP正是一種跨域的手段，使得這些數據能夠被成功地獲取。

2、第三方數據解析

第三方的數據解析通常有兩種方式：一個是通過後台進行轉發，另外一個就是使用JSONP來實現，將解析到的數據直接返回到前端，使用JSONP進行數據解析。

四、jsonp的實現過程

1、前端請求

function jsonp(url, params, callback) {
  const script = document.createElement('script');
  const src = url + '?' + jsonpParams(params, callback);
  script.setAttribute('src', src);
  document.body.appendChild(script)
}
function jsonpParams(params, callback) {
  let str = '';
  const callbackName = 'jsonp_callback_' + parseInt(+new Date() / 1000);
  window[callbackName] = (data) => {
    try {
      callback && callback(data);
    } catch (e) {}
    delete window[callbackName];
    document.body.removeChild(script);
  };
  str = 'callback=' + callbackName;
  for (let key in params) {
    str += '&' + key + '=' + params[key];
  }
  return str;
}
jsonp('http:// domain2.com:8080/login', {user: 'admin'}, (data) => {
  console.log(data);
});

2、後端響應

if (/^\/api\/jsonp$/i.test(req.pathname)) {
  const data = JSON.stringify({id: 1, name: 'test'});
  res.end(`${req.query.callback}(${data})`);
}

五、jsonp的安全問題

使用JSONP跨域時，由於callback參數不是用戶手動輸入的，而是後台修改後返回給前端的，所以不會被攻擊者通過輸入腳本的方式進行攻擊。但是如果不對服務端返回的數據進行過濾的話，就會存在XSS攻擊的風險。使用JSONP跨域時，服務端應該僅返回經過校驗的、安全的數據。

六、總結

jsonp跨域技術是在Web應用的開發中經常使用的一種技術手段。雖然它有許多限制和不足，但因其簡單易懂，兼容性好，能夠優雅地解決同源策略問題，而被廣泛應用於Web應用的開發中。