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

2021-02-19 05:17

阅读：539

从网上搜集了一些资料，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 传输，并引入到了 Dojo （dojox.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.COMtitle>  
 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 "";
6     }

上一篇：https://docs.microsoft.com/zh-cn/windows/uwp/layout/design-and-ui-intro

下一篇：tensorflwo-gpu win10_64bit 的安装版本问题

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：【HAVENT原创】前端跨域一站式登录实现 ( iframe + window.name )
文章链接：http://soscw.com/index.php/essay/57377.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章