2018年1月

PHP设置允许AJAX跨域请求

1. 跨域请求

跨源资源共享(CORS)是一种机制,它使用额外的HTTP标头,让用户代理获得访问来自不同来源(域)的服务器上选定资源的权限,而不是使用当前正在使用的站点。用户代理在请求来自与当前文档不同的域,协议或端口的资源时发出 跨源HTTP请求

以下内容 引用自 什么是JS跨域访问? - 黄家兴的回答 - 知乎 https://www.zhihu.com/question/26376773/answer/244453931 ,有删改

1-2. 浏览器的同源策略会导致跨域,这里同源策略又分为以下两种

  1. DOM 同源策略:禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况,不同域名的 iframe 是限制互相访问的。
  2. XmlHttpRequest 同源策略:禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

1-3. 为什么要有跨域限制

1-3-1. AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略,相当危险,我们发起的每一次HTTP请求都会带上请求地址对应的cookie,那么可以做如下攻击:

  1. 用户登录了自己的银行页面 http://mybank.com,http://mybank.com 向用户的cookie中添加用户标识。
  2. 用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
  3. http://evil.comhttp://mybank.com 发起AJAX HTTP请求,请求会默认把 http://mybank.com 对应cookie也同时发送过去。
  4. 银行页面从发送的 cookie 中提取用户标识,验证用户无误,response 中返回请求数据。此时数据就泄露了。
  5. 而且由于Ajax在后台执行,用户无法感知这一过程。

1-3-2. DOM同源策略也一样,如果iframe之间可以跨域访问,可以这样攻击:

  1. 做一个假网站,里面用iframe嵌套一个银行网站 http://mybank.com
  2. 把iframe宽高啥的调整到页面全部,这样用户进来除了域名,别的部分和银行的网站没有任何差别。
  3. 这时如果用户输入账号密码,我们的主网站可以跨域访问到http://mybank.com的dom节点,就可以拿到用户的输入了,那么就完成了一次攻击。

所以说有了跨域跨域限制之后,我们才能更安全的上网了。

2. 允许跨域

2-1. 在服务端设置 header 头允许跨域

<?php
//1. 允许 https://nowtime.cc 发起的跨域请求
header("Access-Control-Allow-Origin: https://nowtime.cc"); 

//2. 如果需要设置允许所有域名发起的跨域请求,可以使用通配符 `*`
//这样做虽然很方便,但在一些场景会出现一些安全问题,建议使用上面那种方法,并加上一些业务逻辑,例如判断 Request Headers 中的 Origin
header("Access-Control-Allow-Origin: *");