JavaScript之JSONP跨域

时间 2020-02-24

原文原文链接

前言

Jsonp是一种跨域通讯的手段javascript

原理

原理：
事先定义一个用于获取跨域响应数据的回调函数，并经过没有同源策略限制的script标签发起一个请求（将回调函数的名称放到这个请求的query参数里），而后服务端返回这个回调函数的执行，并将须要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回调函数后会立马执行，因而就拿到了执行的响应数据。html

缺点：
JSONP只能发起GET请求前端

实现

第一步：设定一个script标签java

<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)json

简单的实例：

来看一个一个简单的jsonp实现，其实就是拼接url，而后将动态添加一个script元素到头部。segmentfault

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

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内容校验，再返回校验结果。

结语

看完以为对你有帮助劳烦点个赞鼓励鼓励哈！

学习使我快乐！

我是Cloudy，现居上海，年轻的前端攻城狮一枚，目前正在寻找新的工做机会中，爱专研，爱技术，爱分享。
我的笔记，整理不易，感谢关注、阅读、点赞和收藏。
文章有任何问题欢迎你们指出，也欢迎你们一块儿交流各类前端问题！