【浏览器学习之旅☞】同源策略与跨域访问（跨域）

同源策略

• 定义

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。--------取自MND

• 同源的定义
  如果两个页面的协议，端口（如果有指定）和域名都相同（即
  protocol +host+port 都相同），则两个页面具有相同的源。

  举个例子：相对http://amap.com:9528/index.html 连接，是相同源检测的示例:

URL	是否同源	原因
http://amap.com:9528/static/ndex.html	√	该URL的protocol+host+port与http://amap.com:9528/index.html相同
http://amap.com:9528/other.html	√	该URL的protocol+host+port与http://amap.com:9528/index.html相同
https://amap.com:9529/index.html	×	协议不同
http://amap.com:9529/index.html	×	端口不同
http://amap1.com/index.htm	×	host不同，即域名不同

• 总结
  同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以amap.com下的js脚本采用ajax读取amap1.com里面的文件数据是会被拒绝的。

跨域

1. 定义

   跨域即指不同源之间的交互。
   同源策略控制不同源之间的交互，例如在使用XMLHttpRequest 或 签时则会受到同源策略的约束。这些交互通常分为三类：

   a. 跨域写操作

   跨域写操作（Cross-originwrites）一般是被允许的。例如链接（links），重定向以及表单提交。特定少数的HTTP请求需要添preflight。

   b. 跨域资源嵌入

   跨域资源嵌入（Cross-origin embedding）一般是被允许（后面会举例说明）。

   c. 跨域读操作

   跨域读操作（Cross-origin
   reads）一般是不被允许的，但常可以通过内嵌资源来巧妙的进行读取访问。例如，你可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法，或availability
   of an embedded resource.

   以下是可能嵌入跨源的资源的一些示例：

• 标签嵌入跨域脚本。语法错误信息只能被同源脚本中捕捉到。
• 标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的 HTTP 头部 Content-Type 。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。
• 通过 展示的图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG,…
• 通过 和 播放的多媒体资源。
• 通过 、 和 嵌入的插件。
• 通过 @font-face 引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。
• 通过 载入的任何资源。站点可以使用 X-Frame-Options 消息头来阻止这种形式的跨域交互。

2. 如何允许跨源访问
   可以使用 CORS 来允许跨源访问。CORS 是 HTTP 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。

3. 如何阻止跨源访问
   a. 阻止跨域写操作，只要检测请求中的一个不可推测的标记(CSRF token)即可，这个标记被称为 Cross-Site Request Forgery (CSRF) 标记。你必须使用这个标记来阻止页面的跨站读操作。
   b. 阻止资源的跨站读取，需要保证该资源是不可嵌入的。阻止嵌入行为是必须的，因为嵌入资源通常向其暴露信息。
   c. 阻止跨站嵌入，需要确保你的资源不能通过以上列出的可嵌入资源格式使用。浏览器可能不会遵守 Content-Type 头部定义的类型。例如，如果您在HTML文档中指定 script 标记，则浏览器将尝试将标签内部的 HTML 解析为JavaScript。 当您的资源不是您网站的入口点时，您还可以使用CSRF令牌来防止嵌入。

------以上关于跨域的解释内容来自于MDN

非同源的限制：

• 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
• 无法接触非同源网页的 DOM
• 无法向非同源地址发送 AJAX 请求