跨域的应对之道

评价：CORS
浏览器兼容性：IE8以下支持不佳 Cookie：无效 问题：不能带Cookie 使用场景：无需登录的API
解决方案：CORS+
原理 W3C更新的标准 Access-Control-Allow-Credentials:true Access-Control-Allow-Origin:域名
解决方案
关键操作只接受POST请求
验证码
检测请求Header中的Referer
随机Token
其它过气的方案
Flash iFrame
我们现在的方案
没有一个方案最完美 最完美的方案是不跨域 nginx支持按URL正则进行不同的配置
location ^~ /api/{ proxy_pass http://10.44.101.140:3000/;
}
la.livechart.cn/api/test/123 -> http://10.44.101.140:3000/test/123
评价：JSONP
浏览器兼容性：完美 Cookie：支持
仅指API域名下的Cookie能正常传递，你永远无法跨域获取Cookie
问题：不支持POST，全局污染 使用场景：无需POST的场景
解决方案：CORS
原理 W3C新标准 响应的头中只要包含 Access-Control-Allow-Origin: 域名1,域名2 浏览器对这些域名就不会限制跨域 还可以使用通配符 * 实现 Server或nginx加Header
共享登录态
Session存Cookie（加密），挂在livechart.cn的根域名下 2个加密字段：userId，userIdMd5
用于其它后台服务解析登录态，前台无法解析 1个公开字段：userName
只影响前台显示，不影响任何后台逻辑
安全问题：CSRF攻击
script, img标签都没有跨域限制，而且可以带Cookie <img src="http://api.livechart.cn/delAllCharts" />
跨域的应对之道
王忠阳
什么ห้องสมุดไป่ตู้跨域？
浏览器端请求不同域名的资源 浏览器端
只是浏览器的安全限制策略，CURL无此问题
不同域名 子域名也算，端口不同也算 注意：Cookie只区分域名，不区分端口！
问题的由来？
AJAX 前后端分离
注：A.COM 往 B.COM提交表单，不算跨域
解决方案：JSONP
原理 HTML中的<script>标签可以跨域加载，加载完成后立即执行。 <script src=“XXXX/XXXX.js”></script> 实现 准备一个全局Function，比如callback123() 动态增加一个<script src=“API地址?callback=callback123"></script> 返回的内容：callback123( {DATA…} )
这种情况不能使用通配符，且只能配一个域名（可通过nginx $http_origin解决）
实现
Server或nginx加Header
前端XMLHttpRequest设置withCredentials=true
评价：CORS+
浏览器兼容性：IE11以下支持不佳 Cookie：支持 问题：浏览器兼容性差 使用场景：对浏览器兼容要求不高的场景