【HAVENT原创】前端跨域一站式登录实现 ( iframe + window.name )

从网上搜集了一些资料,window.name 传输技术,关于window.name的这样一个特性:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。换句话说,name属性不会因为页面的url变化而变化,这就给跨域提供了机会。原本是 Thomas Frank 用于解决 cookie 的一些劣势(每个域名 4 x 20 Kb 的限制、数据只能是字符串、设置和获取 cookie 语法的复杂等等)而发明的(详细见原文:《Session variables without cookies》),后来 Kris Zyp 在此方法的基础上强化了 window.name 传输 ,并引入到了 Dojodojox.io.windowName),用来解决跨域数据传输问题。

本示例通过 iframe 窗口重载,成功将 window.name 所需对象以字符串形式跨域传递到另外一个域名下,非常适用于前端跨域实现一站式登录。

首先我们要创建一个登录状态返回页面 passport.my00.com/auth.html

1 <html>
2     <script type="text/javascript">
3         window.name=‘{"token":"用户在本站登录的token"}‘;
4     </script>
5 </html>

然后在另一个域名拿到这个 JSON 字符串

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>MY00.COM</title>
 6     <script>
 7         function getData ( url, fn ) {
 8             var oIframe = document.createElement(‘iframe‘),
 9                 firstBtn = true,
10                 loadFn = function () {
11                     if ( firstBtn ) {
12                         // 导航回同域名根目录下的 cross-proxy.html(空白文件,可以不存在,只是控制台会有 404 提示),以便获取到 name 值
13                         oIframe.contentWindow.location = ‘cross-proxy.html‘;
14                         firstBtn = false;
15                     } else {
16                         fn( oIframe.contentWindow.name );
17                         oIframe.contentWindow.document.write(‘‘);
18                         oIframe.contentWindow.close();
19                         document.body.removeChild(oIframe);
20                         oIframe.src = ‘‘;
21                         oIframe = null;
22                     }
23                 };
24
25             oIframe.src = url;
26
27             // 1. 第一次 iframe 加载完毕触发事件,执行 loadFn 函数,会将 iframe 导航回 cross-proxy.html
28             // 2. cross-proxy.html 加载完毕后又会触发事件,再次执行 loadFn 函数,此时会走 else
29             if ( oIframe.attachEvent ) {
30                 oIframe.attachEvent( ‘onload‘, loadFn );
31             } else {
32                 oIframe.onload = loadFn;
33             }
34
35             document.body.appendChild(oIframe);
36         }
37
38
39         // 页面加载完毕后调用getData函数去获取数据
40         window.onload = function () {
41             getData( ‘http://passport.my00.com/auth.html‘, function ( data ) {
42                 console.log( data );
43             } );
44         }
45     </script>
46 </head>
47 <body>
48 </body>
49 </html> 

以上示例完美实现跨域获取数据信息,注意数据内容传递在 2M 内。下面是用 Java Spring Boot 获取主域名的 token 并返回页面的代码

1     @RequestMapping("/auth")
2     public String index(HttpServletRequest request){
3         String token = LoginUtils.getToken(request);
4         token = token == null ? "" : token;
5         return "<script type=\"text/javascript\">window.name = \"{token: \"" + token + "\"}\";</script>";
6     }

原文地址:https://www.cnblogs.com/HAVENT/p/8321788.html

时间: 2024-07-30 02:06:00

【HAVENT原创】前端跨域一站式登录实现 ( iframe + window.name )的相关文章

前端跨域访问

1. JSONP 2. CORS(Cross-origin resource sharing) 2.1 运行模式 2.2 JQuery支持CORS 2.3 与JSONP相比 3. 跨域访问在点评的应用 References 在互联网应用中: 一个页面需要请求多个域名下的web服务端接口 同时一个web服务接口可能会被很多不同域名下的页面请求. 一个web应用如果支持为了支持以上模式而申请多个域名是不合算的,因为域名申请和管理所占用的资源比较大,因此服务端支持跨域就成了一个更合理的解决方案.解决跨

前端跨域的那些事

这一节,我们来讲一讲,前端跨域的那些事,主要分成这样的几部分来讲解, 一.为什么要跨域? 二.常见的几种跨域与使用场景 2.1 JSONP跨域 2.2 iframe跨域 2.3 window.name 跨域 2.4 document.domain 跨域 2.5 cookie跨域 2.6 postMessage跨域 三.总结 一.为什么要跨域 跨域,通常情况下是说在两个不通过的域名下面无法进行正常的通信,或者说是无法获取其他域名下面的数据,这个主要的原因是,浏览器出于安全问题的考虑,采用了同源策略

前端跨域总结

什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: <link>.<script>.<img>.<frame>等dom标签,还有样式中background:url().@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求.dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场

前端跨域问题的几种解决方案

前端跨域问题 一:同源策略 1.what's this 所谓同源是指,域名,协议,端口相同.当浏览器运行一个JS脚本时会进行同源检测,如果不同源是不能执行的. 2.源继承 来自about:blank,javascript:和data:URLs中的内容,继承了将其载入的文档所指定的源,因为它们的URL本身未指定任何关于自身源的信息. 3.变更源 变更源可以实现基础域相同的不同页面的跨域问题. 如:a.baidu.com/index.html 通过 iframe 引入 b.baidu.com/ind

解决前端跨域请求的几种方式

利用 JSONP 实现跨域调用 说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题.其原理是根据 XmlHttpRequest 对象受到同源策略的影响,而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料.用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句. 1.2

跨域单点登录系统的设计与实现

跨域单点登录系统的设计与实现 一.跨域单点登录系统整体设计 1. 系统架构 如上图所示:在系统存在一个认证中心以及多个站点.用户信息统一由认证中心管理,在其它子站的登录均会跳转到认证中心来登录. 2. 工作流程 单点登录系统的关键在于,当用户从一个子站登录后,它会在认证中心生成ticket标识,只要该标识存在就代表用户已经成功登陆了.每个子站在进入之前,无论本地ticket标识是否存在,均会去请求一次认证中心,要做的事情如下:如果子站ticket不存在,并不一定代表用户没有从别的子站登录,但是如

前端跨域几种方式

跨域问题的直接原因是浏览器存在同源策略,浏览器同源指的是:两个页面的协议.端口和主机相同,则两个页面具有相同的源.IE下满足协议.主机相同,就认为是同源. 想象一下,如果没有同源策略,谁都可以修改你站点上的内容,读取你的cookie,后果难以想象 前端跨域的几种方式 修改document.domain document.domain 用来获取当前网页的域名,document.domain可以被赋值 document.domain只能修改成当前域名的主域名或者基础域名,如当前域名是b.360.cn

前端跨域请求原理及实践

前端跨域请求原理及实践 2017-03-03 前端大全 (点击上方公众号,可快速关注) 作者:高鹏 tingandpeng.com/2016/09/05/前端跨域请求原理及实践/ 如有好文章投稿,请点击 → 这里了解详情 一. 跨域请求的含义 浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的 协议名protocol. 主机host. 端口号port 这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用.

前端跨域杂谈

1.前端跨域之表单(post) 项目需求,需要跨域向另一台服务器传送大量值,从ajax角度跨域是get方式,基于此,方案采用构造<form>表单,通过action发送到对方服务器,对方服务器需要做一些配合. 发送方post.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width,