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

另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用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. 性能测试 | 系统运行缓慢，CPU 100%，Full GC次数过多问题排查

    处理过线上问题的同学基本上都会遇到系统突然运行缓慢,CPU 100%,以及Full GC次数过多的问题.当然,这些问题的最终导致的直观现象就是系统运行缓慢,并且有大量的报警.本文主要针对系统运行缓慢这 ...

  2. 2.1 Go语言基础之运算符

    运算符用于在程序运行时执行数学或逻辑运算. 一.运算符 Go 语言内置的运算符有: 1. 算术运算符 2. 关系运算符 3. 逻辑运算符 4. 位运算符 5. 赋值运算符 1.1 算数运算符 运算符 ...

  3. Graphics 使用一点点注意

    Form_Load 事件下绘制的结果会被 paint 刷新掉.也就等于没有绘制一样. Graphics g = this.CreateGraphics(); g.DrawRectangle(new P ...

  4. nginx开启目录浏览，解决中文乱码问题

    nginx开启目录浏览,解决中文乱码问题 方法如下: server { listen 80; #listen [::]:80; server_name gongzi.liwenhui.xin gz.l ...

  5. 语法错误 : 缺少“;”(在“<”的前面)

    该错误有可能是由错误所指行“<”附近的某个类型忘记#include <>所造成的

  6. [CDH] Redis: Remote Dictionary Server

    基本概念 一.安装 Redis: Remote Dictionary Server 远程字典服务 使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种 ...

  7. 字符串写入到json文件

    背景: PHP产生公告 ,发送到CGI ,在CGI把该公告的json 字符串写入到文件内(转义后的字符串) 通过 jsoncpp 操作 int write_notice_to_json(string ...

  8. vue中 keep-alive 组件的作用

    原文地址 在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前 ...

  9. 使用国内镜像给ROS安装提速

    大半年没写博客了.最近有幸参与机器人导航研究,在学习ROS相关知识.在安装ROS时使用国外的官方源安装非常慢.这里把使用国内镜像的安装方式做一个记录. 笔者用的是Kinetic版本,操作系统是Ubun ...

  10. 酷Q插件_SDK———入门与使用

    1.这里使用的是易语言的SDK,所以请看不惯的人自行离开.{wymbf.} 1.2 这里不会直接给你工程,请用动手打代码,动脑思考. 1.3 不知道.不了解酷Q是干嘛的,请访问:https://cqp ...