浏览器同源策略,听说过么?

作者 : 开心源码 本文共1055个字,预计阅读时间需要3分钟 发布时间: 2022-05-14 共161人阅读

摘要:同源策略就是指必需在同一个协议,域名,端口号下,而且三者必需一致的。

本文会从以下几个方面讲述同源策略:

第一点 what:什么是同源策略

第二点 why:为什么需要同源策略

第三点 how:如何处理经典的跨域问题

什么是同源策略

什么是同源策略呢?通常一个概念出来之后,我会从生活的实际例子找到解析,你可以想象一下,如果你们家的房子,是不是不允许陌生人进入,假如可以随意进入,那么久有可能被盗了,那么这个时候,锁头和钥匙就出现了为了保证家的安全。

所以我们引出浏览器的同源策略,就是指必需在同一个协议,域名,端口号下,而且三者必需一致的。这个时候,我们就说是同源。

举个例子:

http:// 是我们所说的协议。

www.angular.cn 是我们所说的域名。

80 表示端口号。

所以就会牵引出一个问题,不同源的数据交互问题,

假如是以下两个链接交互数据,可以通过同源策略的检测:

而假如是以下这样的链接交互数据,则不能通过同源策略的检测:

有哪些是不受同源策略限制

页面上的链接,比方 a 链接。

重定向。

表单提交。

跨域资源的引入,比方:script, img, link, iframe。

处理跨域问题

既然有同源策略的限制,那么就会产生跨域问题,就是指不同源的脚本在数据交互的时候,会报错,这个过程就是跨域。

那么有什么处理方案?

JSONP 处理跨域

CORS 处理跨域

总的来说,这两个比较经典,工作中比较常用,所以先讲讲上面的方案。

JSONP 处理跨域

什么是 JSONP,举个例子,就是 a.com/jsonp.html 想要获取 b.com/main.js 的数据,这个时候因为浏览器同源策略,是获取不到数据的,所以我们可以在 a.com/jsonp.html 创立一个 script 脚本,http://b.com/main.js?callback…。在main.js中调用这个回调函数xxx,并且以JSON数据形式作为参数传递,完成回调。我们来看看代码:

存在以下几点问题:

只能使用 GET 请求方式,无法使用 POST 请求方式。

可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。

CORS 处理跨域

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

刚才的例子中,在b.com里面增加响应头公告允许a.com的访问,代码:

而后a.com即可以用ajax获取b.com里的数据了。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 浏览器同源策略,听说过么?

发表回复