JavaScript 的同源策略

本文内容来源：https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

(因为我在本地打不开此连接，因此就转载过来。供你们一块儿学习)

同源策略限制了一个源（origin）中加载文本或脚本与来自其它源（origin）中资源的交互方式。

同源定义

若是两个页面拥有相同的协议（protocol），端口（若是指定），和主机，那么这两个页面就属于同一个源（origin）。

下表给出了相对http://store.company.com/dir/page.html同源检测的示例:

URL	结果	缘由
http://store.company.com/dir2/other.html	成功
http://store.company.com/dir/inner/another.html	成功
https://store.company.com/secure.html	失败	协议不一样
http://store.company.com:81/dir/etc.html	失败	端口不一样
http://news.company.com/dir/other.html	失败	主机名不一样

参见origin definition for file: URLs.

源继承

来自about:blank，javascript:和data:URLs中的内容，继承了将其载入的文档所指定的源，由于它们的URL自己未指定任何关于自身源的信息。

IE特例

在处理同源策略的问题上，IE存在两个主要的不一样之处。

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

这些例外是非标准的，其它浏览器也未作出支持，但会助于开发基于window RT IE的应用程序。

变动源

页面能够改变自己的源，但会受到一些限制。脚本能够设置document.domain 的值为当前域的一个后缀

在同源策略中有一个例外，脚本能够设置 document.domain 的值为当前域的一个后缀，若是这样作的话，短的域将做为后续同源检测的依据。例如，假设在http://store.company.com/dir/other.html 中的一个脚本执行了下列语句：

document.domain = "company.com";

这条语句执行以后，页面将会成功地经过对 http://company.com/dir/page.html 的同源检测。而同理，company.com 不能设置 document.domain 为othercompany.com.

浏览器单独保存端口号。任何的赋值操做，包括document.domain = document.domain都会以null值覆盖掉原来的端口号。所以company.com:8080页面的脚本不能仅经过设置document.domain = "company.com"就能与company.com通讯。赋值时必须带上端口号，以确保端口号不会为null。

附注：使用document.domain来安全是让子域访问其父域，须要同时将子域和父域的document.domain设置为相同的值。必需要这么作，即便是简单的将父域设置为其原来的值。没有这么作的话可能致使受权错误。

跨域网络访问

同源策略控制了不一样源之间的交互，例如在使用XMLHttpRequest 或 <img> 标签时则会受到同源策略的约束。交互一般分为三类：

• 一般容许进行跨域写操做（Cross-origin writes）。例如连接（links），重定向以及表单提交。特定少数的HTTP请求须要添加 preflight。
• 一般容许跨域资源嵌入（Cross-origin embedding）。以后下面会举例说明。
• 一般不容许跨域读操做（Cross-origin reads）。但常能够经过内嵌资源来巧妙的进行读取访问。例如能够读取嵌入图片的高度和宽度，调用内嵌脚本的方法，或availability of an embedded resource.

如下是一些能够跨域内嵌的资源示例：

• <script src="..."></script>标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。
• <link rel="stylesheet" href="...">标签嵌入CSS。因为CSS的松散的语法规则，CSS的跨域须要一个设置正确的Content-Type消息头。不一样浏览器有不一样的限制： IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。
• <img>嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,...
• <video> 和 <audio>嵌入多媒体资源。
• <object>, <embed> 和 <applet>的插件。
• @font-face引入的字体。一些浏览器容许跨域字体（ cross-origin fonts），一些须要同源字体（same-origin fonts）。
• <frame> 和 <iframe>载入的任何资源。站点可使用X-Frame-Options消息头来阻止这种形式的跨域交互。

实现跨域访问

使用CORS 来实现跨域访问。

阻止跨域访问

• 阻止跨域写操做，只要检测请求中的一个不可测的标记(CSRF token)便可，这个标记被称为Cross-Site Request Forgery (CSRF) 标记。必须使用这个标记来阻止页面的跨站读操做。
• 阻止资源的跨站读取，须要保证该资源是不可嵌入的。阻止嵌入行为是必须的，由于嵌入资源一般向其暴露信息。
• 阻止跨站嵌入，确保你得资源不能是以上列出的可嵌入资源格式。多数状况下浏览器都不会遵照Conten-Type消息头。例如，若是你在<script>标签中嵌入HTML文档，浏览器仍将HTML解析为Javascript。When your resource is not an entry point to your site, you can also use a CSRF token to prevent embedding.

跨域脚本API访问

Javascript的APIs中，如 iframe.contentWindow, window.parent, window.open 和 window.opener 容许文档间直接相互引用。当两个文档的源不一样时，这些引用方式将对 Window 和 Location对象的访问添加限制。可使用window.postMessage 做为替代方案，提供跨域文档间的通信。

跨域数据存储访问

 

存储在浏览器中的数据，如localStorage和IndexedDB，以源进行分割。每一个源都拥有本身单独的存储空间，一个源中的Javascript脚本不能对属于其它源的数据进行读写操做。

window.name属性能够用来临时存储数据，能够跨域访问。

Cookies使用不一样的源定义方式。一个页面能够为本域和任何父域设置cookie，只要是父域不是公共后缀（public suffix）便可。Firefox和Chrome使用Public Suffix List决定一个域是不是一个公共后缀（public suffix）。无论使用哪一个协议（HTTP/HTTPS）或端口号，浏览器都容许给定的域以及其任何子域名(sub-domains)来访问cookie。设置cookie时，你可使用Domain，Path，Secure，和Http-Only标记来限定其访问性。读取cookie时，不会知晓它的出处。尽管使用安全的https链接，任何可见的cookie都是使用不安全的链接设置的。