在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作

另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,iframe等

1.jsonp的原理

jsonp,即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说漏洞),服务器端不在返回json格式,而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域.

<!DOCTYPE html>

<html>

<head>

    <title>GoJSONP</title>

</head>

<body>

<script type="text/javascript">

    function jsonhandle(data){

        alert("age:" + data.age + "name:" + data.name);

    }

</script>

<script type="text/javascript" src="jquery-1.8.3.min.js">

</script>

<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>

</body>

</html>

这里调用了跨域的remote.js脚本，remote.js代码如下：

jsonhandle({

    "age" : 15,

    "name": "John",

})

这个是参考文件：https://blog.csdn.net/u011897301/article/details/52679486

<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script>这个代码相当于是执行了

jsonhandle({"age" : 15,"name": "John",})这个函数。
2.最后jQuery提供了方便使用JSONP的方式，代码如下：
<!DOCTYPE html>

<html>

<head>

    <title>GoJSONP</title>

</head>

<body>

<script type="text/javascript" src="jquery-1.8.3.min.js">

</script>

<script type="text/javascript">

    $(document).ready(function(){

        $.ajax({

            type : "get",

            async: false,

            url : "http://www.practice-zhao.com/student.php?id=1",

            dataType: "jsonp",

            jsonp:"callback", //请求php的参数名

            jsonpCallback: "jsonhandle",//要执行的回调函数

            success : function(data) {

                alert("age:" + data.age + "name:" + data.name);

            }

        });

    });

</script>

</body>

</html>

3.优缺点

jsonp优点:

完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback。参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
简单来说数据的格式没有发生很大变化。
jsonp缺点:

1.jsonp只支持get请求而不支持post请求,也即是说如果想传给后台一个json格式的数据,此时问题就来了,浏览器会报一个http状态码

415错误,告诉你请求格式不正确

2安全问题

安全防范:

1.防止callback参数意外截断js代码,特殊字符单引号双引号,换行符存在风险.

2.防止callback参数恶意添加script标签,造成xss漏洞

3.防止跨域请求滥用,阻止非法站点恶意调用

详细请看:http://blog.csdn.net/jian_xi/article/details/66474717

 
 

jsonp的跨域原理的更多相关文章

  1. 简单的jsonp实现跨域原理

    什么原因使jsonp诞生?  传说,浏览器有一个很重要的安全限制,叫做"同源策略".同源是指,域名,协议,端口相同.举个例子,用一个浏览器分别打开了百度和谷歌页面,百度页面在执行脚 ...

  2. 跨域解决方案二：使用JSONP实现跨域

    跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家 ...

  3. 使用XHR2或Jsonp实现跨域以及实现原理

    我们直接使用XMLHttpRequset请求外部接口 会发现 报这个错误 其实浏览器成功发送请求并拿回了数据  只是浏览器的同源策略 禁止了获取  在xhr2 服务器端支持跨域 需要在响应头增加 Ac ...

  4. jsonp跨域原理解析

    前言: 跨域请求是前台开发中经常遇到的场景,但是由于浏览器同源策略,导致A域下普通的http请求没法加载B域下的数据,跨域问题由此产生.但是通过script标签的方式却可以加载非同域下的js,因此可以 ...

  5. ajax跨域原理以及解决方案

    说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理 参考来源 本文参考了以下来源 浏览器同源政 ...

  6. json跨域原理及解决方法

    这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^ 首先,先了解浏览器有一个很重要安全性限制,即为同源 ...

  7. 转（JSONP处理跨域事件）

     前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...

  8. Ajax跨域原理及JQuery中的实现

    浅析Ajax跨域原理及JQuery中的实现分析   AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...

  9. 使用JSONP实现跨域

    什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通 ...

随机推荐

  1. QQ输入法中英文标点符号快速切换

    QQ输入法中英文标点符号快速切换 全角半角切换 shift+ Space 全角半角切换 双击shift 中英文标点符号快速切换   Ctrl+.

  2. Java同步数据结构之Collection-Queue

    概述 接下来开始学习java.util.concurrent包中一些Collection集合的子类,关于Map的一些子类将在这些子类完成之后再开始学习.下图是Java并发包中关于Collection接 ...

  3. LC 529. Minesweeper

    Let's play the minesweeper game (Wikipedia, online game)! You are given a 2D char matrix representin ...

  4. backupAgent节点

    在<application>节点中有一个非常重要的属性,那就是backupAgent. 1.backupAgent简介 Androidd:backupAgent用来设置备份代理.对于大部分 ...

  5. selenium 常见操作事件2

    1.不打开浏览器驱动(加速) 注意:不启动浏览器器时,需要把浏览器驱动放置以下位置:①.python安装的根目录②.google的安装目录() from selenium import webdriv ...

  6. How To Install OpenSSL on Windows

    转自 https://tecadmin.net/install-openssl-on-windows/ OpenSSL is a full-featured toolkit for the Trans ...

  7. SSM+form表单文件上传

    这里介绍SSM如何配置上传文件 配置springmvc.xml: <!--配置上传下载--> <bean id="multipartResolver" class ...

  8. Delphi7-TClientDataSet: 查找

    TClientDataSet[12]: 查找 方法有:1.Locate: 根据字段列表和对应的字段值查找并定位, 找到返回 True.2.Lookup: 根据字段列表和对应的字段值查找, 返回需要的字 ...

  9. Node线上部署管理器PM2

    PM2是一个带有负载均衡功能的Node应用的进程管理器.PM2可以利用服务器上的所有CPU,并保证进程永远都活着,0秒的重载,部署管理多个Node项目.PM2是Node线上部署完美的管理工具. PM2 ...

  10. python3 速查参考- python基础 7 -> 函数编程之 装饰器、生成器

    装饰器 1.速查笔记 #-- 函数装饰器:是它后边的函数的运行时的声明 由@符号以及后边紧跟的"元函数"(metafunction)组成 @staticmethod def sme ...