跨域与常用方案

2018-03-19 本文已影响0人 744354889606

本文源自一次内部关于跨域的讨论分享的总结

理解跨域的重点在于：了解跨域产生的场景、原理

跨域问题只在浏览器客户端环境下出现，是由于浏览器出于安全考虑设置的同源策略引起，所以解决跨域问题一般采用的思路有两种：
a. 绕过浏览器的同源策略约束
b. 遵循新的跨域规范

浏览器同源策略

同源策略：不同域的客户端在没明确授权的情况下，不能读写对方的资源
同域：协议、域名、端口号均相同
比如：

http://abc.com  vs  https://abc.com
http://ab.abc.com  vs  http://a.abc.com 
127.0.0.1:3000  vs  127.0.0.1:4000

哪些行为会受到浏览器同源策略的约束呢？

ajax请求 XMLHttpRequest
注意：浏览器并不会限制跨域请求的发出，即服务端再未做其他限制的情况下仍可收到跨域请求，浏览器只是限制了ajax请求返回信息的读取、cookie写入等操作
扩展：服务端如何限制仅接收指定域名请求? refer?
fetch
非同域窗体之间（比如iframe引入的情况的父子窗体）不能直接进行数据通讯或共享
Web 字体 (CSS 中通过 @font-face 使用跨域字体资源)
WebGL 贴图
使用 drawImage 将 Images/video 画面绘制到 canvas
等等

哪些标签可以加载非同源资源？
script img link iframe
跨域方案的思路a也就是基于以上几种标签

json with padding

基本原理：利用script标签的src属性允许加载非同源资源，加载后js解析器将执行资源代码，目标服务器在数据外层包裹一个客户端已经定义好的函数并返回

服务端接口返回一段可执行js脚本
"hello browser" => callback("hello browser")

jsonp前后端交互流程

首先在浏览器端注册一个全局函数callback。
浏览器端创建一个script标签，将src指向目标服务端资源地址，并带上callback参数，告诉服务端回调函数名称，将此script标签插入到Dom中。
服务器生成返回json数据，获取请求中的callback函数名参数，再将json数据以参数填充的方式，和函数名参数拼接：callback+’(‘+json+’)’，最后将拼接完成的数据返回。
浏览器端，解析script标签，并执行返回的javascript 文档，此时数据作为参数，传入到了客户端预先定义好的callback 函数里（动态执行回调函数）。

优：

兼容性极佳，在不支持XMLHttpRequest的浏览器中也可以用于模拟异步请求
缺：
只允许get请求: jsonp跨域原理是通过script标签加载跨域资源，不可能支持post请求
存在一定安全隐患: 本质上来说，jsonp是一种脚本注入(Script Injection)行为
需要服务端配合支持：如果一个接口同时需要适配jsonp和正常请求，需要特殊处理没有错误处理支持
如果动态脚本插入有效，就执行调用；如果无效，就静默失败：不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。（自行设置定时器，超时后没有进入回调即判定为请求失败）