什么是跨域，为什么浏览器会禁止跨域，及其引起的发散性学习_跨域会造成什么影响

浏览器的跨域问题以及解决方案
浅谈CSRF攻击方式
参考了上面的大神们的文章，以下是自己的总结。

1、什么是跨域

跨域的产生来源于现代浏览器所通用的‘同源策略’，所谓同源策略，是指只有在地址的：
1. 协议名
2. 域名
3. 端口名
均一样的情况下，才允许访问相同的cookie、localStorage或是发送Ajax请求等等。若在不同源的情况下访问，就称为跨域。

2、为什么浏览器会禁止跨域

跨域的访问会带来许多安全性的问题，比如，cookie一般用于状态控制，常用于存储登录的信息，如果允许跨域访问，那么别的网站只需要一段脚本就可以获取你的cookie，从而冒充你的身份去登录网站，造成非常大的安全问题，因此，现代浏览器均推行同源策略。

3、如何解决跨域访问问题

跨域一般有以下几种方式：

同浏览器不同窗口实现跨域：

• 通过设置window.name，再访问其他网页，就可以获取到window.name属性，只要在其他网页监听window.name属性的变化即可实现跨域的消息传递。
• 在一级域名相同，二级域名不相同的情况下，可以通过将window.domain设置为相同，比如在http://aaa.next.com/index.html中执行window.domain = 'next'，在http://bbb.next.com/index.html也执行window.domain = 'next'，此时这两个不同的源之间就可以互相访问了。
• 使用HTML5新提供的postMessage api也可以实现跨域，在此不做详述，直接搬运代码：

/* 子窗口 */
window.onmessage = function(e) {  
  if (e.origin !== 'http://bbb.com') return;  
  var payload = JSON.parse(e.data);  
  switch (payload.method) {  
    case 'set':  
      localStorage.setItem(payload.key, JSON.stringify(payload.data));  
      break;  
    case 'get':  
      var parent = window.parent;  
      var data = localStorage.getItem(payload.key);  
      parent.postMessage(data, 'http://aaa.com');  
      break;  
    case 'remove':  
      localStorage.removeItem(payload.key);  
      break;  
  }  
};  
/* 父窗口 */
var win = document.getElementsByTagName('iframe')[0].contentWindow;  
var obj = { name: 'Jack' };  
// 存入对象  
win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com');  
// 读取对象  
win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");  
window.onmessage = function(e) {  
  if (e.origin != 'http://aaa.com') return;  
  // "Jack"  
  console.log(JSON.parse(e.data).name);  
};  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

AJAX跨域

• JSONP

JSONP是通过在script标签中访问不同域的URL实现跨域：

function addScriptTag(src) {  
  var script = document.createElement('script');  
  script.setAttribute("type","text/javascript");  
  script.src = src;  
  document.body.appendChild(script);  
} 
window.onload = function () {  
  addScriptTag('http://example.com/ip?callback=foo');  
}
function foo(data) {  
  console.log('Your public IP address is: ' + data.ip);  
};
1
2
3
4
5
6
7
8
9
10
11
12

这里的callback参数可以指定JSONP请求的回调，请求接收到的数据可以在回调函数的第一个参数中取到。
JSONP只能发送GET请求，作为跨域方式来说受到的限制比较多，如今适用性不是很广。

• WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

由于这是一种特殊的跨域方式，在此不做详细说明。

• CORS

CORS全称cross-origin resource sharing，意为跨站点资源共享，是w3c官方推荐的一种跨域方案，目前所有浏览器对其兼容性都表现良好，而且支持所有的请求方式，可以预见是未来最为广泛使用的跨域方案。

在支持CORS方案的浏览器中发送AJAX请求，请求地址为目标域的绝对路径时，请求头中会带有一个字段：withCredentials: true，这个字段会让浏览器发送身份信息到服务端，如SSL、cookie等。与此同时，在服务端中设置响应头中的Access-Control-Allow-Origin: *，则可以实现一个跨域请求。

注意：在实际使用中，最好对Access-Control-Allow-Origin进行指定域名的设置，如：Access-Control-Allow-Origin: www.test.com。如果使用Access-Control-Allow-Origin: *，则会允许所有来源进行跨域访问，这会带来比较大的安全问题。

4、使用cdn服务托管静态资源带来的跨域问题

使用cdn托管服务的时候，由于域名不同，加载某些静态资源的时候会出现跨域报错的情况，这个问题阿里云的帮助文档给出了解决方案：CDN支持cors（跨域）配置的步骤与注意事项

解决的方案其实也是使用CORS的原理，可以配置响应头字段Access-Control-Allow-Origin（用于指定允许跨域的域名）与Access-Control-Allow-Methods（指定允许跨域的请求类型）。

5、CSRF攻击

既然说到跨域，那就要说一下实现非法跨域导致的安全问题，CSRF攻击。

CSRF攻击，全称cross-site request forgery，即跨站点请求伪造。这篇文章对CSRF攻击做了详细的介绍：浅谈CSRF攻击方式。

下图简单的阐述了CSRF攻击的思想：