同源策略与跨域资源共享

darcrand 发布于2019-08-22 18:08 / 2468人阅读

摘要：由于浏览器的同源策略导致无法直接通过拿到后台数据。目前，如果非同源，共有三种行为受到限制。此处应有掌声参考关于跨域资源共享和浏览器的同源策略限制的具体讲解。

工作中，经常会遇到需要跨域请求数据的情况。由于浏览器的同源策略,导致无法直接通过ajax拿到后台数据。解决这个问题的方式之一就是JSONP。还有一种方式更高效简单——跨域资源共享(Cross-origin Resource Sharing )，采用这种方式，前端不需要做任何的修改，和平时一样写ajax方法，就能够拿到后台数据。

同源策略（same-origin policy）—— 浏览器安全的基石。 含义：

1995年，同源政策由Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初的含义是指A网页cookie，B网页不能打开，除非这A、B两个页面同源。所谓同源指的是三个相同。协议相同，域名相同，端口相同。
举例来说，现在打开的页面是http://www.baidu.com网址。同源情况如下：

https://www.baidu.com         // 不同源（协议不同）
http://wenku.baidu.com        // 不同源（域名不同）
http://www.baidu.com:8080     // 不同源（端口不同）
http://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0       //同源

目的：

保证用户信息安全，防止网站数据的窃取。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

限制范围：

随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制。

//（1） Cookie、LocalStorage 和 IndexDB 无法读取。

//（2） DOM 无法获得。

//（3） AJAX 请求不能发送。

跨域资源共享（Cross-origin resource sharing）

跨域资源共享（CORS）是一个W3C标准，它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

简介：

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

简单的说，遇到再遇到跨域问题，如果通过CORS来解决的话，前端工作者正常些AJAX就可以了。^_^ （此处应有掌声！！！）

参考

关于跨域资源共享（CORS）和 浏览器的同源策略限制的具体讲解。已经有很多大神写过文章博客。在这里就不再班门弄斧了。有兴趣的同学可以根据以下两个链接深入研究下。

跨域资源共享 CORS 详解

浏览器同源政策及其规避方法

GPU云服务器云服务器同源策略跨域资源共享资源跨域跨域共享

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95532.html

同源策略与跨域资源共享的纠缠

摘要：扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点同源策略什么是同源策略出于保护用户信息安全的目的，现在的浏览器都会实施同源策略这个政策，所谓同源策略指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。导语你家的小孩带了他的朋友来你们的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿东西吃你自然是不会阻止，但是如果你家小孩的朋友人品不行，乱拿东西吃、...

alighters 2019-08-21 11:17 评论0 收藏0
同源策略与跨域资源共享的纠缠

摘要：扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点同源策略什么是同源策略出于保护用户信息安全的目的，现在的浏览器都会实施同源策略这个政策，所谓同源策略指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。导语你家的小孩带了他的朋友来你们的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿东西吃你自然是不会阻止，但是如果你家小孩的朋友人品不行，乱拿东西吃、...

赵连江 2019-06-27 15:05 评论0 收藏0
web安全一，同源策略与跨域

摘要：可以说同源策略在安全中扮演着及其重要的角色。我把这个领域的东西写成了一个系列，以后还会继续完善下去安全一同源策略与跨域安全二攻击安全三攻击之所以要将同源策略与跨域写在一起，是因为存在浏览器的同源策略，才会存在跨域问题何为同源策略同源策略是浏览器实现的一种安全策略，它限制了不同源之间的文档和脚本交互的权限。只有同一个源的脚本才会具有操作dom、读写cookie、session 、a...

cgspine 2019-08-22 14:56 评论0 收藏0
FE.B-理解浏览器的同源策略与跨域方案

摘要：方案浏览器设置一级域名。场景完全不同源的网站，需要窗口通信方案父子窗口互相写互相监听子窗口写后跳回同域父窗口读浏览器跨文档通信场景请求非同源地址方案架设服务器代理参考资料浏览器同源政策及其规避方法阮一峰前端常见跨域解决方案全跨域几种方式同源概念：协议，域名，端口相同。目的：保证用户信息的安全，防止恶意的网站窃取数据。限制的行为： Cookie、LocalStorage 和 In...

oujie 2019-08-30 15:55 评论0 收藏0
FE.B-理解浏览器的同源策略与跨域方案

摘要：方案浏览器设置一级域名。场景完全不同源的网站，需要窗口通信方案父子窗口互相写互相监听子窗口写后跳回同域父窗口读浏览器跨文档通信场景请求非同源地址方案架设服务器代理参考资料浏览器同源政策及其规避方法阮一峰前端常见跨域解决方案全跨域几种方式同源概念：协议，域名，端口相同。目的：保证用户信息的安全，防止恶意的网站窃取数据。限制的行为： Cookie、LocalStorage 和 In...

ghnor 2019-08-02 13:56 评论0 收藏0