浏览器跨域的那些事

整理中

目标:

了解跨域

解决跨域

服务器配置跨域(java, nginx)

前端调试时配置解决跨域

一、什么是跨域

当资源请求来自不同域,协议或端口的资源时,资源会发出跨域HTTP请求。出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。例如,XMLHttpRequest并且取遵循同源策略。因此,使用XMLHttpRequest或提取 的Web应用程序只能向自己的域发出HTTP请求。

什么是同源策略

同源策略是一种关键的安全机制,它限制从一个源加载的文档或脚本如何与来自另一个源的资源交互。

浏览器禁止接收信息的目的是为了防止恶意网站从其他网站读取机密信息,但也阻止网站内容合法读取其他网站提供的信息。

同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。

举例对比:

http://hotel.jd.com/dir/index.html

url 是否同源 说明
http://hotel.jd.com/dir2/pages.html 同源 仅链接不同
http://hotel.jd.com/dir/pages/index.html 同源 仅链接不同
https://hotel.jd.com/index.html 不同源 协议不同
http://hotel.jd.com:81/pages/index.html 不同源(IE同源) 端口不同
http://train.jd.com/pages/index.html 不同源 子域名不同
http://baidu.com 不同源 主域名不同

【注】IE不包括端口到同源检查。因此,https://company.com:81/index.html和https://company.com/index.html被认为是同源的,没有任何限制。这些异常是非标准的,在任何其他浏览器中都不受支持。

浏览器可以链接跨域资源的html元素:

img、script、css、video、audio、object、embed、applet、@font-face、frame、iframe等。

(1)

(2)undefinedundefinedundefined标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。jsonp也用到了。

(3) 标签嵌入CSS。由于CSS的松散的语法规则,CSS的跨域需要一个设置正确的Content-Type消息头。不同浏览器有不同的限制: IE, Firefox, Chrome, Safari (跳至CVE-2010-0051)部分 和 Opera。

(4)

(5), 的插件。

(6)@font-face引入的字体。一些浏览器允许跨域字体( cross-origin fonts),一些需要同源字体(same-origin fonts)。

(7) 和