0x01 同源策略

什么是同源策略？简单来说，同源策略就是同协议、同端口、同HOST。
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

对于about:blank、javascript:这种特殊的URL，他们的源继承加载他们的页面的源，他们本身不存在源这个概念。

目前，如果非同源，共有三种行为受到限制。

（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

0x02 HTTP请求控制

总体来说，页面跨域行为主要有以下三类:
Cross-origin read（跨域读）
Cross-origin write（跨域写）
Cross-origin embedding（跨域嵌入）

一般来说，只有Cross-origin read是不允许的，其他两种是被允许的。例如Cross-origin write的links、重定向、表单提交等，Cross-origin embedding的资源嵌入，在资源嵌入中，以下例子是被允许的

<script src="..."></script>标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。<a class="md_block_a" style="margin: 0px; padding: 0px; text-decoration: none;"></a>

<link rel="stylesheet" href="...">`标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的`Content-Type`消息头，不同浏览器有不同的限制。<a class="md_block_a" style="margin: 0px; padding: 0px; text-decoration: none;"></a>

<img>嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,...<a class="md_block_a" style="margin: 0px; padding: 0px; text-decoration: none;"></a>

<video>和 <audio>嵌入多媒体资源。<a class="md_block_a" style="margin: 0px; padding: 0px; text-decoration: none;"></a>

<object>, <embed> 和 <applet>的插件。<a class="md_block_a" style="margin: 0px; padding: 0px; text-decoration: none;"></a>

@font-face引入的字体。一些浏览器允许跨域字体（cross-origin fonts），一些需要同源字体（same-origin fonts）。<a class="md_block_a" style="margin: 0px; padding: 0px; text-decoration: none;"></a>

<frame>和<iframe>载入的任何资源。站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。

那么当我们想要跨域读取又该怎么办呢？这是我们就得用到另一个协议CORS（跨域资源共享）http://www.jianshu.com/p/41cfbc985be8