写点什么

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

发布于: 2021 年 02 月 03 日

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


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


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


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


第三点 how:如何解决经典的跨域问题


什么是同源策略


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


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


举个例子:


image


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


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


80 表示端口号。


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

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


image


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


image


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


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


重定向。


表单提交。


跨域资源的引入,比如:scriptimglinkiframe


解决跨域问题


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


那么有什么解决方案?


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 数据形式作为参数传递,完成回调。我们来看看代码:


image


存在以下几点问题:


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


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


CORS 解决跨域


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

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

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


image


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


点击关注,第一时间了解华为云新鲜技术~


发布于: 2021 年 02 月 03 日阅读数: 20
用户头像

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区,提供全面深入的云计算前景分析、丰富的技术干货、程序样例,分享华为云前沿资讯动态,方便开发者快速成长与发展,欢迎提问、互动,多方位了解云计算! 传送门:https://bbs.huaweicloud.com/

评论

发布
暂无评论
浏览器同源策略,听说过么?