读完本节内容，你可以学到：
- 同源策略产生的原因和作用；
- 跨域的多种解决方案；
前言
我们可以设想这样一个场景：
学校开放了一个窗口给家长，让家长可以通过窗口询问孩子的成绩。班级里面的每个学生都是互不相关、互不影响的个体，每个学生和家长都来自同一个家庭。当同一个家庭里面的家长询问孩子的成绩，窗口就会给出相应的数据。如果不同家庭的家长来询问其他学生的成绩，窗口都给出应答，这样孩子成绩的安全性就没法得到保证。这样不就乱套了吗？
如果没有同源策略
首先让我们来看看上面例子中的窗口、家庭、家长、学生在web世界中的对应关系：
这个窗口就是浏览器的窗口，里面的家长和学生就是一个个独立的网站，而来自同个家庭的成员（家长、学生）就是同域。
如果Web世界没有安全策略，那么我们的网站可以加载并执行别人任意的文件，这样的情况将会出现很多不可控的问题。
比如打开一个银行站点，然后又不小心打开了一个恶意站点，如果没有安全措施，恶意站点就可以做很多事情：
- 修改银行站点的DOM、CSSOM等信息；
- 在银行站点内插入恶意JavaScript脚本；
- 劫持用户登录的用户名和密码；
- 读取用户的Cookie、IndexDB等数据；
- ...
同源策略
那么如何保证只有同一个家庭里的家长才能查询学生的成绩呢？对应Web世界里，如何保证网页只能被同一个域中的代码查询、修改呢？
这就有了我们今天的主角：同源策略（Same-origin policy）。
同源策略是一种约定，它是浏览器最核心也最基本的安全功能 ... 可以说Web是构建在同源策略的基础之上的，浏览器只是针对同源策略的一种实现。
来自《白帽子讲Web安全》
什么是同源
如果两个URL是协议（protocol）、端口（port）、域名（host）都相同的话，那么这两个URL就是同源的。
下表给出了与URLhttp://store.company.com/dir/page.html的源进行对比的示例：
| URL | 结果 | 原因 |
|---|---|---|
http://store.company.com/dir2/other.html | 同源 | 只是路径不同 |
http://store.company.com/dir/inner/another.html | 同源 | 只是路径不同 |
https://store.company.com/secure.html | 不同源 | 协议不同 |
http://store.company.com:81/dir/etc.html | 不同源 | 端口不同 ( http:// 默认端口是80) |
http://news.company.com/dir/other.html | 不同源 | 主机不同 |
同源策略的作用
从上面的例子我们知道，同源策略的作用就是限制来自另一个域的资源交互，从而保障我们网站的隐私和数据的安全。
同源策略的表现
具体来讲，同源策略主要表现在DOM、Web数据、网络数据三个层面：
DOM层面。同源策略限制了来自不同源的JavaScript脚本对当前页面的DOM对象进行读写操作，从而防止跨域脚本篡改DOM结构。
Web数据层面。同源策略限制不同源的站点读取当前站点的Cookie、LocalStorage和IndexDB等数据，从而保障数据的安全性。
网络层面。同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。
安全性和可用性的权衡
浏览器在安全性和可用性之间做了取舍。众所周知，对于小项目而言，我们可以把所有资源都放在自有服务器上面。但是对于中等乃至大型项目而言，由于服务器的价格昂贵，我们项目的静态资源文件如：图片、视频等，需要托管在第三方来削减运营成本，所以浏览器在遵循安全性的基础上，放宽了限制，允许img、script、style标签进行跨域引用资源。
跨域的解决方案
jsonp
通过向网页添加一个<script>标签，向服务器请求 JSON 数据，请求到数据后，将数据放在一个指定名字的回调函数的参数位置传回来。
原生实现：
let scriptElement = document.createElement('script')
scriptElement.type = 'text/javascript'
// 传参一个回调函数名给后端，方便后端返回时执行这个回调函数
scriptElement.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback'
document.head.appendChild(scriptElement)
// 执行回调函数
function handleCallback(res) {
console.warn(JSON.stringify(res));
}
服务端返回如下（返回时执行全局函数）：
handleCallback({status: true, user: 'admin'})
Jquery ajax：
$.ajax({
url: 'http://www.domain2.com:8080/login',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: 'handleCallback', // 自定义回调函数
data: {},
})
后端Node.js代码示例：
var querystring = require('querystring')
var http = require('http')
var server = http.createServer()
server.on('request', function(req, res) {
var params = qs.parse(req.url.splite('?')[1])
var fn = params.callback;
// jsonp返回设置
res.writeHead(200, { 'Content-type': 'text/javascript' })
res.write(fn + '(' + JSON.stringify(params) + ')')
res.end()
})
server.listen('8080')
console.log('Server is running at port 8080...')
jsonp 的缺点：只能实现 get 请求。
location.hash + iframe
location.hash 方式跨域，是子框架具有修改父框架 src 的 hash 值，通过这个属性进行传递数据，且更改 hash 值，页面不会刷新，但是传递的数据的字节数是有限的。
页面 a.hmtl 的代码：
<iframe src="b.html" id="myIframe" onload="test()"></iframe>
<script>
// iframe载入b.html页面后会执行该函数
function test() {
// 获取用过b.html页面设置的hash值
var data = window.location.hash;
console.log(data);
}
</script>
页面 b.html 的代码：
<script type="text/javascript">
// 设置父页面的 hash 值
parent.location.hash = "Hello World!"
</script>
location.hash 的缺点：无法应对复杂的功能场景。
window.name + iframe
window 对象有一个 name 属性，该属性有个特征：即在一个窗口的生命周期内都是共享一个 window.name 的，每个页面对 window.name 都有读写的权限，window.anme 是持久存在一个窗口过的所有页面中的，并不会因为新页面的载人而进行重置。
页面 a.html 的代码：
<iframe src="http://laixiangran.cn/b.html" id="myIframe" onload="test()" style="display: none;">
<script>
// 2. iframe载入 "http://laixiangran.cn/b.html 页面后会执行该函数
function test() {
var iframe = document.getElementById('myIframe');
// 重置 iframe 的 onload 事件程序，
// 此时经过后面代码重置 src 之后，
// http://www.laixiangran.cn/a.html 页面与该 iframe 在同一个源了，可以相互访问了
iframe.onload = function() {
var data = iframe.contentWindow.name; // 4. 获取 iframe 里的 window.name
console.log(data); // hello world!
};
// 3. 重置一个与 http://www.laixiangran.cn/a.html 页面同源的页面
iframe.src = 'http://www.laixiangran.cn/c.html';
}
</script>
页面 b.html 的代码：
<script type="text/javascript">
// 给当前的 window.name 设置内容
window.name = "Hello World!";
</script>
window.name + iframe 的缺点是：无法应对复杂的功能场景。
postMessage
window.postMessage(message, targetOrigin) 方法是 HTML5 新引进的特性，可以使用它来向其他的 window 对象发送消息，无论这个 window 对象是属于同源或者不同源。
调用 postMessage 方法的 window 对象是指要接收消息的那个 window 对象，该方法的第一个参数 message 为要发送的消息，类型只能为字符串；第二个参数 targetOrigin 用来限定接收消息的那个 window 对象所在的域，如果不想限定域，可以使用通配符 *。
需要接收消息的 window 对象，可是通过监听自身的 message 事件来获取传递的消息，消息内容存储在该事件对象的 data 属性中。
页面 a.html 的代码：
<iframe src="http://laixiangran.cn/b.html" id="myIframe" onload="test()" style="display: none;">
<script>
// 1. iframe载入 "http://laixiangran.cn/b.html 页面后会执行该函数
function test() {
// 2. 获取 http://laixiangran.cn/b.html 页面的 window 对象，
// 然后通过 postMessage 向 http://laixiangran.cn/b.html 页面发送消息
var iframe = document.getElementById('myIframe');
var win = iframe.contentWindow;
win.postMessage('我是来自 http://www.laixiangran.cn/a.html 页面的消息', '*');
}
</script>
页面 b.html 的代码：
<script type="text/javascript">
// 注册 message 事件用来接收消息
window.onmessage = function(e) {
e = e || event; // 获取事件对象
console.log(e.data); // 通过 data 属性得到发送来的消息
}
</script>
跨域资源共享（CORS）
CORS（Cross-origin resource sharing，跨域资源共享）是W3C标准，定义了在必须访问跨域资源时，浏览器与服务器应该怎样通信。CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器跟服务器沟通，从而决定请求或响应是应该成功，还是应该失败。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信和同源的ajax通信没有区别，代码完全一样。浏览器一旦发现ajax请求跨源，就会自动添加一些附加的头部信息，有时还会多出现一次附加的请求，但是用户不会察觉。
因此，实现CORS通信的关键是服务器，只要服务器实现了CORS接口，就可以跨源通信。
浏览器将CORS请求分成两类：简单请求和非简单请求；
只要同时满足以下两大条件，就属于简单请求：
- 请求方法是以下三种方法之一: HEAD、GET、POST
- HTTP的头信息不超出以下几种字段: Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type
凡是不同时满足上面两个条件，就属于非简单请求。
浏览器对这两种请求的处理，是不一样的：
简单请求
在请求中需要额外添加一个 Origin 的头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。例如：Origin: http://www.laixiangran.cn。
如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息（如果是公共资源，可以回发*）。例如：Access-Control-Allow-Origin: http://www.laixiangran.cn。
没有这个头部或者有这个头部但是源信息不匹配，浏览器就会驳回请求。正常请求下，浏览器会处理请求。注意，请求和响应都不包含cookie信息。
如果需要包含cookie信息，ajax请求需要设置xhr的属性withCredentials为true，服务器需要设置响应头部Access-Control-Allow-Credentials: true。
非简单请求
浏览器在发送真正的请求之前，会先发送一个 Preflight 请求给服务器，这种请求使用 OPTIONS 方法，发送下列头部：
Origin: 与简单的请求相同；Access-Control-Request-Method: 请求自身使用的方法；Access-Control-Request-Headers: (可选)自定义的头部信息，多个头部信息以逗号分隔；
Origin: http://www.laixiangran.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: NCZ
发送这个请求后，服务器可以决定是否允许这种类型的请求。服务器通过在响应中发送如下头部与浏览器进行沟通：
Access-Control-Allow-Origin：与简单的请求相同。Access-Control-Allow-Methods: 允许的方法，多个方法以逗号分隔。Access-Control-Allow-Headers: 允许的头部，多个方法以逗号分隔。Access-Control-Max-Age: 应该将这个 Preflight 请求缓存多长时间（以秒表示）。
Access-Control-Allow-Origin: http://www.laixiangran.cn
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: NCZ
Access-Control-Max-Age: 1728000
一旦服务器通过 Preflight 请求允许该请求之后，以后每次浏览器正常的 CORS 请求，就都跟简单请求一样了。
优点
- CORS 通信与同源的 AJAX 通信没有差别，代码完全一样，容易维护；
- 支持所有类型的 HTTP 请求；
缺点
- 存在兼容性问题，特别是 IE10 以下的浏览器；
- 第一次发送非简单请求时会多一次请求。
WebSocket 协议
WebSocket protocol 是 HTML5 一种新的协议，它实现了浏览器跟服务器全双工通信，同时允许跨域通讯，是 server push 技术的一种实现。
前端代码：
<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
// 连接成功处理
socket.on('connect', function() {
// 监听服务端消息
socket.on('message', function(msg) {
console.log('data from server: ---> ' + msg);
});
// 监听服务端关闭
socket.on('disconnect', function() {
console.log('Server socket has closed.');
});
});
document.getElementsByTagName('input')[0].onblur = function() {
socket.send(this.value);
};
</script>
Node.js socket 后台：
var http = require('http')
var socket = require('socket.io')
// 启动HTTP服务
var server = http.createServer(function(req, res) {
res.writeHead(200, { 'Content-type': 'text/html' })
res.end()
})
server.listen(8080)
// 监听 socket 连接
socket.listen(server).on('connection', function(client) {
// 接收信息
client.on('message', function(msg) {
client.send('Hello：' + msg)
console.log('data from client: ---> ' + msg)
})
// 断开处理
client.on('disconnect', function() {
console.log('Client socket has closed.')
})
})
