跨域知识梳理

SwordFly 发布于2019-08-22 10:54 / 2921人阅读

摘要：摘自阮一峰博客延伸阅读不涉及跨域跨源资源分享为标准兼容性参考优点提供安全的跨域数据传输，且不限于请求。跨域资源共享阿里云技术文档跨域资源共享详解阮一峰

参考：
维基百科 - Root domain
https://en.wikipedia.org/wiki...
浏览器同源政策及其规避方法 - 阮一峰
http://www.ruanyifeng.com/blo...
window.name 跨域实现原理及实例
http://blog.csdn.net/qq_34099...
html5 postMessage 官方API
https://developer.mozilla.org...
JSONP（直接跳到JSONP那段）
http://kb.cnblogs.com/page/13...
跨域资源共享 CORS 详解 - 阮一峰
http://www.ruanyifeng.com/blo...
跨域资源共享（CORS） - 阿里云技术文档
https://www.alibabacloud.com/...

1 基本概念 1.1 域&域名

域 domian : . 根域、.org 顶级域(一级域)、.baidu.com 二级域
域名 domain name : baidu.com 顶级域名(一级域名)、www.baidu.com 二级域名

1.2 同源策略&跨域

同源条件：协议相同、域名相同、端口相同，不满足即为跨域
同源目的：浏览器同源策略，保证用户信息的安全，防止恶意的网站窃取数据

1.3 限制范围

很多文章中介绍，跨域会对以下3种行为进行限制：

1）cookie、localStorage、indexedDB
2）dom
3）ajax 请求
我理解按如下分类更为合理：
1）cookie
2）iframe/window.open ( localStorage、indexedDB、dom )
3）ajax 请求

cookie 身份授权多带带一类

localStorage、indexedDB、dom 跨域受限，一般发生在 iframe 或 window.open 的跨域需求时，无法获取新页面的 window 对象，自然无法访问 window.localStorage、window.indexedDB、document.getElementById

ajax 请求多带带一类。

2 实现跨域 2.1 document.domain

浏览器允许通过设置 document.domain 来实现跨子域
如有 a.example.com 和 b.example.com 2个二级域名，设置 document.domain=example.com 或 Set-Cookie:key=value;domain=example.com;path=/ 可实现2个二级域之间的跨域
可解决 cookie、iframe、window.open、ajax 的跨域问题

2.2 URL #hash + hashChange事件监听

可解决 iframe 的跨域问题
不推荐，如 angular.ui.router 前端路由组件会使用到 URL #hash 字段。

2.3 window.name

可解决 iframe 的跨域问题
window.name 的变化如何监听是一个问题，大约可以存储2M的内容

2.4 html5 postMessage + message事件监听

可解决 iframe & window.open 的跨域问题
语法：otherWindow.postMessage(message, targetOrigin, [transfer]);
官方API参考

2.5 ajax - JSONP

参考：http://kb.cnblogs.com/page/13...

实现原理：web页面上调用js文件时不受同源策略影响，拥有src属性的标签都拥有跨域的能力，比如
服务端实现

客户端将 http 跨域查询参数 flightNumber 与回调函数 flightHandler 传递给服务器，服务器处理完后动态生成 test.js 返回，浏览器加载 test.js 完成后执行 flightHandler，完成跨域请求。
在实际编码时，客户端可使用如 jQuery 封装好的 JSONP API。

2.6 ajax - websocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。摘自阮一峰博客
WebSocket 延伸阅读（不涉及跨域）

2.7 ajax - CORS

CORS 跨源资源分享（Cross-Origin Resource Sharing）为 W3C 标准（兼容性参考）
优点：提供安全的跨域数据传输，且不限于 GET 请求。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
跨域资源共享（CORS） - 阿里云技术文档
跨域资源共享CORS详解 - 阮一峰

云服务器 GPU云服务器梳理多云管理平台调研,流程梳理端跨域跨域

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91434.html

javasscript - 收藏集 - 掘金

摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

Rango 2019-08-20 17:15 评论0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同学去面试，做了两道面试题全部做错了，发过来给道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。排序算法 -- JavaScript 标准参考教程（alpha） - 前端 - 掘金来自《JavaScript 标准参考教程（alpha）》，by 阮一峰目录冒泡排序简介算法实现选择排序简介算法实现 ... 图例详解那道 setTimeout 与循环闭包的经典面...

enali 2019-08-20 16:36 评论0 收藏0
从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

摘要：前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目。前言见解有限，如有描述不当之处，请帮忙指出，如有错误，会及时修正。为什么要梳理这篇文章？最近恰好被问到这方面的问题，尝试整理后发现，这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目...

kel 2019-08-22 15:18 评论0 收藏0
前端开发收集 - 收藏集 - 掘金

摘要：责编现代化的方式开发一个图片上传工具前端掘金对于图片上传，大家一定不陌生。之深入事件机制前端掘金事件绑定的方式原生的事件绑定方式有几种想必有很多朋友说种目前，在本人目前的研究中，只有两种半两种半还有半种的且听我道来。 Ajax 与数据传输 - 前端 - 掘金背景在没有ajax之前，前端与后台传数据都是靠表单传输，使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面，用...

ygyooo 2019-08-20 17:15 评论0 收藏0