同源策略(same-origin policy)及三种跨域方法

同源策略(same-origin policy)及三种跨域方法

1.同源策略

含义:

同源是指文档的来源相同,主要包括三个方面

  • 协议
  • 主机
  • 载入文档的URL端口

所以同源策略就是指脚本只能读取和所属文档来源相同的窗口和文档的属性这样一个规定。

同源策略目的

一项政策的颁布肯定事出有因,所以同源策略也不例外,主要是出于安全性考虑,比如可以防止恶意脚本读取内容

注意:

同源策略限制的是脚本嵌入的文本来源,而不是脚本本身,理解这点特别重要。比如B主机可以通过使用(<script>标签的src)属性加载A主机的脚本,但是却不可以载入A主机的文档,这就是同源策略发挥作用了。

限制范围

非同源,共有三种行为受到限制。

(1) Cookie、LocalStorage 和 IndexDB 无法读取。

(2) DOM 无法获得。

(3) AJAX 请求不能发送。

虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。

2.三种跨域方法

(1)设置document.domain

比如home.example.com要读取developer.example.com里面的文档,由于同源策略的限制,就无法读取,我们通过设置document.domain="example.com";这时就不再受同源策略的限制了。

(2)夸资源共享CORS(Cross-origin resource sharing)

CORS采用新的“origin:”请求头和新的Access-Control-Allow-Origin响应头来扩展HTTP。它允许服务器用头信息显示地列出源,或使用通配符来匹配所有的源并允许任何地址请求文件。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

从而它允许浏览器向跨源服务器,发出XMLHttpRequest请求,克服了AJAX只能同源使用的限制。

(3)跨文档消息(cross-document messaging)

允许来自一个文档的脚本可以传递消息到另一个文档里的脚本,而不管脚本的来源是否不同,通过调用window.postMessage()方法,可以异步传递消息事件(可以使用onmessage事件处理程序函数来处理它)到窗口的文档里。

参考:

1.javascript权威指南

2.浏览器同源政策及其规避方法

3.跨域资源共享 CORS 详解

原文地址:https://www.cnblogs.com/YeChing/p/6343215.html