跨域的产生是web安全的范畴,是浏览器安全里同源策略的部分,所谓同源策略,是指协议相同、 域名相同、端口相同,同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。1995年,同源政策由 Netscape 公司引入浏览器。
在这个策略下,web浏览器允许第一个页面的脚本访问第二个页面里的数据,但是也只有在两个页面有相同的源时。源是由URI,主机名,端口号组合而成的。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。
同源策略的交互图如下,主要是Origin的问题,所说的同源就是这个意思
防范的起因:
有这种限制的主要原因就是如果没有同源策略将导致安全风险。假设用户在访问银行网站,并且没有登出。然后他又去了任意的其他网站,刚好这个网站有恶意的js代码,在后台请求银行网站的信息。因为用户目前仍然是银行站点的登陆状态,那么恶意代码就可以在银行站点做任意事情。例如,获取你的最近交易记录,创建一个新的交易等等。因为浏览器可以发送接收银行站点的session cookies,在银行站点域上。访问恶意站点的用户希望他访问的站点没有权限访问银行站点的cookie。当然确实是这样的,js不能直接获取银行站点的session cookie,但是他仍然可以向银行站点发送接收附带银行站点session cookie的请求,本质上就像一个正常用户访问银行站点一样。关于发送的新交易,甚至银行站点的CSRF(跨站请求伪造)防护都无能无力,因为脚本可以轻易的实现正常用户一样的行为。所以如果你需要session或者需要登陆时,所有网站都面临这个问题。如果上例中的银行站点只提供公开数据,你就不能触发任意东西,这样的就不会有危险了,这些就是同源策略防护的。当然,如果两个站点是同一个组织的或者彼此互相信任,那么就没有这种危险了。
主要解决的途径:
jsonp(是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问)
H5为了解决这个问题,引入了一个全新的API, 跨文档通信 API,这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。
服务端设置header头信息(* 可以指定域名访问权限)
希望对你有帮助,哪怕是一点,就好。
领取专属 10元无门槛券
私享最新 技术干货