之所以要将同源战略与跨域写在一同，是由于存在浏览器的同源战略，才会存在跨域题目

作甚同源战略

同源战略是浏览器完成的一种平安战略，它限定了不同源之间的文档和剧本交互的权限。只需同一个源的剧本才会具有操纵dom、读写cookie、session 、ajax等敏感操纵的权限。可以说同源战略在web平安中扮演着及其重要的角色。所谓同源简朴来讲等于两个页面必需具有雷同的协定、端口另有域名。 

以http://www.site.com/index.html为例，举个小栗子：

IE是个破例

不能不奚弄一下，在兼容性方面IE好像永久都难以跟上别的浏览器生长的步调，永久都是一个破例。

• 授信局限（Trust Zones）：两个相互之间高度互信的域名，如公司域名（corporate domains），不恪守同源战略的限定。
• 端口：IE未将端口号到场到同源战略的构成部份当中，因而 http://www.size.com:81/index.html 和http://www.size.com:8090/index.html 属于同源而且不受任何限定。

虽然同源战略限定了跨域文档剧本的操纵才能，但明白许可部份资本性的标签是可以加载跨域资本的，如<img>,<script>。部份具有跨域才能的标签以下,来源于MDN：

• <script src=”…”></script> 标签嵌入跨域剧本。语法毛病信息只能在同源剧本中捕捉到。
• <link rel=”stylesheet” href=”…”>标签嵌入CSS。由于CSS的松懈的语法划定规矩，CSS的跨域须要一个设置准确的Content-Type音讯头。
• <img>嵌入图片。
• <video> 和 <audio>嵌入多媒体资本。
• <object>, <embed> 和 <applet>的插件。
• @font-face引入的字体。
• <frame> 和 <iframe>载入的任何资本。站点可以运用X-Frame-Options音讯头来阻挠这类情势的跨域交互。

跨域的要领

在浏览器同源战略的平安限定下，跨域的需求仍然是有的。这类需求可以分为合理的和不合理的。细致来讲不合理的就是，第三方歹意网站应用同源战略的一些破绽，对目的网站举行一些不许可的操纵，这类操纵我们称之为跨域进击。细致可以参照我的别的几篇博客：

• CSRF进击（跨域伪要求）
• XSS进击（跨域剧本进击）

合理的跨域要求可以是: 一些大团体下面的几个子域名之间的跨域交互，也可以是协作网站之间的跨域交互等等，总之就是被许可的。下面来细致说说完成这类合理跨域的几种要领：

写在前面： 一切的跨域要领都邑带来平安性的题目，一旦歹意网站可以胜利在目的网站运转剧本或许具有操纵的才能，他们也就具有了目的网站的跨域才能。

document.domain

剧本可以将 document.domain 的值设置为其当前域或其当前域的超等域。

这类要领的长处就是：简朴，只需在前端js中设置就好了
弊病：只合实用于子域与父域之间另有子域之间的跨域

CORS / Access-Control-Allow-Origin: *

完成起来非常简朴，主如果经由历程在服务器设置HttpHeader，客户端搜检本身的域是不是在许可列表中，决议是不是处置惩罚相应。详情请参考CORS MDN, 应用CORS完成跨域要求

服务器端可以在HTTP的相应头中到场（页面条理的掌握形式）：
Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600

多个域名之间用逗号分开，示意对所示域名供应跨域接见权限。”*”示意许可一切域名的跨域接见。

此要领的长处：简朴快速，设置简朴，基础可以处理任何域的跨域题目
弊病：仅实用与客户端与跨域服务器的交互；别的具有浏览器的兼容性题目，不兼容IE7以及以下。
在IE8——IE9 中要运用xhr = new XDomainRequest();来替换xhr = new XMLHttpRequest();

检察跨域剧本的毛病

在之前，当尝试运用 window.onerror 去纪录跨域剧本的毛病时，只会返回 Script error, 没法猎取到细致的报错信息。这类状况在html5中得到了改变，html新加了一个crossorigin属性，许可捕捉跨域剧本的细致毛病信息，然则有两个前提：

1. 跨域剧本的服务器必需经由历程 Access-Controll-Allow-Origin 头信息许可当前域名可以猎取毛病信息
2. 当前域名的 script 标签也必需指明 src 属性指定的地点是支撑跨域的地点，也就是要增添crossorigin 属性

crossorigin 具有两个值：
anonymous: 要求不带 credentials flag .
use-credentials: 要求照顾 credentials flag .

credentials flag 也就是常说的cookies, client-side SSL certificates

window.postMessage

postMessage是HTML5新的语法特征，可以让跨域的剧本之间举行交互，重要分为音讯的发送端和音讯的吸收端。
发送端：
otherWindow是其他窗口的一个援用，比方iframe的contentWindow属性、实行window.open返回的窗口对象、或许是定名过或数值索引的window.frames。

otherWindow.postMessage(
message, // 要发送到其他窗体的音讯，可以传送任何数据对象
targetOrigin, // 音讯要发送到的域，由完全的协定、地点、端口构成
[transfer] // 这是一个可选的笼统接口
);

otherWindow.postMessage() 要领被挪用时，会在一切页面剧本实行终了今后（e.g., 在该要领今后设置的事宜、之前设置的timeout 事宜,etc.）向目的窗口派发一个 MessageEvent 音讯。
吸收端：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  // For Chrome, the origin property is in the event.originalEvent
  // object.
  var origin = event.origin || event.originalEvent.origin; 
  if (origin !== "http://example.org:8080")
    return;

  // ...
}

message 事宜，包括4个参数

• message 属性示意该message 的范例；
• data 属性为 window.postMessage 的第一个参数即message；

— origin 挪用window.postMessage() URI
— source 挪用window.postMessage() 的窗口对象

兼容性：在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前， 参数 message 必需是一个字符串。而IE10下面也有新鲜的题目

长处：合适同一个浏览器两个跨域页面之间的剧本交互
弊病：只能从窗口的援用（也就是window.open或许window.frames[0].contentWindow）发送音讯到目的窗口,实用的局限有限

JSONP

jsonp 是比较陈旧的跨域要领，也是比较经常使用的跨域
细致来讲，它的完成以下：

function jsonp(url,data,callbackName) {
var script = document.createElement('script');
var src = url+ '?'+ data+ 'calback='+callbackName;
script.src = src;
document.head.appendChild(script);
}

function callbackName(data){
    // data from server;
}

JSONP的坑

由于在jquery中JSONP运用的是ajax的封装接口，许多人它会是ajax的一种手艺，实际上它是应用<script>标签生成具有跨域才能的一种手艺，所以许多人在jquery中运用JSONP时都邑踩坑。

• 坑一：同步，许多人会想固然地运用ajax的同步参数async来完成同步。实际上jsonp只需异步，由于script是异步加载的
• 坑二：毛病回调，在运用jquery的历程，许多人会运用ajax的error和fail接口，来捕捉跨域的非常返回。ajax的毛病接口只能捕捉要求超时、停止、json剖析毛病等一般的毛病，然则关于收集不通、服务器非常，jquery是挑选寂静地失利的。

那怎样捕捉jsonp的非常呢？
实际上<script>标签在碰到这些毛病时会触发error事宜。所以上面的代码我们可以轻微改一下，增添一个捕捉非常的回调

function jsonp(url,data,callbackName,errorbackName) {
var script = document.createElement('script');
var src = url+ '?'+ data+ 'calback='+callbackName;
script.src = src;
script.onerror = errorbackName;
document.head.appendChild(script);
}

function callbackName(data){
    // data from server;
}

别的在jquery中的处置惩罚重要有两种要领,参考 jQuery运用JSONP时的毛病处置惩罚

• 手动暴露jsonp 的毛病接口

var head = document.head || $('head')[0] || document.documentElement; // code from jquery
var script = $(head).find('script')[0];
script.onerror(function(evt) {
    alert('error');
});

• 运用jsonp的拓展库

针对jquery处置惩罚jsonp的坑，早有大神封装好插件，直接援用就可以了，方便快速费心。传送门

【相干】
web平安，是一个很重要的妙技，也是一个范畴的学问。我把这个范畴的东西写成了一个系列，今后还会继承完美下去：
web平安一：同源战略与跨域
web平安二：CSRF 进击
web平安三：XSS 进击