记录--五个有用的iframe踩坑问题,快收藏!

这篇具有很好参考价值的文章主要介绍了记录--五个有用的iframe踩坑问题,快收藏!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--五个有用的iframe踩坑问题,快收藏!

 

你不会还不知道iframe不能嵌入百度首页吧?为了丰富用户体验,我们常常会将其他网站的内容嵌入到自己的网页中。然而,随之而来的是一个常见的问题:Iframe 嵌入网站无法正常使用。你是否也曾遇到过这个困扰,不知道该如何解决呢?文将深入探讨 Iframe 嵌入时可能遇到的若干问题,并为您呈现解决方案。从同源策略、跨域机制到安全性措施,我们将为您解答所有疑问,助您轻松应对 IFrame 嵌入的挑战。让我们一同探索,解锁嵌入网站的可能性,为用户带来更流畅的浏览体验

无法嵌入百度页面 — X-Frame-Options响应限制

记录--五个有用的iframe踩坑问题,快收藏!

 

记录--五个有用的iframe踩坑问题,快收藏!

 

百度使用了 X-Frame-Options 响应头来限制其在 iframe 中的嵌套。X-Frame-Options 是一种安全策略,可以由网站的服务器设置,用于控制页面是否允许在 iframe 中嵌套。当网站设置了 X-Frame-Options 为 DENYSAMEORIGIN,浏览器将不允许将该页面在 iframe 中加载,以防止点击劫持等安全问题。

DENY: 禁止所有页面在 iframe 中嵌套,无论来源域名是什么。

SAMEORIGIN: 允许同源页面在 iframe 中嵌套,但禁止不同源的页面进行嵌套。

allow-from XXX.com: 允许被指定域名的网站嵌套。

cookie设置共享问题

如果目标网站的登录和会话管理依赖于 Cookie,由于跨域限制,Cookie 无法在主域中设置或读取,导致登录状态无法正确保存或共享

这是我用iframe嵌套了一个需要cookie登录的网站

记录--五个有用的iframe踩坑问题,快收藏!

浏览器限制了通过 iframe 中的页面使用 set-cookie 标头来设置 Cookie。这是出于安全考虑,防止跨域 Cookie 污染攻击。当在 iframe 中加载一个来自不同域的页面时,该页面无法通过设置 set-cookie 标头来在主页面的域中设置 Cookie。

这种限制是由同源策略 (Same-Origin Policy) 引起的,它要求网页只能访问来自相同域的资源。Cookie 是一种用于跟踪会话状态和存储用户数据的机制,在跨域的情况下,Cookie 可能被恶意网站滥用,因此浏览器禁止了在跨域 。

set-cookie 标头。

SameSite option
Strict 严格禁止第三方 cookie
Lax 仅对 get 请求发送
None Cookie 只能通过 HTTPS 协议发送即必须拥有 Secure 字段

解决方案:

  1. 使用同域代理: 在服务器端设置代理,让服务器请求目标域的资源,然后将结果传递给前端,由前端处理 Cookie。这样可以避免跨域 Cookie 问题。
  2. 使用 token: 通过在请求中使用 token 来进行身份验证和会话管理,而不依赖于 Cookie。比如我直接嵌入掘金的页面,使用情况是属于正常的

记录--五个有用的iframe踩坑问题,快收藏!

  1. CORS: 可以考虑设置目标网站服务器 CORS 响应头,以允许特定域名的请求访问资源。

iframe中跳转问题

记录--五个有用的iframe踩坑问题,快收藏!

首先,在iframe中引入csdn是没有问题的,并且某些内容都能正常访问,可能因为大多数都是get请求的原因,所以访问并没有限制,但是如果进行登录操作,就会出现以下的问题。

记录--五个有用的iframe踩坑问题,快收藏!

这个错误通常出现在浏览器中,涉及到对 iframe 进行跳转的操作。这是由于浏览器的安全机制,阻止当前窗口在 iframe 中导航到其他域名的页面,以防止潜在的安全风险。

这个错误信息表明当前窗口(主页面)试图在 iframe 中导航到 www.csdn.net/

但由于浏览器的安全策略,不允许这样的操作

我去看了下调用的接口,确实是登录的时候会有返回一个需要跳转的地址,这里应该是登录鉴权的地址。

记录--五个有用的iframe踩坑问题,快收藏!

 并且返回的setcookie请求全部抛出异常警告,这也是上面那点cookie中讲到的

记录--五个有用的iframe踩坑问题,快收藏!

 没有了鉴权的这一个步骤,我们可以看到鉴权后的下一个接口的请求,在这个请求登录的接口上,已经没有携带上cookie的信息,自然是无法登录的。

记录--五个有用的iframe踩坑问题,快收藏!

http无法嵌入https

如果页面使用的是 HTTP 协议,而尝试将 HTTPS 页面嵌入到该页面中的 iframe,浏览器会认为它们不是同源的,从而阻止加载 HTTPS 页面。这是为了保护用户的安全和隐私,防止潜在的安全风险,例如通过 HTTP 页面窃取在 HTTPS 页面中输入的敏感信息。

解决方案:

  1. 使用 HTTPS 协议: 主页面也迁移到 HTTPS 协议,这样就不会涉及到 HTTP 和 HTTPS 跨域的问题。
  2. 服务器代理: 在服务器端设置代理,让服务器请求 HTTPS 页面的内容,然后将结果传递给 HTTP 页面的前端,由前端进行展示。
  3. 使用 Subresource Integrity (SRI) : 如果目标 HTTPS 页面提供了 SRI 支持,可以使用 SRI 来加载和验证脚本和样式。

最佳做法是将页面迁移到 使用 HTTPS 协议

本文转载于:

https://juejin.cn/post/7261808673035075643

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--五个有用的iframe踩坑问题,快收藏!文章来源地址https://www.toymoban.com/news/detail-621230.html

到了这里,关于记录--五个有用的iframe踩坑问题,快收藏!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 踩坑vue中嵌套iframe项目,嵌套在iframe中的项目无法登录!

    解决方案原文 这个我试了下是谷歌浏览器做了限制,在edge上可以正常登录 我遇到这种情况主要是我的项目用的是cookie存储的登录状态。需要设置cookie的域名,使其在嵌入的网站和网站域名下都能访问cookie,但是我设置了还是没用。 我最终的 解决方式 是将cookie存储状态改成

    2023年04月26日
    浏览(65)
  • HTTP请求头大小写问题踩坑记录

    类似网关的需求做请求转发,大概是接收到客户端http请求后做简单处理,之后通过httpclient转发出去,其中请求头需要全部透传过去。但是直接全部无脑传过去会出现问题,比如因为处理过请求,所以长度已经变了,客户端的请求头content-length已经不再适用了,再比如如果客户

    2024年02月11日
    浏览(39)
  • [Elasticsearch] ES更新问题踩坑记录,直面秋招

    基本可以定位是在es更新这块出问题了 看对应代码 final TableDocBean docBean = baseSearchService.getById(id); setValueForBean(afterColumns, docBean); log.info(“update table data to es: {}”, JSON.toJSONString(docBean)); baseSearchService.update(docBean); 代码先通过表id 获取对应ES文档,然后赋值 执行更新数据操作 这块

    2024年03月25日
    浏览(52)
  • 【服务器训练调整yolov8时踩坑问题,修改记录】

    *** 另外网上yolov8教程特别多,关于数据集准备和制作这块,可以直接拆分的时候图片也拆分,也可以只记录在txt中,有三种方式所以在制作的时候都可以选择。需要也可以私信把我的处理脚本发你。 近期在服务器利用yolov8训练一些通用模型,发现不同时间段clone的yolov8内容和

    2024年02月19日
    浏览(39)
  • 跨域问题踩坑记录——附多种报错详细解决方案

    跨域是出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,当一个请求url的 协议、域名、端口 三者之间任意一个与当前页面url不同即为跨域。 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的

    2024年02月04日
    浏览(43)
  • 踩坑记录:SpringBoot3.x版本与Mybatis-Plus不兼容问题

    当使用3.x版本的SpringBoot结合Mybatis-Plus时版本不兼容就会报Property \\\'sqlSessionFactory\\\' or \\\'sqlSessionTemplate\\\' are required这个错误 解决方案有两种: 1.降低SpringBoot的版本 2.提高Mybatis-Plus的版本,注意要使用3.5.2之后的版本 

    2024年01月23日
    浏览(44)
  • 【git踩坑记录】git push时本地分支名与远程仓库分支名不一致引发的问题

    我在github上新创建的远程仓库默认分支名为main,而本地仓库默认分支名为master,当我push代码的时候碰到了若干坑… 先在github上快速创建个仓库,有个readme文件,远程仓库分支是main分支 然后本地创建两个文件夹,假装是两台主机,我们先在张三文件夹里写点东西 在张三的文

    2024年02月05日
    浏览(51)
  • 数据仓库ELT流程是啥?8大好用的ELT工具我找来了,赶紧收藏!

    一、数据抽取 数据源是指存储数据的源头,包括结构化数据、半结构化数据、非结构化数据等。 结构化数据:可以采用直连数据库的方式进行抽取,一般采用JDBC(Java Database Connectivity)。这种方式的优点是数据抽取效率高,但会增加数据库负载,因此需要控制抽取时间,一

    2024年02月11日
    浏览(63)
  • 微信小程序给 thinkphp后端发送请求出现错误 Wrong number of segments 问题的解决 【踩坑记录】

    这里提示 wrong number of segements , 百度了一下说这个问题是 后端解码token缺了一些东西(没正确的解码),然后我去抓了下包发现,我小程序端发送请求的时候,token是undifend,然后检查了一下store中的token发现,是我写错了变量名(😂好低级的错误) 微信小程序向后端发送请求时

    2024年02月09日
    浏览(57)
  • 【学习记录25】学习一些比较有用的git命令

    1、初始化仓库 2、初始化并创建分支并切换到dev分支 1、添加要提交的全部文件 2、对这次提交的说明描述 1、查看分支 2、创建分支 3、创建分支并切换到分支 4、修改分支名字,把test分支修改为prod 5、删除分支prod,强制删除分支用-D 1、切换到主分支main 2、合并dev分支的内容到

    2024年02月22日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包