同源策略以及突破

既然要突破同源策略,那就要知道什么是同源策略,要不然突破什么呢?
首先看看一个完整的URL的结构


同源策略是指:

  • 协议(http或者https);
  • 域名(路径可以不相同);
  • 端口(port,一般http都是80,https:443)
    并且以上三者都需要相同,才被人为是同源;

同源策略目的:

不同源的客户端脚本(javascript)在没明确授权的情况下,不能读写非同源的资源;
想象一下,你刚在电影网站上买了票,网银转账,再去浏览别的网站,别的网站读取你的cookie怎么办?并且我还可以调用你网站的脚本,来获取用户信息以及别的信息;所以同源策略是必须的,要不然所有人的信息就是公共财产了;

限制范围:随着互联网的发展,越来越严格的同源策略,使得下面的行为,如果在非同源受到限制:

  • DOM无法获取
  • AJAX请求不能发送
  • Cookie、LocalStorage及IndexDB 无法读取

导致有时候,我们需要用到这些行为,但是又被限制影响了,那么就有如何去突破同源了

1.降域

对于主域相同子域不同(http://www.a.com/http://child.a.com)的情况,在双方域名下 html 文件(index1.html,index2.html) 中都添加一句document.domain = a.com,将域名都设置成a.com,然后在index1.html中创建一个iframe,然后index1.html的JS就能够读取index2.html的数据了,虽然域名可以向上/下改,但是改完了之后又想改回去就不行;
降域的缺点:只对相同的后缀起作用,也就是主域相同的不同子域;只针对iframe形式的跨域;

2.JSONP(json with padding)


这里自己写了一个DEMO

基本思路就是:

  • 网页动态的添加一个<script>元素,虽然同源策略不允许跨域Ajax,但是引用是可以的,于是乎web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),JSONP一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了;
  • 概括一下就是:b.com把数据放在其域名下的JS(或者php)中,a.com再把它引用过来,这个引用过来的JS自动执行的时候,就会带着b.com的数据执行a.com下的回调函数;

缺点:
1.callback可能被注入,这个可以用字符串过滤解决;
2.安全性问题,当别人拷贝你的代码后,JSONP能被别的站引用,这里需要另一套token机制来保证,使得a与c之间的通讯,需要a的cookie来验证,就算b网拷贝了a的代码,JSONP也不会被b读取;
3.不能使用post只能使用get;

3.CORS(Cross-Origin Resource Sharing)

由于自己刚刚接触,只是用到了简单请求,浏览器在跨域请求的时候,在后端的php里面加上一个 header("Access-Control-Allow-Origin:http://a.com.html");,这样http://a.com.html域名下的AJAX就可以通过加的这个响应头被允许跨域请求了

图片标题
图片标题

这里自己写了一个DEMO

  • 简单概括一下:b.com声明允许a.com来访问我,然后a.com的Js可以正式的发起对b.com的AJAX
  • CORS与JSONP的使用目的相同,但是比JSONP更强大;JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

4.HTML5 postMessage

当要多窗口之间消息传递时,html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

5.window.name:

利用window.name只随tab的关系,不随域名跳转的改变而改变,那么就利用a.com中的iframeb.com中跳转的同时,传入一个参数,b.com中的函数接收这个参数,在b.com自己域名下获取数据之后,将数据放在window.name上,再跳转回a.com域名下,此时再去获取处理window.name里面的数据,就达到了效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,951评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,606评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,601评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,478评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,565评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,587评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,590评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,337评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,785评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,096评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,273评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,935评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,578评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,199评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,440评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,163评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,133评论 2 352

推荐阅读更多精彩内容

  • 1.什么是同源策略 1.要了解同源策略,我们必须先知道源即orgin 以百度页面为例,谷歌浏览器打开控制台:输入l...
    GarenWang阅读 1,445评论 2 8
  • 1. 什么是同源策略 同源是指域名、协议、端口相同。同源策略(Same-Origin Policy)是浏览器的一个...
    65_刘璐阅读 689评论 0 0
  • 问答 1. 什么是同源策略 同源是指域名、协议、端口相同。同源策略(Same-Origin Policy)是浏览器...
    Maggie_77阅读 446评论 0 1
  • 所谓“魔鬼父母”,其实众说纷纭。对于子女来说,处于不同年龄层次,对“魔鬼父母”的定义都会略有不同,不给吃糖可以算是...
    猫七七四十九阅读 872评论 0 0
  • 小米官网华为官网美图官网京东官网苏宁官网天猫小米天猫苏宁360官网天猫华为
    Alan龙马阅读 252评论 0 0