JS之同源策略和跨域

同源策略（Same Origin Policy）

浏览器处于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

本域指的是：

• 同协议：都是http或https
• 同域名：如http://a.com/js和http://a.com/css（域名必须完全相同）
• 同端口：如都是80端口或8080端口

不同源的例子：

• http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
• http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
• http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)

需要注意：对于当前页面来说页面存放的js文件的域不重要，重要的是加载该JS页面所在什么域

跨域

JSONP

HTML中script标签可以加载其他域下的js，比如我们经常引入一个其他域下的线上CDN的Jquery。可以利用这个特性实现从其他域获取数据。

这时候会向天气接口发送请求获取数据，获取数据后作为js来执行。但是有个问题，数据是JSON格式的数据，直接作为JS运行的话若何得到数据来操作呢？

这个请求到达后端后，后端回去解析callback这个参数获取到字符串showData，在发送数据做如下处理：

之前返回数据是个对象，如：{"city": "hangzhou", "weather": "晴天"}，现在返回数据：showData({"city": "hangzhou", "weather": "晴天"})

script标签在加载数据后会把showData({"city": "hangzhou", "weather": "晴天"})作为js来执行，实际上就是调用showData函数，同时参数是{"city": "hangzhou", "weather": "晴天"}

用户只需要提前在页面定义好showData这个全局函数，在函数内部处理参数即可。

这就是JSONP（JSON with padding）

JSONP是通过script标签加载数据的方式去获取数据当做JS代码来执行，提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上包裹这个函数名，发给前端。

JSONP需要对应接口的后端配合才能实现。

CORS

CORS全称是跨域资源共享（Cross-Origin Resource Sharing），是一种Ajax跨域请求资源的方式，支持现代浏览器，IE支持10以上。

当使用XMLHTTPRequest发送请求时：

1. 浏览器发现该请求不符合同源策略，会被该请求加一个请求头：Origin
2. 后台进行一些列处理，如果确定接收请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin
3. 浏览器判断该响应头时候包含Origin的值，如果有，浏览器会处理响应，我们就可以拿到响应数据，如果没有，浏览器直接驳回，我们无法拿到响应数据

CROS的表象会让人觉得它与同源的Ajax请求没有区别，代码完全一样。

降域

iframe的降域通信

只有主域名相同才能降域通信，如a.baidu.com 和 b.baidu.com

在两个页面中加入：

document.domain = 'baidu.com';

postMessage

postMessage是HTML5新增的一个解决跨域的一个方法，万恶的ie6,7不支持

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

a.html

b.html