关于前端:JSONP-跨域原理及实现

前言

在日常我的项目开发过程中，跨域以及如何解决跨域问题是前后端开发同学绕不开的话题。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 利用流程

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

3. 客户端接管到返回的 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 详解 – 阮一峰的网络日志