浏览器的同源策略
一、浏览器的同源策略是什么?
同源
同源是指浏览器与服务器的
协议
,域名
,端口
相同就是同源
浏览器采用同源策略
的目的 : 是为了保证用户信息的安全,防止恶意的网站窃取数据
二. 同源策略的分类
- DOM 同源策略: 禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况,不同域名的 iframe 是限制互相访问的(比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码)
- XMLHttpRequest 同源策略: 禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求(这一点里面其实包括了 ajax)。
- Cookie、LocalStorage、IndexedDB 等存储性内容同源策略: js中无法访问不属于同个源的cookie、LocalStorage中存储的内容。
三. 为什么要使用同源策略
- 同源策略可以防止网页获取数据
- 为了防止恶意网站
iframe
其他网站的时候,获取数据 - 为了防止恶意网站在自已网站有访问其他网站的权利,以免通过cookie免登,拿到数据。
四 . 解决跨域的方案
1.使用CORS
CORS(跨域资源共享
)使用专用的HTTP头,服务器(api.baidu.com)告诉浏览器,特定URL(baidu.com)的ajax请求可以直接使用,不会激活同源策略。
2.使用jsonp
因为js调用(实际上是所有拥有src属性的 <\script>、<\img>、<\iframe>)是不会经过同源策略,例如baidu.com引用了CDN的jquery。所以我通过调用js脚本的方式,从服务器上获取JSON数据绕过同源策略。
只有xhr的请求方式才有可能产生跨域问题,所以不会产生跨域问题
3.反向代理
当你访问baidu.com/api/login的时候,通过在baidu.com的nginx服务器会识别你是api下的资源,会自动代理到api.baidu.com/login,浏览器本身是不知道我实际上是访问的api.baidu.com的数据,和前端资源同源,所以也就不会触发浏览器的同源策略