iframe嵌套网站，不让网站使用localstorage等存数据

最新推荐文章于 2024-02-02 00:00:00 发布
最新推荐文章于 2024-02-02 00:00:00 发布
阅读量2.6k 收藏
点赞数
分类专栏： iframe html 文章标签： html iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43817709/article/details/109625747
版权
本文介绍了如何在iframe中嵌套网站并阻止其使用localStorage等存储数据的方法。通过设置iframe的sandbox属性，可以对嵌入的内容施加额外的限制。例如，`sandbox="allow-scripts"` 允许运行JavaScript但阻止数据存储。详细讨论了sandbox属性的不同配置选项。
摘要由CSDN通过智能技术生成

今天，接到个需求，要求用iframe嵌套网站，不让网站使用localstorage等存数据。百度了半天还是没有找到方法，只能去研究一下iframe，看看它有什么属性之类的可以解决。

果然，经过我又百度半天，了解到了iframe有个sandbox的属性可以进行配置，最终配置如下：

<iframe sandbox="allow-scripts" src="baidu.com"></iframe>
最低0.47元/天 解锁文章
码上云端
关注
专栏目录
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,sessionStorage
m0_65730686的博客
09-02 9990
iframe 跨域之间共享localStorage,sessionStorage
懂得使用sandbox，限制iframe的权限，解决安全性问题
m0_57742384的博客
10-20 5326
懂得使用sandbox，限制iframe的权限，解决安全性问题
HTML ＜iframe＞ sandbox属性
没有简介
11-24 2510
沙箱属性的值将被简单地沙箱化(然后应用所有限制)，或者以空格分隔的预定义值列表将消除实际限制。支持的浏览器：下面列出了HTML video preload属性支持的浏览器。sandbox属性允许对iframe中的内容进行其他限制。
iframe 页面中获取父级页面的 localStorage 或者 sessionStorage数据
jiangjunyuan168的博客
01-24 4214
在开发的过程中遇到需要在 iframe 页面中获取父级页面系统所存储的本地数据的需求。由于浏览器的安全策略，是不允许 iframe 页面直接获取系统的存储数据的，那么要如何解决呢？
前端沙箱浅析
a736755244的博客
01-05 2441
前端沙箱的一些实现方式，部分参考网络资料和官方资料。本文为公司(joysuch)内部分享文章，转载注明出处(2023-1-5)。
JavaScript iframe数据共享接口实现方法
11-24
然而，由于浏览器的安全策略，iframe与主页面之间的通信并不直接，这就需要我们通过特定的方式来实现数据共享。本文将详细介绍一种基于`window.top`的JavaScript iframe数据共享接口实现方法。 首先，理解`window....
页面中iframe相互传值传参
10-29
这里，我们通过嵌套使用parent和frames属性，定位到了iframe内部的document对象，然后使用标准的DOM方法getElementById来获取特定元素，并通过value属性来读取该元素的值。这种方式在IE和Firefox中都是可行的，即使...
javascript iframe parent？
08-04
在实际项目中，我们可能需要处理更复杂的场景，如动态加载的iframe、多个iframe间的通信，甚至使用`window.name`或`window.localStorage`作为数据通道来绕过同源策略的限制。而"工具"标签可能意味着我们可以借助一些...
web前端iframe相互调用方法详解
09-13
综合以上内容，我们可以看到，通过parent/top对象的直接方法调用、通过子iframe的name/id属性进行间接调用，以及使用postMessage API和存储在本地/会话存储中的数据，这些都是实现iframe间相互调用的有效手段。...
cookie和localstorage在iframe中的应用
u010895423的博客
02-23 4276
cookie和localstorage在iframe中的应用
深入探究iframe：网页嵌入的魔法盒子（上）
你若盛开，清风自来
02-02 1522
iframe是一种HTML标签，用于在网页中嵌入另一个网页。iframe允许您在当前页面中嵌入另一个完全独立的网页，这两个网页之间可以进行交互，但它们具有独立的域名和会话。内容嵌入：iframe允许您将另一个网页嵌入到当前页面中，这可以用于在当前页面中显示广告、工具栏或其他内容。跨域交互：iframe允许您在两个不同的域名之间进行交互，这可以用于实现跨域登录、跨域数据传输等功能。页面缩放：iframe的方法可以用来调整嵌入的网页的大小。历史记录。
解决第三方使用iframe内嵌页面时无法正常登录访问的问题
热门推荐
qq_28013889的博客
11-22 1万+
主要解决了谷歌浏览器高版本浏览器88或以上,引用iframe内嵌页面,因为浏览器的安全策略存在跨域，无法使用cookie获取到token信息，导致页面加载不出来的问题
iframe标签的sandbox属性
我的博客
06-28 2095
sandbox 属性的值既可以是一个空字符串（应用所有的限制），也可以是空格分隔的预定义值列表（将移除特定的限制）。如果被规定为空字符串（sandbox=“”），sandbox 属性将会启用一系列对行内框架中内容的额外限制。iframe使用sandbox属性后，即使将所有值设为允许，页面中的flash也无法使用。允许弹出窗口（如window.open，target=“_blank”）。允许脚本执行，即允许iframe运行脚本（但不创建弹出窗口）。例如：此iframe只允许加载script，其他的全部限制。
简单通过iframe+postMessage+localstorage实现跨域通信存储
sassssiii的博客
03-28 1245
通过以上的代码我们就可以在我们新打开页面中的localStorage中查看到我们需要的token。这个方式我们可以实现我们在工作上出现的单点登录的问题，或者跨域传递信息的解决方案。下面的这个是http://localhost:8080里面的代码。下面的这个是http://localhost:8081里面的代码。在vue中也可以使用以上的方法进行实现。
iFrame的sandbox配置
m0_46660770的博客
08-01 1808
记录学习日常
Storage事件无法触发解决
jlin991的博客
02-20 6424
Web Storage 项目实践这段代码是从一个项目在摘出来的，主要实现了将一个图片利用canvas的toDataURL这个API转成BASE64编码的字符串(图片要先用drawImage画到canvas上)，然后存储到localStorage中。 因为图片数据量大，经常加载会耗费时间，所以可以利用客户端存储缓存起来。 这几个图片主要是图标ICON。/*Canvas transfer img to
面试宝典之前端技术
weixin_59196705的博客
05-02 980
1. 标签上 title 与 alt 属性的区别是什么？ alt 是给搜索引擎识别，在图像无法显示时的替代文本； title 是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图 片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。&和&&的区别。 2. DIV+CSS 布局较 table 有什么优势？
iframe缓存刷新问题
Black Lacus的博客
11-27 9035
页面中嵌入iframe出现了缓存，带来的页面刷新问题 工作中碰到的问题 包含iframe的页面，iframe中存在登陆验证的问题。当通过iframe已经完成了登陆，此时iframe对应的服务异常上下电又恢复了服务时，这时再刷新整个页面，即使用新的登陆验证信息依然无法验证通过。 通过对iframe里请求的分析发现，刷新后请求头依然使用的是之前的验证信息（token和session）。 一般的做法 ...
使用postMessage API和iframe嵌套，iframe的localStorage没有数据
最新发布
09-13
`postMessage` API是一种允许不同源之间进行安全通信的方式，它通过消息传递的方式来允许页面间的交互。在使用`postMessage`和`iframe`嵌套的场景中，如果遇到`iframe`的`localStorage`没有数据的情况，通常是因为以下几点： 1. 浏览器的同源策略限制：浏览器出于安全考虑，不同源之间的`iframe`默认情况下不能直接访问对方的`localStorage`。如果父页面和`iframe`页面不是同源的，它们之间互相无法访问对方的`localStorage`。同源指的是协议、域名和端口号都相同。 2. 数据存储的时机问题：如果`postMessage`用于传递数据，需要确保发送和接收消息的脚本正确执行，并且接收消息的脚本中应该有处理`localStorage`的逻辑，例如在接收到消息后，使用`localStorage.setItem`来存储数据。 3. 跨域策略未正确配置：如果父页面和`iframe`确实属于同源，但是`iframe`的`localStorage`仍然为空，可能是由于跨域资源共享（CORS）策略未被正确配置导致。确保服务器端发送了正确的CORS头部信息。 在使用`postMessage`进行跨域通信时，确保以下几点： - 发送消息的页面需要使用`postMessage`方法发送消息，并指定接收消息的域。 - 接收消息的页面需要在`window.addEventListener`监听`message`事件，以便接收并处理消息。 例如，父页面向`iframe`发送消息并希望`iframe`能够保存数据到`localStorage`的代码大致如下： 父页面代码： ```javascript var iframe = document.getElementById('my-iframe'); iframe.contentWindow.postMessage('some-data', 'http://example.com'); ``` `iframe`中的代码： ```javascript window.addEventListener('message', function(event) { if (event.origin !== 'http://parent-origin.com') { return; // 验证来源，确保消息是从预期的域发送过来的 } localStorage.setItem('data', event.data); // 保存数据到localStorage }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值