03-同源限制

nobility 发布于 2023-05-19 07-AJAX 2121 次阅读


同源限制

目的是为了保证用户信息的安全,网页A的设置的Cookie、LocalStorage和IndexedDB,网页B不能打开,发送的AJAX请求浏览器也拒绝响应,除非两个网页同源,同源是指:协议、域名和端口都相同

避免同源限制方法

客户端:设置两个页面的document.domain属性为同一个域名,浏览器是通过该属性来判断是否同源的

服务端:在设置Cookie时,使得Cookie的属性中domain值为相同或子域名可访问

iframe多窗口通信

在一个网页中嵌入另一个网页时(也适用于window.open()方法打开的窗口对象),每个网页都会有一个window对象,若两个窗口不是同源,就无法使用另一个窗口的DOM对象

同样可以使用document.domain属性设置为同一个域来避免同源限制

通信方案

基于hash通信:URL中的hash部分发生变化页面是不会刷新的,父子窗口都可以拿到彼此的window对象,然后在再修改location.hash就可以传递消息,父子窗口通过window,onhashchange来绑定hashchange事件的监听函数,监听函数中通过location.hash拿到传递的消息后,就可以做一系列操作

H5新增的方法:window.postMessage(message,URL),通过向指定URL的窗口(若设置为*,表示所有窗口)发送消息,无论这两个窗口是否同源,接收方若需要使用window.onmessage绑定message事件的监听函数,该监听函数的事件对象共有三个属性:source=发送消息的窗口对象、origin=发送的目标URL也就是发送方设置的URL、data发送的消息内容

加油啊!即便没有转生到异世界,也要拿出真本事!!!\(`Δ’)/
最后更新于 2023-05-19