什么是同源策略 同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
什么是同源 同源是指相同的协议、域名、端口,三者都相同才属于同域。不符合上述定义的请求,则称为跨域。
(URL由协议、域名、端口和路径组成)
- 浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。从一个域上加载的脚本不允许访问另外一个域的文档属性。
- 在浏览器中,
在页面http://laixiangran.cn/b.html
中也设置 document.domain,而且这也是必须的,虽然这个文档的 domain 就是laixiangran.cn
,但是还是必须显式地设置 document.domain 的值:
这样,http://www.laixiangran.cn/a.html
就可以通过 js 访问到http://laixiangran.cn/b.html
中的各种属性和对象了。
window.name跨域 window 对象有个 name 属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面(不管是相同域的页面还是不同域的页面)都是共享一个window.name
的,每个页面对window.name
都有读写的权限,window.name
是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。
通过下面的例子介绍如何通过window.name
来跨域获取数据的。
页面http://www.laixiangran.cn/a.html
的代码:
页面http://laixiangran.cn/b.html
的代码:
location.hash 跨域 location.hash 方式跨域,是子框架具有修改父框架 src 的 hash 值,通过这个属性进行传递数据,且更改 hash 值,页面不会刷新。但是传递的数据的字节数是有限的。
页面http://www.laixiangran.cn/a.html
的代码:
页面http://laixiangran.cn/b.html
的代码:
postMessage 跨域 window.postMessage(message,targetOrigin) 方法是 HTML5 新引进的特性,可以使用它来向其它的 window 对象发送消息,无论这个 window 对象是属于同源或不同源。这个应该就是以后解决 dom 跨域通用方法了。
调用 postMessage 方法的 window 对象是指要接收消息的那一个 window 对象,该方法的第一个参数 message 为要发送的消息,类型只能为字符串;第二个参数 targetOrigin 用来限定接收消息的那个 window 对象所在的域,如果不想限定域,可以使用通配符 *。
需要接收消息的 window 对象,可是通过监听自身的 message 事件来获取传过来的消息,消息内容储存在该事件对象的 data 属性中。
页面http://www.laixiangran.cn/a.html
的代码:
【React|同源策略限制及跨域问题的解决方法】页面http://laixiangran.cn/b.html
的代码:
推荐阅读
- 极客日报|小米首款汽车预计2024年量产;英伟达发布首款基于Hopper架构GPU;Java 18正式发布|极客头条
- React高级|React 之 简易实现 Fiber架构
- React高级|一文让你不再困惑setState之getState(上)
- 笔记|手机也有生产力,手把手教你用手机开发APP
- react|react中this指向的问题
- react|React hook useEffect 与 计时器 setInterval
- 极客日报|滴滴6月或发布造车计划;英特尔顶级专家Mike Burrows跳槽AMD;Android 13开发者预览版2发布|极客头条
- react|react 递归遍历四层树结构 遍历分支中的最后一个节点_图解(数据结构中的 6 种树,你心中有数吗(...))
- react|react-transition-group的使用方法