jsonp的跨域原理
在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作
另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用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的跨域原理的更多相关文章
- 简单的jsonp实现跨域原理
什么原因使jsonp诞生? 传说,浏览器有一个很重要的安全限制,叫做"同源策略".同源是指,域名,协议,端口相同.举个例子,用一个浏览器分别打开了百度和谷歌页面,百度页面在执行脚 ...
- 跨域解决方案二：使用JSONP实现跨域
跨域的实现方式有多种,除了 上篇文章 提到的CORS外,常见的还有JSONP.HTML5.Flash.iframe.xhr2等. 这篇文章对JSONP的跨域原理进行了探索,并将我的心得记录在这里和大家 ...
- 使用XHR2或Jsonp实现跨域以及实现原理
我们直接使用XMLHttpRequset请求外部接口 会发现 报这个错误 其实浏览器成功发送请求并拿回了数据 只是浏览器的同源策略 禁止了获取 在xhr2 服务器端支持跨域 需要在响应头增加 Ac ...
- jsonp跨域原理解析
前言: 跨域请求是前台开发中经常遇到的场景,但是由于浏览器同源策略,导致A域下普通的http请求没法加载B域下的数据,跨域问题由此产生.但是通过script标签的方式却可以加载非同域下的js,因此可以 ...
- ajax跨域原理以及解决方案
说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理 参考来源 本文参考了以下来源 浏览器同源政 ...
- json跨域原理及解决方法
这一篇文章呢,主要是之前一直听别人讲json跨域跨域,但是还是一头雾水,只知其一,于是一怒之下,翻阅各种资料,如果有不正确的地方,劳烦指正一下^_^ 首先,先了解浏览器有一个很重要安全性限制,即为同源 ...
- 转（JSONP处理跨域事件）
前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Soc ...
- Ajax跨域原理及JQuery中的实现
浅析Ajax跨域原理及JQuery中的实现分析 AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...
- 使用JSONP实现跨域
什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通 ...
随机推荐
- springboot 获取控制器参数的几种方式
这里介绍springboot 获取控制器参数有四种方式 1.无注解下获取参数 2.使用@RequestParam获取参数 3.传递数组 4.通过URL传递参数 无注解下获取参数无注解下获取参数,需要控 ...
- Selenium 2自动化测试实战33（带unittest的脚本分析）
带unittest的脚本分析 #test.py #coding:utf-8 from selenium import webdriver from selenium.webdriver.common. ...
- Swift3.0封装 AFN 的 GET&POST网络请求
// // PSNetWorkManage.swift // WeiBoSwift // // Created by 思 彭 on 16/9/25. // Copyright © 2016年 思 彭. ...
- 安装最新docker-ce失败解决
报错 下载 检查本地是否已经安装 rpm -qa |grep containerd.io 如果有低版本的,卸载即可. 安装新版的containerd.io软件包 wget https://downlo ...
- Docker知识点总结
一. docker介绍: 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不 ...
- 使用PowerShell 修改DNS并加入域中
运行环境:Windows Server 2012 R2 此powershell脚本为自动修改本机DNS并加入到域中 但有的时候会提示[本地计算机当前不是域的一部分.请重新执行脚本!]错误,如遇到该错误 ...
- （模板）luoguP3806（树上点分治模板题）
点分治的写法1: 题目链接:https://www.luogu.org/problem/P3806 题意:给出一颗带边权的树,结点数n<=1e4,每条边有权值<=1e4,有m组询问(m&l ...
- [校内模拟赛T3]火花灿灿_二分答案_组合数学_贪心
火花灿灿 题目: 数据范围: 题解: 这个题真的是个神仙题. 我们对于每块石头维护一个$01$串. 这个$01$串的长度是操作次数. 如果$01$串的当前位是$1$,表示这次操作中当前石子被划分到了贡 ...
- [bzoj2288]【POJ Challenge】生日礼物_贪心_堆
[POJ Challenge]生日礼物 题目大意:给定一个长度为$n$的序列,允许选择不超过$m$个连续的部分,求元素之和的最大值. 数据范围:$1\le n, m\le 10^5$. 题解: 显然的 ...
- Netty对常用编解码的支持
参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! Netty对编解码的支持 打开Netty的源码,它对很多的编码器都提 ...