返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JSONP跨域原理以及实现方法详解
  • 903
分享到

JSONP跨域原理以及实现方法详解

2024-04-02 19:04:59 903人浏览 薄情痞子
摘要

目录前言一、同源策略和跨域1.1 同源策略1.1.1 什么是同源1.1.2 什么是同源策略1.2 跨域1.2.1 什么是跨域1.2.2 浏览器对跨域请求的拦截1.2.3 如何实现跨域

前言

在日常项目开发过程中,跨域以及如何解决跨域问题是前后端开发同学绕不开的话题。JSONP 跨域就是一种经典的解决跨域问题的方案。

一、同源策略和跨域

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 如何实现跨域数据请求

实现跨域数据请求方法有很多,比如JSONPCORSpostMessagewebsocketNginx反向代理window.name + iframe 、document.domain + iframelocation.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请求那样受到同源策略的限制
  • 它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequestActiveX的支持
  • 并且在请求完毕后可以通过调用callback的方式回传结果

2.3 缺点

  • 只支持GET请求而不支持 POST 等其它类型的 HTTP 请求
  • 它只支持跨域 HTTP 请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript 调用的问题

三、JSONP 应用流程

  • 设定一个script标签

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

四、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 详解 - 阮一峰的网络日志

总结

到此这篇关于JSONP跨域原理以及实现的文章就介绍到这了,更多相关JSONP跨域内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JSONP跨域原理以及实现方法详解

本文链接: https://lsjlt.com/news/150954.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JSONP跨域原理以及实现方法详解
    目录前言一、同源策略和跨域1.1 同源策略1.1.1 什么是同源1.1.2 什么是同源策略1.2 跨域1.2.1 什么是跨域1.2.2 浏览器对跨域请求的拦截1.2.3 如何实现跨域...
    99+
    2024-04-02
  • VUE跨域详解以及常用解决跨域的方法
    目录跨域解决跨域常用方法:一、VUE中常用proxy来解决跨域问题二、JSONP解决跨域 三、CORS是跨域资源共享(Cross-Origin Resource Shari...
    99+
    2024-04-02
  • 前端跨域问题解决及七大跨域原理详解
    目录为什么跨域?跨域的时机?同域情况 && 跨域情况?解决跨域的方案JSONPWebSocketCorsNode接口代理NginxpostMessagedocumen...
    99+
    2024-04-02
  • 关于JSONP跨域请求原理的深入解析
    目录什么是同源策略什么是JSONP练习jsonp的缺点总结什么是同源策略 同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用...
    99+
    2024-04-02
  • 简单易懂的JSONP和CORS跨域方案详解
    目录一、了解跨域何为跨域何为同源二、跨域解决方案JSONP(JSON with Padding)简单实现流程图封装优缺点CORS(Cross-Origin Resource Shar...
    99+
    2022-11-13
    JSONP CORS跨域方案 JSONP CORS
  • 如何进行JSONP跨域请求原理的深入解析
    这篇文章将为大家详细讲解有关如何进行JSONP跨域请求原理的深入解析,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。什么是同源策略同源策略,它是由Netscape提出的一个著名的安全策略。现在...
    99+
    2023-06-26
  • AJAX请求数据及实现跨域的三种方法详解
    目录传统方法的缺点:什么是ajax?XMLHttpRequest 对象五步使用法:同步和异步的区别:如何将原生ajax进行封装JS几种跨域方法和原理附:ajax跨域post请求的ja...
    99+
    2024-04-02
  • ajax本地跨域请求以及解决方法
    什么是跨域? 我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没有同时满足这三个条件的请求即为跨域请求,跨域请求控制台一般会出...
    99+
    2023-09-15
    ajax php apache Powered by 金山文档
  • 解析 PHP Session 跨域的实现原理
    引言:随着互联网的发展,越来越多的网站使用了跨域技术来实现不同域名之间的数据交互。跨域是指在一个域名下的网页获取其他域名下的资源,这样的请求是受浏览器的同源策略限制的。在PHP中,session是一种非常常用的机制,用于在服务器端存储用户的...
    99+
    2023-10-21
    session 实现原理 跨域 PHP Session 跨域的实现原理
  • postMessage及webSocket跨域方案详解
    目录一、postMessage✍是什么✍语法✍怎么用✍如何跨域iframe + postMessagewindow.open()+postMessage✍兼容性二、webSocket...
    99+
    2022-11-13
    postMessage webSocket跨域 postMessage webSocket
  • ajax跨域问题以及解决方案
    这期内容当中小编将会给大家带来有关ajax跨域问题以及解决方案,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。复现Ajax跨域问题做两个简单的小项目复现Ajax跨域问题. 后端语言使用Java首先是一个简单...
    99+
    2023-06-08
  • AJAX请求以及解决跨域问题详解
    目录AJAX 介绍一.原生AJAX请求(GET)二.jQuery AJAX请求(GET 和POST)三.跨域问题的解决四.其他解决跨域问题方法总结AJAX 介绍 AJAX其实就是异步...
    99+
    2024-04-02
  • Java NIO多路复用的方法以及Linux epoll实现原理详解
    这篇文章主要介绍“Java NIO多路复用的方法以及Linux epoll实现原理详解”,在日常操作中,相信很多人在Java NIO多路复用的方法以及Linux epoll实现原理详解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作...
    99+
    2023-06-02
  • Java JWT实现跨域身份验证方法详解
    目录1、JWT简介2、JWT的结构2.1 头部(header)2.2 载荷(payload)2.3 签证(signature)3、JWT的原则4、JWT的用法5、JWT的问题和趋势6...
    99+
    2024-04-02
  • 详解MD5算法的原理以及C#和JS的实现
    目录一、简介二、C# 代码实现三、js 代码实现一、简介 MD5 是哈希算法(散列算法)的一种应用。Hash 算法虽然被称为算法,但实际上它更像是一种思想。Hash 算法没有一个固定...
    99+
    2023-03-19
    C# MD5算法 JS MD5算法 MD5算法实现
  • 详解JavaBellman-Ford算法原理及实现
    目录一 点睛二 算法步骤三 算法实现四 测试一 点睛 如果遇到负权边,则在没有负环(回路的权值之和为负)存在时,可以采用 Bellman-Ford 算法求解最短路径。该算法...
    99+
    2024-04-02
  • 详解DES&3DES算法的原理以及C#和JS的实现
    目录一、简介1、DES 简介2、3DES 简介二、C# 代码实现1、DES2、3DES三、js 语言实现 1、DES2、3DES一、简介 1、DES 简介 DES 全称为 ...
    99+
    2023-03-19
    C# DES算法 JS DES算法 DES算法实现
  • AJAX的简介以及跨域通信的实现
    本篇内容主要讲解“AJAX的简介以及跨域通信的实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“AJAX的简介以及跨域通信的实现”吧!1.Ajax1.1.Aja...
    99+
    2024-04-02
  • vue 处理跨域问题及解决方法小结
    当你在发送网络请求的时候,出现以下保存信息,恭喜你跨域了 Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' has ...
    99+
    2024-04-02
  • Spring实现处理跨域请求代码详解
    一次正常的请求最近别人需要调用我们系统的某一个功能,对方希望提供一个api让其能够更新数据。由于该同学是客户端开发,于是有了类似以下代码。@RequestMapping(method = RequestMethod.POST, value ...
    99+
    2023-05-30
    spring 跨域请求 处理跨域
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作