青岛网站建设新闻资讯

解决iframe标签嵌入一个现有的网站无法登录的问题

时间:2022-09-23 已阅读:279次 | 作者:青岛网站建设

首页>新闻资讯>建站知识

以iframe标签嵌入一个现有的网站到项目中,嵌入的网站无法正常登录,直接在浏览器地址栏输入url并登录是正常的。于是青岛网站建设公司青华互联开始探索…


问题分析
由于后续接口提示401,判断是登录接口鉴权失败导致的,于是观察登录接口的请求响应,发现了端倪:

翻译为大白话就是:写入Cookie失败。原因是没有显式设置cookie的samesite属性,导致被默认为Lax,又因为响应的接口属于非顶层导航的跨站请求,浏览器将其屏蔽了!

这个提示包含了两个信息:

设置cookie时有个连带的SameSite属性
top-level-navigation(顶层导航)
接下来细说!


SameSite属性
该属性一般是随着Set-Cookie响应头设置的,语法为response.setHeader(“Set-Cookie”,“CookieName=CookieValue;SameSite=propValue”),表示该cookie是否可以携带在跨站请求中,可以取三个值:

Strict,表示完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。
Lax,大多数情况下不发送第三方 Cookie,但是导航到目标网址的 Get 等请求除外
None,表示关闭跨站限制,但是需要显式设置Secure属性并配置https
如果不设置,浏览器会默认为Lax。正如上文所提到的。

顶层导航(top-level navigation)


什么是顶层导航?

使用浏览器地址栏输入www.baidu.com,打开百度首页,打开控制台可以看到当前页面除了百度的应用之外还有三个应用(Google翻译、Grammarly,UserTesting),其他三个是我安装的插件。

对浏览器而言,百度是top-level-navigation,其他三个则不是,因为地址栏里输入的是百度的网址。


解决问题
汇总一下就是:

登录接口是一个来自非顶层导航的接口(iframe嵌套),该接口默认的SameSite属性值Lax要求iframe里应用的网址与顶层导航应用的网址保持一致。


方案有三个:

保证两者的网址一样(域名,测试发现同一主域名下不同的子域名也是可以的)。
主动设置SameSite为Set-Cookie:Key=Value;SameSite=None;Secure,确保协议为安全协议https
禁用浏览器对SameSite的默认配置(只会对未设置的SameSite属性有效),方式如下:

第一种最为简单直接。

第二种需要修改服务端代码。

第三种在用户层面非常不现实。

果断采用了第一种方案。


二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1324.html

相关资讯

我有建站需求

*请正确填写需求信息,我们最快会在1小时内与您取得联系!
注:如果想获取实时咨询报价,您可以拔打业务经理手机186-5321-9163或扫码添加客户经理微信咨询。

Copyright © 2022 青岛青华互联网站建设公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图