页面嵌入iframe Cookie丢失问题解决

这篇具有很好参考价值的文章主要介绍了页面嵌入iframe Cookie丢失问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

页面嵌入iframe Cookie丢失问题解决

遇到的问题

自身页面以iframe的形式嵌入三方页面中,双方域名不一致导致自身页面的cookie被某些浏览器拦截无法正常被保存到客户端文章来源地址https://www.toymoban.com/news/detail-801487.html

解决方案
  1. 后端将cookie以链接参数的形式带给前端
  2. 前端在请求接口的时候将cookie放在请求头(这里无法直接在请求头放置Cookie参数,需要使用一个新的参数来放置Cookie)
  3. 后端使用拦截器获获取请求头中Cookie副本解析后重新放置到Cookie中
后端部分实现示例代码
解析获取Response中的Cookie
// 从Response Header 中的 Set-Cookie解析
for (String cookie : response.getHeaders("Set-Cookie")) {
    cookie = cookie.split(";")[0];
    String[] split = cookie.split("=", 2);
    cookieMap.put(split[0], split[1]);
}
后端拦截器设置设置Coookie
@Component
@Order(1)
public class HeaderCookieFilter implements Filter {

    private static final Logger log = LoggerFactory.getLogger(HeaderCookieFilter.class);
    private final String HEADER_COOKIE_KEY = "identityKey";

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        try {
            HttpServletRequestWrapper customRequest = (HttpServletRequestWrapper)request;
            JSONObject cookieInfo = check(request);
            //如果校验通过
            if(cookieInfo!=null) {
                Cookie[] cookies = new Cookie[cookieInfo.size()];
                // 修改cookie
                Iterator<String> iterator = cookieInfo.keySet().iterator();
                for (int i = 0; i < cookieInfo.keySet().size(); i++) {
                    String key = iterator.next();
                    String value = cookieInfo.getString(key);
                    Cookie cookie = new Cookie(key, value);
                    cookies[i] = cookie;
                }
                request = new CustomRequest(customRequest, cookies);
            }
        }catch (Exception e){
            log.error("header transfor cookie error",e);
        }
        chain.doFilter(request,response);
    }

    @Override
    public void destroy() {
    }

    private JSONObject check(ServletRequest request) throws UnsupportedEncodingException {
        HttpServletRequestWrapper customRequest = (HttpServletRequestWrapper)request;
        // 不存在identityKey请求头,直接跳过
        String allCookieStrEncode = customRequest.getHeader(HEADER_COOKIE_KEY);
        boolean hasHeaderCookie = StringUtils.isNotEmpty(allCookieStrEncode);
        if(!hasHeaderCookie){
            return null;
        }
        String cookieStr = URLDecoder.decode(allCookieStrEncode, CharEncoding.UTF_8);
        JSONObject cookieInfo = JSON.parseObject(cookieStr);
        return cookieInfo;
    }
    class CustomRequest extends HttpServletRequestWrapper {
        Cookie[] cookies;
        public CustomRequest(HttpServletRequest request, Cookie[] cookies) {
            super(request);
            this.cookies = cookies;
        }
        @Override
        public Cookie[] getCookies(){
            return cookies;
        }
    }
}

到了这里,关于页面嵌入iframe Cookie丢失问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp B站iframe嵌入APP及视频全屏不横屏问题处理 Android端

    问题:视频界面能进入全屏,但视频不横屏 方法一 :视频界面设置允许横屏,手机竖屏锁定取消。(未采用) 效果及问题:全屏后,手机横屏后,视频会横屏。但取消全屏后,视频界面还是横屏着,体验不太好。 方法二 :视频界面设置允许横屏,通过onResize监听窗口尺寸变

    2024年02月03日
    浏览(38)
  • vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案

    这两天工作中遇到一个这样的需求,切换tab标签时,要求对应的tab页面不刷新,但是项目中加入了一部分含有iframe的页面,在切换路由的过程中,如果使用keep-alive是达不到缓存ifram嵌套的页面效果的。 vue中的keep-alive 1.原理:vue 的缓存机制并 不是直接存储 DOM 结构 ,而是将

    2024年02月04日
    浏览(73)
  • cookie和localstorage在iframe中的应用

    背景: 现有项目中有一个用户中心系统,里面用iframe嵌入不同项目的页面,多个项目公用一个token 解决方案: 子页面通过url参数的方式传递token, 在url拿到token之后,刚开始将token存入localstorage中,但localstorage是永久保存,在浏览器关掉之后,再重新打开页面,只要token没有

    2024年02月08日
    浏览(33)
  • vue3 动态添加路由刷新后页面丢失(白屏)问题

    动态添加路由操作一般是用vuex或者Pinia封装,在登录页面调用 如果出现刷新页面丢失有两种可能: 1:vuex或者Pinia没有做持久化处理 2:动态添加路由需要在main.ts里面也调用一次 不需要路由守卫即可实现 注意:必须要在页面挂载前还有路由配置完成前调用添加,不然还是丢

    2024年02月16日
    浏览(55)
  • uniapp web-view页面层级过高,想在web-view上层再加入按钮,采用plus.nativeObj.View实现。动态创建web-view解决切换src后丢失背景问题。

    需求 :有两个web-view页面,需要添加按钮,动态切换web-view的src进行页面切换 问题 :uniapp的web-view层级很高,通过positon的z-index无法将其他元素置于web-view页面上层 解决方式 :采用底层组件plus.nativeObj.View创建视图,该视图比web-view层级高,可在web-view上层添加 按钮,图片,矩

    2024年02月11日
    浏览(77)
  • 解决Iframe交互事件window.addEventListener触发多次问题

    addEventListener() 方法用于向指定元素添加事件句柄。 提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 当我们审批流交互用到window.postMessage结合window.addEventListene这种消息传递技术来实现安全的通信。简单的来讲就是进行事件交互,如当我们有以下

    2024年02月11日
    浏览(39)
  • Selenium 解决html中的嵌套问题(xpath中存在iframe)

    selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {“method”:“xpath”,“selector”:\\\"/… 在已确定页面元素全部加载完成,并且确定xpath路径正确的情况下,可以考虑是否存在标签嵌套或者存在iframe标签的情况。 iframe标签可以将一个HTML文档嵌入在一个

    2024年02月12日
    浏览(49)
  • 解决selenium访问网页中多个iframe,导致无法锁定元素的问题

    获取全部的iframe列表 调试获取目标iframe 使用: browser.switch_to.frame(目标iframe) 退回到原有的状态: browser.switch_to.default_content() 不同的iframe之间的元素无法被selenium锁定,因此需要通过人为调试,得到具体的iframe窗口,进入目标iframe后才能够进行元素的锁定,锁定后就得到目标

    2024年02月22日
    浏览(46)
  • 如何在 WordPress 中嵌入 iFrame

    💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】 🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】 💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 💬 免费且实用的 前端刷题(面经大全)网站:👉点击跳转到网站 博主前些

    2024年01月21日
    浏览(45)
  • Java中整数相除并保留两位小数的实现方式、保留两位小数:Java中整数相除的处理方法、解决Java整数相除后精度丢失的问题、Java数值计算:整数相除保留指定小数位数的技巧

    当在Java中需要进行整数相除并保留两位小数时,可以使用以下两种方式实现: 1. 使用浮点数类型和DecimalFormat进行格式化:  2. 使用BigDecimal类进行精确的数值计算和格式化输出: 在选择使用哪种方式时,需要根据具体的业务需求和数值计算的精度要求进行权衡和选择。如果

    2024年02月12日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包