跨域问题及解决方案

1. 什么是跨域

  • 跨域带来的风险?

    • 跨域请求和Ajax技术都会极大地提高页面的体验,但同时也会带来安全的隐患,其中最主要的隐患来自于CSRF(Cross-site request forgery)跨站请求伪造。

    • csrf攻击的大致原理

      假如一家银行用以运行转账操作的URL地址如下:http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName

      那么,一个恶意攻击者可以在另一个网站上放置一张不可描述的图片引诱你点击,点击图片后向"http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman"发送请求

      如果有账户名为Alice的用户访问了恶意站点,而她之前刚访问过银行不久,登录信息尚未过期,那么她就会损失1000资金。

  • 跨域是指我们访问一个网站,如:http://127.0.0.1:8000这个url,从这个页面中又去访问http://127.0.0.1:9000这个url,这个时候就引发了跨域,当域名、端口、二级域名不同都会引发跨域。 此时9000端口的服务端可以接收到请求,也会给浏览器响应数据,但是到达浏览器后就被拦截了,因为浏览器的同源策略。

    URL 结果 原因
    http://www.cnblogs.com/liuweida 成功 域名、协议、端口相同
    https://www.cnblogs.com/liuweida 失败 协议不同
    http://www.cnblogs.com:8888/liuweida 失败 端口不同
    http://www.cnblogs.cn/liuweida 失败 域名不同

2. 什么是同源策略?

  • 同源策略是一种约定,它是浏览器最核心也会是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。它约定请求的url地址,必须与浏览器的url地址处于同域上,也就是域名,端口,协议都相同。如果不同,就会报错:

  • 实际上的结果是,请求已经被发送过去了,目标服务器也对请求做出了响应,只是浏览器对非同源请求的返回结果做了拦截。

一些内嵌资源不受限制

如:

  • 标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。
  • 标签嵌入CSS。
  • 嵌入图片。
  • 嵌入多媒体资源。
  • , 的插件。
  • @font-face 引入的字体。一些浏览器允许跨域字体( cross-origin fonts),一些需要同源字体(same-origin fonts)。