cookie和localstorage在iframe中的应用

最新推荐文章于 2025-06-06 14:10:56 发布
最新推荐文章于 2025-06-06 14:10:56 发布
阅读量4.8k 收藏 10
点赞数 4
CC 4.0 BY-SA版权
文章标签： 前端
版权声明：本文为博主原创文章，遵循 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 1511
1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
iframe嵌入页面之Cookies存取
热门推荐
song279811799的博客
04-10 2万+
iframe无法读取cookie
Cookie 跨域解决方案（IFrame跨域）
专注基础架构领域
05-25 6343
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 6627
在开发的过程中遇到需要在 iframe 页面中获取父级页面系统所存储的本地数据的需求。由于浏览器的安全策略，是不允许 iframe 页面直接获取系统的存储数据的，那么要如何解决呢？
在iframe中嵌套其他网页项目后被嵌套的项目设置cookie无效
最新发布
诚实可靠小郎君的博客
06-06 558
1.同源策略，需要将两个项目都放在同一个域名下（同个域名的子域名也算），例如：A使用iframe嵌套B，A域名：https://www.ceshiyuming.a.com;B域名：https://www.ceshiyuming.b.com这个主要是必须是https并且要部署在生产环境，自己调试太麻烦2.在设置cookie的时候附加SameSite=none;
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 2122
浏览器提供的localStorage本地存储的最大空间是5M，如果不够用呢，这时候就需要考虑来给localStorage扩容。 思路如下： 在【A域】下引入【B域】，【A域】空间足够时，读写由【A域】来完成，数据存在【A域】下；当【A域】空间不够时，读写由【B域】来完成，数据存在【B域】下 【A域】空间不够需要在【B域】读写时，通过postMessage 向【B域】发送跨域消息，【B域】监听跨域...
IFrame中的Cookie问题
design1997的专栏
12-21 3882
问题描述: 在一个应用(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 1562
通过以上的代码我们就可以在我们新打开页面中的localStorage中查看到我们需要的token。这个方式我们可以实现我们在工作上出现的单点登录的问题，或者跨域传递信息的解决方案。下面的这个是http://localhost:8080里面的代码。下面的这个是http://localhost:8081里面的代码。在vue中也可以使用以上的方法进行实现。
iframe嵌套网站，不让网站使用localstorage等存数据
weixin_43817709的博客
11-11 2854
今天，接到个需求，要求用iframe嵌套网站，不让网站使用localstorage等存数据。百度了半天还是没有找到方法，只能去研究一下iframe，看看它有什么属性之类的可以解决。 果然，经过我又百度半天，了解到了iframe有个sandbox的属性可以进行配置，最终配置如下： <iframe sandbox="allow-scripts" src="baidu.com"></iframe> 这个配置sandbox=“allow-scripts” 是允许运行嵌套网站的js脚本。 这
iframe嵌入localstorage数据不共享解决方案
分享一些前端技巧
02-14 725
iframe嵌入localstorage数据不共享解决方案
hbuilder mui 在ios环境下 localstorage 子iframe获取不到localstorage值，或者退出APP后再打开APP值丢失。
HW1233456的专栏
12-27 2383
最近碰到了这种情况，说实话很苦恼，找了两三天，发现很简单的解决方式，就是把文件发布到服务端，访问服务端文件就好了。 可是是为什么呢？ 这要从我设置的子iframe的src值说起，地址大概是这样的：forder/test.html 这样就会引起ios不适，他会认为这个页面和他的父页面是跨域一样的存在。可是是为什么呢？ 应该是domain的关系，他会认为forder/test.html这个地址...
iframe嵌套在不同源的页面，储存的localstorage无法共享到与iframe同源的网页中
fooopppcccvvv的博客
12-24 1254
先生成一个不可见的iframe层，然后再iframe中设置localstorage，但是打开iframe的同源页面时，我发共享到localstorage，这个怎么解决？// 如果页面url包含消息发送的origin。
iframe+postMessage() 实现将token写入不同域下的localstorage中
02-24
<think>嗯，用户想了解如何使用iframe和postMessage()在不同域下的localStorage中写入token。这个问题我之前接触过，可能涉及到跨域通信的问题。首先，我需要回忆一下浏览器的同源策略，因为不同域的页面之间默认是不能互相访问的，比如localStorage受同源限制，不能直接操作其他域的存储。 那用户的需求是主站A需要将token写入到域B的localStorage中。这时候，常规的方法肯定行不通，所以想到用iframe和postMessage的组合。iframe可以嵌入另一个域的页面，而postMessage允许不同窗口之间进行安全的数据传递。 接下来，我应该分步骤来考虑。首先，主站A需要创建一个隐藏的iframe，指向域B的一个特定页面，比如一个专门用来接收token的页面。然后，主站A通过postMessage发送token给这个iframe。域B的页面监听message事件，接收到token后，将其存入自己的localStorage中。 不过需要注意安全性问题，比如在postMessage中要指定目标域为B，避免恶意网站拦截消息。同时，接收方也应该验证消息的来源域是否是预期的A域，防止恶意攻击。 可能的步骤是： 1. 主站A创建iframe，src指向域B的某个处理页面。 2. iframe加载完成后，主站A用postMessage发送token，目标origin设置为域B。 3. 域B的页面监听message事件，验证发送方的域是否是A，然后取出token存入localStorage。 但这里有个问题，iframe的加载可能需要时间，所以主站A需要在iframe的onload事件触发后再发送消息，否则可能发送失败。此外，如果域B的处理页面没有正确设置事件监听，或者权限问题，也可能导致失败。 另外，用户可能需要考虑浏览器兼容性，postMessage的支持情况，但现在主流浏览器应该都支持了。还有，localStorage的容量限制和是否被禁用的情况，不过这可能不是当前问题的重点。 总结下来，关键点在于跨域通信的安全性和正确的时机，确保消息在iframe加载完成后发送，接收方验证来源，安全存储token。可能需要编写示例代码来说明这个过程，比如主站A的代码和域B处理页面的代码结构。 同时，还要提醒用户注意安全风险，比如确保只有合法的域才能发送和接收消息，避免XSS攻击。另外，如果token非常敏感，可能需要其他安全措施，比如HTTPS，或者考虑其他存储方式如HttpOnly的Cookie，但用户的需求明确是localStorage，所以按照这个方向回答。</think>使用 `iframe` 结合 `postMessage()` 是实现跨域将数据（如 `token`）写入不同域下的 `localStorage` 的常见方案，核心思路是通过跨域通信将数据传递给目标域，再由目标域自行写入自己的存储。以下是具体实现步骤和注意事项： --- ### **实现原理** 1. **主页面（域A）**：通过 `<iframe>` 嵌入一个属于**目标域B**的页面。 2. **跨域通信**：主页面使用 `postMessage()` 向 `iframe` 发送 `token` 数据。 3. **目标页面（域B）**：监听 `message` 事件，接收数据并写入自己的 `localStorage`。 --- ### **代码示例** #### 1. 主页面（域A）的代码 ```html <!-- 主页面属于域A（http://domain-a.com） --> <iframe id="targetIframe" src="http://domain-b.com/token-receiver.html" style="display: none;"></iframe> <script> const iframe = document.getElementById('targetIframe'); iframe.onload = function() { // 发送 token 到目标域B的 iframe const token = "your_token_value"; iframe.contentWindow.postMessage( { action: 'SET_TOKEN', token: token }, 'http://domain-b.com' // 指定目标域，确保安全 ); }; </script> ``` #### 2. 目标页面（域B）的代码 ```html <!-- 目标页面属于域B（http://domain-b.com/token-receiver.html） --> <script> // 监听来自父窗口的消息 window.addEventListener('message', (event) => { // 验证消息来源是否合法（必须检查来源域！） if (event.origin !== 'http://domain-a.com') return; const { action, token } = event.data; if (action === 'SET_TOKEN' && token) { // 将 token 写入当前域（域B）的 localStorage localStorage.setItem('authToken', token); // 可选：发送确认回执 event.source.postMessage('TOKEN_SAVED', event.origin); } }); </script> ``` --- ### **关键注意事项** 1. **安全性验证**： - **发送方**：`postMessage` 的第二个参数必须指定目标域（`http://domain-b.com`），避免发送到恶意网站。 - **接收方**：必须检查 `event.origin` 是否合法（如 `http://domain-a.com`），防止非法域发送恶意数据。 2. **跨域限制**： - `iframe` 的 `src` 必须属于另一个域（如域B），且目标页面需要允许被嵌入（未设置 `X-Frame-Options` 头）。 3. **异步通信**： - 确保 `iframe` 加载完成后再调用 `postMessage`（通过 `iframe.onload` 事件）。 4. **浏览器兼容性**： - `postMessage` 和 `localStorage` 在现代浏览器中广泛支持，但需考虑旧版本浏览器的降级方案。 --- ### **替代方案** - **服务端代理写入**：通过域A的服务端请求域B的接口，由域B的服务端生成 Token 并写入 Cookie/LocalStorage（需跨域头支持）。 - **第三方 Cookie**：浏览器逐渐限制第三方 Cookie，不推荐此方案。 --- ### **总结** 通过 `iframe + postMessage()` 实现跨域写入 `localStorage` 的核心是安全的跨域通信，需严格验证来源域并确保数据合法性。此方法适用于需要在前端直接操作不同域存储的场景，但需注意浏览器安全策略的更新（如 Chrome 的隐私沙盒计划可能影响跨域访问）。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值