cookie和localstorage在iframe中的应用

最新推荐文章于 2025-04-10 17:55:30 发布
最新推荐文章于 2025-04-10 17:55:30 发布
阅读量4.7k 收藏 10
点赞数 4
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010895423/article/details/129185795
版权
文章讨论了一个用户中心系统中使用iframe集成不同项目页面的问题。由于多个项目共享同一token，最初使用localstorage存储，但发现关闭浏览器后仍能访问，不符合需求。改为使用cookie解决，但在父子页面域名不一致时遇到跨域限制，导致设置cookie失败。当域名或端口号一致时，cookie设置则不受影响。文章探讨了iframe下的跨域安全策略和cookie应用限制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

背景： 现有项目中有一个用户中心系统，里面用iframe嵌入不同项目的页面，多个项目公用一个token

解决方案： 子页面通过url参数的方式传递token， 在url拿到token之后，刚开始将token存入localstorage中，但localstorage是永久保存，在浏览器关掉之后，再重新打开页面，只要token没有过期，页面依旧可以正常打开，这样是不符合需求的。后来将子页面的token存入cookie中来解决这个问题。

当父子页面域名不一致时，例如：父页面为localhost， 子页面为服务器的一个IP， 当把url传递的token存在localstorage时，页面访问正常，未报任何关于跨域的错误，但当把url传递的token存在cookie时，页面无法访问，报错 Unsafe attempt to initiatenavigation for frame with origin 'xxxx' from frame with URL 'xxxxxxx'. The frame attemptingnavigation is targeting its top-level window, but is neither same-origin withits target nor has it received a user gesture. See https://www.chromestatus.com/feature/5851021045661696.

当通过hosts文件将本地IP映射到域名进行测试时

发现父子页面的一级域名一致时，例如，父页面为xx.test.com，子页面为xxxx.test.com， 当把url传递的token存在cookie时，页面访问正常

所以当iframe的父子页面域名不一致时，由于跨域导致set cookie不成功

当iframe的父子页面IP一致，端口号不一致时，在set cookie会同时set 到父子页面

当iframe的父子页面一级域名一致时，在set cookie会同时set 到父子页面

Jean_mo
关注
cookie、sessionStorage和localStorage的区别（详细）
微微的猪食小窝
11-13 1446
1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
iframe嵌入页面之Cookies存取
热门推荐
song279811799的博客
04-10 2万+
iframe无法读取cookie
Cookie 跨域解决方案（IFrame跨域）
专注基础架构领域
05-25 6305
IFrame跨域思路：假设有a.haorooms.com/text.html和b.haorooms.com/text.html两个页面，通过a.haorooms.com/text.html页面去修改b.haorooms.com/text.html页面的本地数据： ①　在a.haorooms.com/text.html页面创建一个iframe，嵌入b.haorooms.com/text.html页面。 ②　a.haorooms.com/text.html页面通过postMessage传递指定格式的消息给
iframe 页面中获取父级页面的 localStorage 或者 sessionStorage数据
jiangjunyuan168的博客
01-24 6244
在开发的过程中遇到需要在 iframe 页面中获取父级页面系统所存储的本地数据的需求。由于浏览器的安全策略，是不允许 iframe 页面直接获取系统的存储数据的，那么要如何解决呢？
解决iframe内嵌第三方导致跨域cookie无法携带问题
最新发布
xiongjin8949的博客
04-10 637
springboot+vue使用iframe内嵌导致cookie无效
iframe-localstorage
06-09
iframe-localStorage 实际上不可能从嵌套在不同域中的 iframe 元素中的页面使用功能（考虑到父框架域）。 为了解决这个限制，我编写了这个简单的库，它使用功能也可以在跨域框架中使用 localStorage。 为了使用它，在父窗口中包含 parent.js 文件和在嵌套窗口中包含 iframe.js 文件就足够了。 iframe.js 文件覆盖 localtStorage setItem 、 getItem和removeItem方法，并提供延迟接口等待结果。 代码示例 在嵌套页面中包含 iframe.js 后，您可以将 localStorage 方法与经典接口一起使用。 localStorage . setItem ( 'test' , 5 ) ; localStorage . getItem ( 'test' ) . done ( function
使用iframe给页面的localStorage扩容
weixin_30300225的博客
01-31 2116
浏览器提供的localStorage本地存储的最大空间是5M，如果不够用呢，这时候就需要考虑来给localStorage扩容。 思路如下： 在【A域】下引入【B域】，【A域】空间足够时，读写由【A域】来完成，数据存在【A域】下；当【A域】空间不够时，读写由【B域】来完成，数据存在【B域】下 【A域】空间不够需要在【B域】读写时，通过postMessage 向【B域】发送跨域消息，【B域】监听跨域...
IFrame中的Cookie问题
design1997的专栏
12-21 3859
问题描述: 在一个应用(domain: A)的某个page中, 通过IFrame的方式嵌入另一个应用(domain: B)的某个页面. 当两个应用的domain 不一样时, 在被嵌入的页面中不允许使用cookie(即使用cookie实现的session会失效). 问题分析: 在XP SP2和IE6之后，从安全性角度考虑，默认状态下不允许在iframe里使用跨站点cookie...
深入浅出iframe（+ iframe嵌套第三方页面跨域带cookie问题）
qq_45859670的博客
08-30 1万+
iframe标签规定一个内联框架。内联框架就是在一个页面中嵌入另一个页面。由于iframe可能在某些方面不符合标准网页设计的理念，已经被HTMLl5抛弃，目前的HTML5不再支持它了。
safari,opera嵌入iframe页面cookie读取问题解决方法
09-05
4. **使用`localStorage`或`sessionStorage`**：在支持这些API的浏览器中，可以使用`localStorage`或`sessionStorage`代替cookie进行数据存储。这些本地存储方法不受同源策略的约束，但请注意它们的存储量有限，且不...
如何使用localstorage代替cookie实现跨域共享数据问题
01-19
一，背景   因为网站系统的日益庞大，不同域名业务，甚至不同合作方网站的cookie可能或多或少需要进行共享使用，遇到这个情况的时候，大家...背景中说过我们使用localstorage来代替cookie，本身localstorage和cookie
Iframe+Cookie实现简单的单点登录
03-14
演示DEMO 博文链接：https://xiaoa7.iteye.com/blog/312295
CrossDomainStorage:具有API的跨域存储解决方案，可通过iframe存储数据。 在除Safari之外的所有浏览器上使用本地存储。 由于默认选项“来自第三方和广告商”，因此在Safari上使用Cookie。
05-24
跨域存储 具有API的跨域存储解决方案，可通过iframe存储数据。 在除Safari之外的所有浏览器上使用本地存储。 由于默认选项“来自第三方和广告商”，因此在Safari上使用Cookie。 基本用法 首先，创建一个带有url的通道以保存数据。 CrossDomainStorage .newChannel('storage', 'http://localhost:8001/storage.html') .save('sampleKey', 'sampleData'); 对于您在上面指定的url，创建一个接收数据的通道。 CrossDomainStorage .newChannle('parent'); 原料药 CrossDomainStorage.newChannel(channelName, [url]) 创建一个带有名称的频道。 如果传递了网址，则会创建一个通道，该通道
iframe 跨域之间共享localStorage,sessionStorage
m0_65730686的博客
09-02 1万+
iframe 跨域之间共享localStorage,sessionStorage
简单通过iframe+postMessage+localstorage实现跨域通信存储
sassssiii的博客
03-28 1511
通过以上的代码我们就可以在我们新打开页面中的localStorage中查看到我们需要的token。这个方式我们可以实现我们在工作上出现的单点登录的问题，或者跨域传递信息的解决方案。下面的这个是http://localhost:8080里面的代码。下面的这个是http://localhost:8081里面的代码。在vue中也可以使用以上的方法进行实现。
iframe嵌套网站，不让网站使用localstorage等存数据
weixin_43817709的博客
11-11 2832
今天，接到个需求，要求用iframe嵌套网站，不让网站使用localstorage等存数据。百度了半天还是没有找到方法，只能去研究一下iframe，看看它有什么属性之类的可以解决。 果然，经过我又百度半天，了解到了iframe有个sandbox的属性可以进行配置，最终配置如下： <iframe sandbox="allow-scripts" src="baidu.com"></iframe> 这个配置sandbox=“allow-scripts” 是允许运行嵌套网站的js脚本。 这
iframe嵌入localstorage数据不共享解决方案
分享一些前端技巧
02-14 497
iframe嵌入localstorage数据不共享解决方案
hbuilder mui 在ios环境下 localstorage 子iframe获取不到localstorage值，或者退出APP后再打开APP值丢失。
HW1233456的专栏
12-27 2354
最近碰到了这种情况，说实话很苦恼，找了两三天，发现很简单的解决方式，就是把文件发布到服务端，访问服务端文件就好了。 可是是为什么呢？ 这要从我设置的子iframe的src值说起，地址大概是这样的：forder/test.html 这样就会引起ios不适，他会认为这个页面和他的父页面是跨域一样的存在。可是是为什么呢？ 应该是domain的关系，他会认为forder/test.html这个地址...
iframe嵌套在不同源的页面，储存的localstorage无法共享到与iframe同源的网页中
fooopppcccvvv的博客
12-24 1172
先生成一个不可见的iframe层，然后再iframe中设置localstorage，但是打开iframe的同源页面时，我发共享到localstorage，这个怎么解决？// 如果页面url包含消息发送的origin。
js中localstorage存入本地报错
03-16
### JavaScript 中 `localStorage` 报错的解决方案 在 JavaScript 开发中，当尝试使用 `localStorage` 时可能会遇到各种错误。这些错误通常源于以下几个原因： #### 原因分析 1. **环境问题**: 如果代码运行在无浏览器环境中（如 Node.js 或服务端渲染），则无法访问 `window.localStorage` 对象[^4]。 2. **跨域限制**: 当前页面被加载到 iframe 中，并且该 iframe 的域名与父窗口不同，则可能由于安全策略而阻止对 `localStorage` 的访问[^5]。 3. **私有模式或禁用存储功能**: 用户设备上的某些设置可能导致 `localStorage` 被禁用，例如浏览器隐私模式下的行为差异[^1]。 --- #### 解决方案 ##### 方法一：检测并优雅降级 在调用 `localStorage` 之前先验证其是否存在以及是否可用： ```javascript if (typeof window !== 'undefined' && window.localStorage) { try { const testKey = '__test__'; window.localStorage.setItem(testKey, 'value'); window.localStorage.removeItem(testKey); console.log('Local Storage 可用'); } catch (error) { console.error('Local Storage 不可用:', error.message); } } else { console.warn('当前环境下未定义 Local Storage'); } ``` 此方法通过捕获异常来判断是否有权限操作 `localStorage`。 --- ##### 方法二：使用 Cookie 替代 如果目标平台不支持 `localStorage`，可以考虑改用 `Cookie` 来实现数据持久化。对于 Nuxt.js 等框架中的 SSR 场景尤为适用[^2]: ```javascript // 安装依赖库 npm install --save cookie-universal-nuxt // 配置 nuxt.config.js export default { modules: ['cookie-universal-nuxt'] } // 使用方式 this.$cookies.set('key', 'value'); // 设置值 const value = this.$cookies.get('key'); // 获取值 ``` 这种方法解决了服务端渲染过程中无法直接访问客户端特性的难题。 --- ##### 方法三：监听变化处理逻辑冲突 有时应用需要动态响应 `localStorage` 数据的变化，在 Vue.js 应用程序中可以通过组合计算属性和观察者完成这一需求[^3]: ```javascript computed: { lonlat() { return JSON.parse(localStorage.getItem('lonlat')) || {}; }, }, watch: { lonlat(newVal, oldVal) { if (newVal !== oldVal) { console.log('LonLat 已更新:', newVal); } }, }, created() { window.addEventListener('storage', () => { this.lonlat = JSON.parse(localStorage.getItem('lonlat')); }); } ``` 上述代码片段展示了如何利用事件机制同步多标签页间的状态变更通知。 --- ##### 方法四：适配鸿蒙系统特性 针对 HarmonyOS 平台开发的应用需要注意的是，默认情况下各 Ability 之间并不共享同一份本地储存空间。因此需显式创建实例传递给子组件： ```typescript import UIAbility from '@ohos.app.ability.UIAbility'; import window from '@ohos.window'; class EntryAbility extends UIAbility { private storage = new LocalStorage({ PropA: 47 }); onWindowStageCreate(windowStage: WindowStage): void { windowStage.loadContent('pages/Index', this.storage); } } ``` 这样能够确保所有模块都能正常读写统一的数据源。 --- ### 总结 以上四种途径分别对应不同的实际应用场景和技术栈特点，开发者应依据具体业务场景选取最合适的手段规避潜在风险。无论采取何种措施都务必做好兼容性和健壮性测试工作以保障用户体验一致性。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值