同源策略
1.浏览器同源策略
同源策略(Same Origin Policy,SOP)也叫单源策略(Single Origin Policy),
是一种用于Web浏览器编程语言(如JavaScript和Ajax)的安全措施,用于保护信息的机密性和完整性。
同源策略可防止网站的脚本访问其他网站上使用的脚本并与之交互。
2.同源的满足条件
满足同源条件,即网站的源(origin)要全部相同,在请求数据时,如果不同源,浏览器会在控制台中报一个异常,提示拒绝访问。
而源包括三要素:
1.协议相同,即浏览器协议,常见的如HTTP协议,HTTPS协议等,如果不是同一协议,则非同源。
2.域名相同,即使是同一网站的不同域名,也会视为非同源,如本地服务器localhost与127.0.0.1非同源。
3.端口相同,最简单的例子也是本地服务器,localhost:8000与localhost:8080即端口不同因此非同源。
跨域
当两个网址非同源时在请求数据时,如果不同源,浏览器会在控制台中报一个异常,提示拒绝访问。
因此我们要进行跨域处理来获得需要的数据,而跨域通常有一下几种方式:
CORS
CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种ajax请求资源的方式,限制必须是IE10以上。
AJAX的扩展,当你使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin;
后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin;
浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,
这时我们无法拿到响应数据。一下的Ajax是最常见的CORS方式:
function getData(){ var xhr =new XMLHttpRequest()
xhr.open ('GET', 'http://localhost:8080/getData', true)
xhr.send()
xhr.onload = function(){
appendHtml(JSON.parse(xhr.responseText))
} }
JSONP
利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。
当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
第三方产生的响应为json数据的包装,即JSON with Padding。
以下script标签即JSONP的格式
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>
降域
降域仍是解决跨域问题的一种方案,通过双向设置 document.domain 的值,解决主域名下的跨域问题。
比如,有两个二级域名:a.yang.com 和 b.yang.com,可通过设定 document.domain 的值为主域名:yang.com 的方式,突破浏览器的同源策略限制,来获取和操作对方的元素。而其中,document.domain ='yang.com'即降域的形式。
postMessage
postMessage 是 HTML5 中新增方法,可实现跨域通信;
postMessage 并不是向服务器读写资源,只是向外发送消息而已;可以把它当做使用手机发送短信消息,仅此而已。
也就是:A 页面向 B 页面发送了一条消息,B 页面会接受到该消息,如果 B 页面需要该消息,则监听 message;否则无需关心该消息。