同源策略与跨域共享

同源策略

首先解释:同源策略
同源策略是浏览器最核心也最基本的安全功能,这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。
同源,要求URL源的协议,域名,端口完全相同(IE在计算源的时候没有包括端口。)

跨域方法

  1. jsonp实现跨域
  2. CORS跨域资源共享
  3. document.domain+iframe(子域名代理)
  4. postMessage实现跨域
  • 通过jsonp跨域(废弃)

JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资料。
JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。
文档中不受跨域影响的标签有<script><img><iframe>,jsonp是包含json数据的js函数,通过放在<script>标签中插入DOM执行
在js中,我们不可以直接用XMLHttpRequest请求不同域上的数据,但是我们可以在页面上引用不同域的js文件
JSONP的优缺点:

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;
它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;
它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

  • CORS——跨域资源共享

CORS(Cross-Origin Resource Sharing)跨域资源共享,它允许浏览器向跨源服务器,发出XMLHttpRequest2.0版请求,从而克服了AJAX只能同源使用的限制。
参考阮一峰大大的 跨域资源CORS详解
使用"跨域资源共享"的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种"跨域"。如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。浏览器会自动在请求头部添加origin字段,有时甚至多一次http请求,但是不会对用户造成影响。

xhr.open('GET', 'http://other.server/and/path/to/script');

CORS与JSOP对比:
1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求
2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得
数据,比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS,CORS更加方便、可靠

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

对于主域相同而子域不同的情况,可以通过设置document.domain的办法来解决。如:对于两个文件www.a.com/a.htmlblog.a.com/b.html均加上设置document.domain = ‘a.com’;然后在a.html文件中创建一个iframe,通过iframe两个js文件即可交互数据:

//www.a.com/a.html
    <script>
        document.doamin = 'a.com';
        var iframe = document.createElement('iframe');
        iframe.src = 'http://blog.a.com/b.html';
        document.body.appendChild(iframe);
        iframe.onload = function() {
            var doc = iframe.contentDocument || iframe.contentWindow.document;
            // 在这里操纵b.html
            console.log(doc);
        };
    </script>

在blog.a.com/b.html内编写代码:

//blog.a.com/b.html
    <script>
        document.domain = 'a.com';
    </script>

备注:某一页面的domain默认等于window.location.hostname。主域名是不带www的域名,例如a.com,主域名前面带前缀的通常都为二级域名或多级域名,例如 blog.a.com其实是二级域名。 domain只能设置为主域名,不可以在blog.a.com中将domain设置为test.a.com

  • postmessage跨域

http://blog.codingplayboy.com/2016/03/16/h5_postmessage/

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

推荐阅读更多精彩内容