跨域 jsonp cors

1.什么是同源策略

同源策略中的重要内容就是URL(uniform resource locator),统一资源定位符,俗称网址。URL中的resource资源就是css,js,html,img等内容。

Paste_Image.png

origin源:源包括当前页面的域名、协议、端口号。http协议默认端口是80,https协议默认端口是443。同源策略是浏览器的一个功能,Same Origin Policy,同源就是当协议、域名、端口号一致时就是同源。不同源的客户端脚本在没有明确授权下,不能读写对方的资源。简单地理解就是因为JavaScript同源策略的限制,它是浏览器为了安全性考虑一种非常重要的策略,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:

Paste_Image.png

2.什么是跨域?跨域有几种实现形式

跨域就是用某种方法突破同源策略的限制,实现获取其他域中的资源。实现跨域一般有三种方法:
【1】降域。用改写document.domain+iframe的方法来获取目标域数据。缺点是安全性差,一个页面被攻击后另一个页面的数据也会被泄露且不支持ajax方式请求数据。降域只能解决主域相同而二级域名(子域名)不同的两个页面请求数据的情况,如果把script.a.com的domian设为alibaba.com那显然是会报错。将当前页面a.com和数据页面b.com的域名设置成相同的父域(主域名)、父父域名(主域名),domain只能设置为主域名,不可以在b.a.com中将domain设置为c.a.com;且只能由子域名改到父域名或父父域名,不能从父父域名改到子域名(比如将b.com改成script.b.com是不行的)
【2】jsonp。JSONP(json with padding)方式, 通过script标签请求资源,允许用户在scr地址中传递一个callback参数(callback=abc)给服务端,然后服务端返回数据时会将这个callback参数(abc)作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
【3】CORS
【4】HTML5 postMessage


3.jsonp 的原理是什么

jsonp的原理:虽然浏览器默认禁止了跨域访问,但并不禁止在页面中引用其他域的JS文件,并可以自由执行引入的JS文件中的function(包括操作cookie、Dom等等)。根据这一点,可以方便地通过动态创建script节点的方法来实现完全跨域的通信。例如a.com/index.html中可以引用b.com/main.js、b.com/style.css、b.com/logo.png等资源,此类操作不受同源策略限制。实际操作中如果在a.com下用ajax去请求(读写)b.com下的内容会被同源策略阻止,但a.com里如果引用了b.com/main.js,虽然可以引用,但当这个引用的js文件(在a.com下引用)去读写(ajax)b.com的资源时一样会提示ajax错误。

jsonp的缺点:1.安全问题,src引用是开放的,所以jsonp的资源都被所有人访问到。解决方法是用jsonp中的token参数,通过A域和B域共用同一套cookie来验证A的身份。2.只能AJAXGET方式不能用POST方式获取数据即只能读不能写,因为是基于scr引用的,引用是get请求。3.可被注入恶意代码如?callback=alert(1); 这问题只能用正则过滤字符串的方法解决,过滤callback后的内容不能有括号之类的条件


4.CORS是什么

CORS是一个W3C标准,全称是“跨域资源共享”,使用它可以实现浏览器上跨院服务器发出XMLHTTPRequest请求,从而克服了ajax只能同源使用的限制。CORS需要浏览器和服务器同时支持,目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。


5.解决跨域问题

用jsonp方法实现跨域,假设a.com上的index.html主页要访问b.com域名下的data.js文件中的数据。
【1】a.com页面中插入script标签,src属性值等于要请求的跨域资源,资源类型为js文件,使用?callback=ask传递参数。

Paste_Image.png

【2】a.com页面上定义函数ask。

Paste_Image.png

【3】b.com下的data.js中被访问的数据用a.com定义的ask函数包裹。

Paste_Image.png

【4】a.com页面加载执行效果

Paste_Image.png

本文版权归本人和饥人谷所有,转载请注明来源。

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

推荐阅读更多精彩内容