同源和跨域

139 阅读3分钟

同源

两个url中的协议+域名+端口一致,就说这个两个url是同源

例如:

url 结果 原因
www.example.com/dir/page2.h… 只有路径不同
www.example.com/dir2/other.… 只有路径不同
username:password@www.example.com/dir2/other.… 只有路径不同
www.example.com:81/dir/other.h… 不同端口(若未标明,http:// 默认端口号为80)
en.example.com/dir/other.h… 不同协议(https和http)
example.com/dir/other.h… 不同域名
v2.www.example.com/dir/other.h… 不同域名(需要完全匹配)

同源策略

同源策略是指在Web浏览器中,允许某个网页脚本访问另一个网页的数据,但前提是这两个网页必须有相同的URI、主机名和端口号,一旦两个网站满足上述条件,这两个网站就被认定为具有相同来源。此策略可防止某个网页上的恶意脚本通过该页面的文档对象模型访问另一网页上的敏感数据。

同源策略对Web应用程序具有特殊意义,因为Web应用程序广泛依赖于HTTP cookie来维持用户会话,所以必须将不相关网站严格分隔,以防止丢失数据泄露。

跨域资源共享(CORS)

跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

比如,站点 domain-a.com 的某 HTML 页面通过 的 src 请求 domain-b.com/image.jpg。网…

出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非响应报文包含了正确CORS响应头。 cors的使用比较方便和简单,只需要在response.setHeader上加Access-Control-Allow-Origin和指定网站

response.setHeader("Access-Control-Allow-Origin","http://example.com")

事实上,我们不会只指定固定的网站访问,可以通过获取到请求网站的url,然后填充的我们指定的网站,这样会很便捷。

jsonp

W3C:由于跨域策略,从另一个域请求文件可能会导致问题。

从另一个域请求外部脚本不会出现此问题。

JSONP利用了这一优势,并使用脚本标签而不是XMLHttpRequest对象来请求文件。

(事实上IE不支持CORS,为了支持IE只能另辟道路)。

本质上就是:当前网站创建一个script去请求另一个网站的js,js夹带一些数据,这些数据调用网站的全局函数去运行。

优点:

  1. 支持IE
  2. 也可以跨域

缺点:

  1. 不支持'POST'请求
  2. 由于是script标签,并不能像AJAX那样可以准确的获得Header和状态码。