文档章节

Web - JSONP和同源策略漫谈

huangjacky
 huangjacky
发布于 2014/10/12 12:21
字数 1232
阅读 17
收藏 0
点赞 0
评论 0

0x00 前言

关于JSONP网上有很多文章了,我也是在拜读了别人的文章的基础上来写写自己的看法,这样可以加深自己印象,巩固一下学习效果。我们需要做的就是站在巨人的肩膀上眺望远方。

0x01 起

在Web前端开发中有一种安全机制,Javascript脚本只能访问与它同域的内容,这就是同源策略。
这里就需要先说明一个问题:如果确定脚本的域?

html页面中试用脚本有两种方式:内联和引用。

上图中滑红框部分,src为引用方式,直接在script中写代码是内联方式。
如果html的页面url为:http://a.huangjacky.com/a.html,那么内联方式脚本的域是a.huangjacky.com,这应该比较容易理解。
引用方式有两种情况,引用的js文件就是A站点、引用的js是其他站点,但是不过是内联还是引用方式的脚本代码它执行都是在当前html下,因此它的域是和html相同的

图中例子用的是AJAX网络请求,其实Javascript访问内容还可以DOM操作,当iframe之间的域不相同时,也无法通过Javascript去操作其他iframe中的DOM元素。

上面这个还比较基础,老鸟别喷。

现在开始我们的例子:

  1. 有两个站点a.huangjacky.com, b.huangjacky.com
  2. A站点的a.html要去请求B站点的b.php

a.html的代码如上图,b.php的代码如下:

1 <?php
2 echo"from b site";

我们点击a.html中按钮看一下会是什么样的效果?


提示说的很清楚,A站的Javascript的XMLHttpRequest对象无法加载B站,因为没有Access-Control-Allow-Origin头,那么接下来我们就来看看这个HTTP头有什么用?

在跨域HTTP请求中,会有一个HTTP头叫Origin,上图中也可以看出来,响应中HTTP头中的Access-Control-Allow-Origin包含Origin域,那么就满足跨域,浏览器就不会报错了,接下来我们修改PHP代码:

1 <?php
2 header("Access-Control-Allow-Origin: http://a.huangjacky.com");
3 echo"from b site"

代码中就增加一行header设置,看看运行效果:

运行正常了,AJAX也获得到了B站数据了,但是如果有个C站也要获取B站数据呢?我们分别尝试设置Access-Control-Allow-Orgin为http://huangjacky.comhttp://*.huangjacky.com。都出现了通源策略访问错误的提示,我这里就不截图了,我肯定是试了的。

现在问题出来了,我就是有这样的需求,多个子域都要访问B站来获取数据,怎么办?

其实这里可以设置Access-Control-Allow-Orgin: * ,就可以了。

但是这样安全性又是一个问题了,所有的网站都可以访问来访问数据了,而Access-Control-Allow-Orgin头要么是*,要么指定子域名。其实这里我们可以在PHP中做一些逻辑判断,比如判断Origin头是否huangjacky.com的请求,那么就设置Access-Control-Allow-Orgin为*,不就可以了么?代码如下:

1 <?php
2 $origin = $_SERVER['HTTP_ORIGIN'];
3 if(preg_match('/^http:\/\/\w+\.huangjacky\.com/i',$origin))
4     header("Access-Control-Allow-Origin: *");
5 echo"from b site";

具体其他的参数可以参考附录中的详细文档咯。

0x02 承

JSONP也是Web开发中针对跨域提出来一种方法,它不是新技术,反而是一些老技术的整合,这样在浏览器的兼容性上面做得不错。前面我们说到过script标签的src是可以跨域引用js,把js加载到自己的域中来执行。因此我们可以在引用js的同时提交一些参数,这样B站根据参数做出相应的操作后,将操作的结果写入到js文件中,并返回给A站点,这样A站点就得到了B站点的数据了。

第一框中function是A站在加载完B站数据后执行的函数。第二框是一个DOM中添加一个script标签。因此我们现在有必要看看B站后台是怎么实现的:

重点是要输出要确定Content-Type,然后就是拼凑javascript代码了。

是吧很简单的,在jQuery在$.ajax函数中将参数dataType设置成jsonp的话,就会按照这种原理来实现跨域,和XMLHttpRequest没有半毛钱的关系了。

0x03 转

从JSONP的原理来看的话,script标签只能GET方式。还有就是后台程序需要对callback参数进行有效性过滤,不然恶意用户可以插入攻击代码了。一般使用正则:

^[a-z0-9_]+$

来判断用户的回调函数名是否合法。

而JSONP中经常还会遇到一个问题就是JSON劫持,这是CSRF中的一种,常用的防御方式都是部署TOKEN。

0x04 附录

  1. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
  2. http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
  3. http://www.nowamagic.net/librarys/veda/detail/224

 

本文转载自:http://www.cnblogs.com/huangjacky/p/4001073.html

共有 人打赏支持
huangjacky
粉丝 5
博文 19
码字总数 0
作品 0
深圳
高级程序员
JSONP跨域GET请求解决Ajax跨域访问问题

需求:需要前端web页面异步调用后台的Webservice方法返回信息。 实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响...

文文1 ⋅ 2015/12/04 ⋅ 2

同源策越解决方案

在一次工作中,遇到了需要跨域访问的需求,于是研究了这方面的技术。先来介绍下我的应用场景,我们有一台服务器A在www.A.com,另一台服务器B在www.B.com,如果请求A的页面后,在该页面写一段...

Leech ⋅ 2015/08/22 ⋅ 2

合 JSONP 和 jQuery 快速构建强大的 mashup

简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用...

红薯 ⋅ 2010/02/26 ⋅ 4

深入浅出JSONP--解决ajax跨域问题

同源策略   为什么会出这样的错误呢?这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释:   同源策略,它是由Netscape提出的一个著名的安全策略。现在所...

ForingY ⋅ 2015/11/25 ⋅ 0

AJAX 跨域请求 - JSONP获取JSON数据

原文地址:http://justcoding.iteye.com/blog/1366102 AJAX 跨域请求 - JSONP获取JSON数据 博客分类: Javascript /Jquery / Bootstrap / Web Asynchronous JavaScript and XML (Ajax ) 是驱......

water014300 ⋅ 2014/12/22 ⋅ 0

同源策略和跨域访问

什么是同源策略 理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。 何谓同源: URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相...

lg2045 ⋅ 2014/08/28 ⋅ 0

使用Jsonp解决跨域数据访问问题

简介 符合Web2.0特征的众多网站一个明显的特点就是采用Ajax。 Ajax提供了在后台提交请求访问数据的功能。其实现主要使用的是XMLHttpRequest函 数,这个函数允许客户端的Javascript发送到服务...

红薯 ⋅ 2010/02/26 ⋅ 0

2017.12.11-学习笔记:聊聊同源跨域jsonp

同源策略 指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源a的js不能读取或者设置引入的源b的元素属性 同源的三要素: 相同的协议 相同的域名 相同的端口号 同源策略限制的不...

演员小新 ⋅ 2017/12/11 ⋅ 0

浅谈跨域以及WebService对跨域的支持

跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。 在以前...

冬瓜1 ⋅ 2016/01/21 ⋅ 0

Ajax+Spring MVC实现跨域请求(JSONP)

JSONP解释 在解释JSONP之前,我们需要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的原因,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源...

熊大熊二 ⋅ 2015/09/18 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Thrift RPC实战(二) Thrift 网络服务模型

TServer类层次体系 TSimpleServer/TThreadPoolServer是阻塞服务模型 TNonblockingServer/THsHaServer/TThreadedSelectotServer是非阻塞服务模型(NIO) 1 TServer抽象类的定义 内部静态类Args的...

lemonLove ⋅ 7分钟前 ⋅ 0

vim命令用法

第五章 vim命令 vim和vi几乎是一样的,唯一的区别就是当编辑一个文本时,使用vi不会显示颜色,而使用vim会显示颜色。 vim有三个模式:一般模式,编辑模式,命令模式。 系统最小化安装时没有安...

弓正 ⋅ 9分钟前 ⋅ 0

MyBatis源码解读之配置

1. 目的 本文主要介绍MyBatis配置文件解析,通过源码解读mybatis-config.xml(官方默认命名)、Mapper.xml 与Java对象的映射。 2. MyBatis结构 查看大图 MyBatis结构图,原图实在太模糊了,所以...

无忌 ⋅ 13分钟前 ⋅ 0

Ignite的jdbc与网格的连接方式的查询性能对比

环境: 数据量100万 Ignite2.5 Windows10 8g jdbc方式连接 import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; i......

仔仔1993 ⋅ 27分钟前 ⋅ 0

收集自网络的wordpress 分页导航的代码教程(全网最全版)

wordpress 分页导航是用来切换文章的一个功能,添加了 wordpress 分页导航后,用户即可自由到达指定的页面数浏览分类文章,而这样的一个很简单功能却有很多朋友在用插件:WP-PageNavi,插件的...

Rhymo-Wu ⋅ 43分钟前 ⋅ 0

微服务 WildFly Swarm 入门

Hello World 就像前面章节中的其他框架一样,我们希望添加一些基本的 Hello-world 功能,然后在其上逐步添加更多的功能。让我们从在我们的项目中创建一个 HolaResources 开始。您可以使用您的...

woshixin ⋅ 50分钟前 ⋅ 0

Maven的安装和Eclipse的配置

1. 下载Maven 下载地址 2. 解压压缩包,放到自己习惯的硬盘中 此处我将其放到了 D:\Tools 目录下。 3. 配置环境变量 右键此电脑 -> 属性 -> 高级系统设置 -> 环境变量。 在系统变量中新建,变...

影狼 ⋅ 57分钟前 ⋅ 0

python pip使用国内镜像的方法

国内源 清华:https://pypi.tuna.tsinghua.edu.cn/simple 阿里云:http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ 华中理工大学:http://......

良言 ⋅ 58分钟前 ⋅ 0

对于url变化的spa应该如何使用微信jssdk

使用vue单页面碰上微信jssdk config验证失败的坑。第一次成功 之后切换页面全部失败,找到了解决方法,第一次验证成功后保存验证信息 切换页面时验证信息直接拿来用,加一个wx.error() 失败时...

孙冠峰 ⋅ 今天 ⋅ 0

Spring Cloud Gateway 一般集成

SCF发布,带来很多新东西,不过少了点教程,打开方式又和以前的不一样,比如这个SCG,压根就没有入门指导,所以这里写一个,以备后用。 一、集成 pom.xml <dependency> <groupI...

kut ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部