同源策略

一.同源策略——浏览器的安全策略

URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示它们是同源的。

浏览器的同源策略限制了来自不同源的“document”或脚本,对当前“document”读取或设置某些属性,从一个域上加载的脚本不允许访问另一个与的文档属性。

在浏览器中,等标签都可以加载跨域资源而不受同源策略限制。但浏览器限制了JavaScript的权限使其不能读、写加载的内容。同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如:JavaScript、CSS、图片等仍然认为属于同源。document对象的domain属性存放着装载文档的服务器的主机名,可以设置它。例如:来自“blog.csdn.net”和来自“bbs.csdn.net”的页面,都将document.domain设置为“csdn.net”,则来自两个子域名的脚本即可相互访问。处于安全考虑,不能设置为其他domain。比如:http://www.csdn.net/不能设置为sina.com。

被同源策略限制的行为包括:cookie、localStorage和IndexDB无法读取;DOM无法获得;AJAX请求不能发送;

二.跨域方法

1.JSONP

AJAX请求受同源策略的影响,不允许进行跨域请求,而script标签的src属性中的连接却可以访问跨域的JS脚本,利用这个特性,服务器端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src中进行了调用,这样子就实现了跨域。JSONP只能发送get请求,且需要服务器端配合。

例如:

其中,callback=funcName是我们传给服务器的,服务器将我们需要的JSON数据作为参数传给这个函数,然后返回这个函数调用的JS文件。而这个funcName函数,需要我们在当前的文档中已经声明。

2.通过修改document.domain来跨子域

    两个网页一级域名相同,只是二级域名不同,浏览器允许通过设置document.domain共享cookie或者处理iframe。这种方法只适用于cookie和iframe窗口。cookie同源策略只关注域名,忽略协议和端口号。

3.使用片段标识符来进行跨域

父窗口可以把信息写入子窗口的片段标识符,子窗口通过监听hashchange事件得到通知。子窗口也可以改变父窗口的片段标识符。

4.使用window.name来进行跨域

window对象有一个name属性,在一个窗口的声明周期内,窗口载入的所有页面都是共享一个window.name的,每个页面对window.name都有读写的权限。这个属性的最大特点就是,无论是否同源,只要在一个窗口里,前一个网页设置了这个属性,后一个网页就可以读取它。

5.window.postMessage

window.postMessage是一个跨文档通信API,允许跨窗口通信,不论这两个窗口是否同源。

父窗口向子窗口发消息调用postMessage(“data”,URL);

子窗口设置监听message事件:window.onmessage=function(e){};

子窗口向父窗口发送消息:window.opener.postMessage(“data”,URL);

6.通过webSocket进行跨域

webSocket协议不受同源策略限制,只要服务器支持就可以通过它进行跨域通信。

7.通过设置代理的方法跨域

通过在同域名下的web服务器端创建一个代理,将浏览器的请求先发送给同域名下的服务器,由这个服务器去跨域请求其他不同域的服务器数据,然后在将数据传送回给前端。这里,同源限制只对客户端浏览器存在,对服务器端不存在同源限制。

8.CORS 跨域资源分享

CORS允许任何类型的请求,CORS需要浏览器和服务器同时支持,它允许浏览器向跨域服务器发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信的过程,都是浏览器自动完成的,不需要用户参与。浏览器一旦发现AJAX请求跨域,就会自动添加一些附加的头信息,有时还会多出一次附加的请求。

Origin字段说明本次请求来自哪个源,服务器可以根据这个值决定是否同意这次请求;

服务器通过Acess-Control-Allow-Origin来设置允许响应来自哪些源的请求。

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

推荐阅读更多精彩内容