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

另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用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. 优化webpack打包速度方案

    基本原理要么不进行打包:要么缓存文件,不进行打包:要么加快打包速度. 不进行打包方案: 1,能够用CDN处理的用CDN处理,比如项目引入的第三方依赖jquery.js,百度编辑器 先进行打包或者缓存然 ...

  2. JavaScript如何封装插件

    什么是封装呢? 我的理解就是 把一个功能单独做成一个组件,就像做饺子,以前做饺子必须自己先用面粉做饺子皮,再做饺子馅,然后再手工包饺子,但是现在人们发明了自动包饺子机器,虽然机器里面的每一步骤和你自己 ...

  3. sparkstreaming的状态计算-updateStateByKey源码

    转发请注明原创地址:https://www.cnblogs.com/dongxiao-yang/p/11358781.html 本文基于spark源码版本为2.4.3 在流式计算中通常会有状态计算的需 ...

  4. 008-centos6.5搭建web服务【nginx-tomcat8-jre8】

    一.机器配置 yum install vim 1.1.Linux最大进程以及打开文件数 ulimit -n和-u可以查看linux的最大进程数和最大文件打开数. ulimit -a 展示所有 临时方法 ...

  5. 自定义nagios监控脚本---磁盘检测

    自定义nagios监控脚本---磁盘检测 1. 在客户端上创建脚本/usr/local/nagios/libexec/check_disk.shvim /usr/local/nagios/libexe ...

  6. docker 搭建私有云盘 Seafile

    缘起 现如今各种云存储服务其实挺多的,国外有经典的DropBox.Google Drive.微软的OneDrive等,国内也有可以免费使用的各种云. 那么为什么想要搭建私有云存储呢?主要是本着“自己的 ...

  7. JAVA 基础编程练习题3 【程序 3 水仙花数】

    3 [程序 3 水仙花数] 题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例 如:153 是一个"水仙 ...

  8. JAVA解析_操纵_JS_JAVA_JS引擎

    http://uuhorse.iteye.com/blog/1705684 http://blog.csdn.net/chinajash/article/details/1491570 http:// ...

  9. Git(2)：基本操作

    Git 创建仓库 执行<git init>命令后,Git仓库会生成一个.git目录,该目录包含了资源的所有元数据,其他的项目目录保持不变(Git 只在仓库的根目录生成 .git 目录). ...

  10. What's binary search?

    Binary Search: Search a sorted array by repeatedly  dividing the search interval in half. Begin with ...