同源策略、跨域

同源策略

1、什么是源

以下面这段代码为例

|http://www.iconfont.cn:80/home/index?spm=a313x.7781069.1998910419.2

• http:// 是协议名
• www.iconfont.cn 是域名
• 80 是端口号，默认情况下不显示，https协议下默认端口号是43，ftp协议下默认端口号是21
• /home/index 是带层次的文件路径
• spm=a313x.7781069.1998910419.2 是查询字符段
• 源（origin）就是指协议、域名、端口号

2、什么是同源

• 即地址里的协议、域名和端口号都相同，则属于同源

以http://abc.efg.com/h/index.html为例做同源检测有下表

什么是同源策略

同源策略是一种约定，是浏览器最核心也是最基本的安全功能，主要体现在同源策略会限制来自不同源的文档和脚本对当前源的文档数据的读取或设置某些属性，是用于隔离潜在恶意文件的重要安全机制

同源策略控制了不同源的交互，主要有三类交互

• 跨域写：通常允许，比如链接、重定向和表单提交(因为表单提交不需要反馈数据)
• 跨域资源嵌入：通常允许，下面会给出跨域资源嵌入的例子
• 跨域读：通常不允许，比如在使用XMLHttpRequest的时候会发生跨域问题，不过通过某些方法仍可以进行跨域读

注意：IE是例外

在同源策略中，Internet Explorer有两点不同

• 授信范围（Trust Zones）：两个相互之间高度互信的域名，如公司域名 （corporate domains），不遵守同源策略的限制。
• 端口：未将端口号加入到同源策略的组成部分之中，因此 http://abc.com:81/index.html和http://abc.com/index.html 属于同源并且不受任何限制。

跨域

浏览器同源策略的机制的存在无法避免，而我们实际应用中又不可避免的对于不同域要操作，那我们就只能跨域了

如何跨域

• 降域 document.domain

http://a.bcd.com/index.html
http://b.bcd.com/index.html

上面两个url虽然有个共同的bcd.com的一级域名，二级域名却不一样，这样的话同源策略也一样不认为它俩是同源，对于这种情况，我们可以将两个页面都设置document.domain='bcd.com'，这样的话两个页面都可以互相访问

• 这个方式的特点

  • 只能在父域名与子域名之间使用，且将 域名设置为bcd.com后，不能再设置为原先的域名。
  • 存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞。
  • 这种方法只适用于 Cookie 和 iframe 窗口。

• JSONP跨域
  JSONP和JSON并没什么关系
  我们要知道一个概念即<script>里的src属性是不受同源策略的影响的，JSONP的原理就是利用这个机制来进行跨域，
  JSONP的原理：（举例：a.com/jsonp.html想得到b.com/main.js中的数据）在a.com的jsonp.html里创建一个回调函数xxx，动态添加<script>元素，向服务器发送请求，请求地址后面加上查询字符串，通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx，并且以JSON数据形式作为参数传递，完成回调。我们来看看代码：

  // a.com/jsonp.html中的代码
  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://b.com/main.js?callback=foo');
  } //window.onload是为了让页面加载完成后再执行
  function foo(data) { 
        console.log(data.name+"欢迎您");
  };


   //b.com/main.js中的代码
   foo({name:"hl"})

JSONP跨域也有些问题存在

• 使用这种方法，只要是个网站都可以拿到b.com里的数据，存在安全性问题。需要网站双方商议基础token的身份验证。
• 只能是GET，不能POST。
• 可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。

• CORS
  CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing），是一种ajax跨域 请求资源的方式，支持现代浏览器，支持IE10以上。实现的方式很简单，当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回的结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断响应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以，CORS的表象是让你觉得他与同源的AJAX的请求没啥区别，代码完全一样。
  在刚才的例子中，在b.com里面添加响应头声明允许a.com的访问，代码如下

 Access-Control-Allow-Origin: http://a.com

这样a.com就可以访问b.com里面的数据了
注意：此方法IE8以下完全不支持，IE8以上部分支持，具体参照caniuse
CORS详细内容请移步至阮老师-CORS详解

• 其它方式
  • HTML5的postMessage方法
  • window.name
  • location.hash