同源策略限制一个加载于A origin的document或者script能够如何和来自于另外一个origin的resource交互。同源策略是隔离潜在恶意网页的安全机制。

源的定义

两个网页只有具有相同的protocol,port以及host才被认为是具有相同的origin的。

比如http://xxx.yyy.com:8000/zzz/page.html和http://xxx.yyy.com:8000/kkk/index.html具有相同的origin

about:blank, javascript: and data: URLs则从加载那个URL的文件中继承origin.

同源策略控制了异源之间的互操作，比如，当你使用XMLHttpRequest或者一个<img>元素时就存在这个问题。这些互操作(interactions)典型地放在三个category中：

• cross-origin writes通常是被允许的，比如links,redirect,或者提交一个表单form.
• cross-origin embedding也通常是被允许的，例如：
• 使用<script src="..."></script>引入的javascript，这种情况下关于语法错误的错误消息只在同源的脚本中存在；(Content-Type:text/javascript或者application/javascript)
• 使用<link rel="stylesheet" href="...">来引入的css。注意由于css的语法rule,跨域的css需要一个合适的content-type header (Content-Type:text/css)
• 使用<img>标签引入的图片，包括PNG,JPEG,GIF,BMP,SVG等。。。
• 使用<video><embed>或者<applet>来引入的plug-in
• 使用@font-face引入的字体.但是要注意虽然chrome能很好的工作，但是有些浏览器，比如firefox,ie可能不允许非同源的字体文件被加载，这种情况下，如果使用你自己的CDN网络（这很普遍），则需要配置

  # Apache config
  <FilesMatch ".(eot|ttf|otf|woff)">
  	Header set Access-Control-Allow-Origin "*"
  </FilesMatch>

• • 任何使用<frame>和<iframe>引入的东西。注意：一个网站可以通过使用X-Frame-Options 头来防止你自己的网页被别人frame过去！
• cross-origin read一般是不允许的，但是一般如果通过embed方式来调用则往往会泄漏部分读的权限。比如，你可以读取到embedded image的宽和高　　

如何允许跨源访问呢？使用CORS机制吧

var invocation = new XMLHttpRequest();
var url = ‘http://bar.other/resources/public-data/‘;

function callOtherDomain() {
  if(invocation) {
    invocation.open(‘GET‘, url, true);
    invocation.onreadystatechange = handler;
    invocation.send();
  }
}

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://foo.example/examples/access-control/simpleXSInvocation.html
Origin: http://foo.example

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

如何阻止跨域（源）访问呢？

• 为了组织cross-origin writes,通过判断一个在request中存在的不易猜出的token(CSRF)TOKEN。注意你必须阻止cross-origin reads of pages that know this token.
• 为了阻止cross-origin reads of a resource,必须确保它是不能被embedded(not embeddable)。通常，我们是需要阻止embedding的，因为embedding一个resource通常会泄漏它的部分信息的！
• 为了阻止cross-origin embedding,确保你的资源不能被翻译为上述embeddable格式中的任何一种。浏览器大多数情况下并不会respect Content-Type.比如如果你将<script>tag指向一个html文档，那么浏览器则将尽自己所能将HTML解析为javascript.当你的资源不是一个你站点的入口时，你可以使用CSRF token来阻止embedding.

Cross-orgin script API access

Javascript API,比如iframe.contentWindow, window.parent, window.open,window.opener允许documents来直接引用彼此。当两个document不同源时，这些reference则仅对Window和Location对象开放相当有限的访问权限，下面将分别列出。

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy