Web - JSONP和同源策略漫谈

最新推荐文章于 2024-11-17 16:31:15 发布

weixin_34413802

最新推荐文章于 2024-11-17 16:31:15 发布

阅读量113

点赞数

文章标签： php 前端 json ViewUI

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元素。

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

现在开始我们的例子：

有两个站点a.huangjacky.com, b.huangjacky.com
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.com和http://*.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没有半毛钱的关系了。