localstorage跨域问题

大hei客

已于 2022-08-17 18:23:52 修改

阅读量3.6k

点赞数 1

分类专栏：笔记文章标签： javascript

于 2022-08-17 11:29:44 首次发布

本文链接：https://blog.csdn.net/qq_49173190/article/details/126382310

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

语法 otherWindow.postMessage(message, targetOrigin, [transfer]); Copy to
Clipboard otherWindow 其他窗口的一个引用，比如 iframe 的 contentWindow
属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。

message 将要发送到其他 window
的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]

targetOrigin 通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个
URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin
提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用 postMessage
传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的 origin
属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的
targetOrigin，而不是 *。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

transfer 可选是一串和 message 同时传递的 Transferable
对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

localstorage在泛域名下也存在跨域问题，要想解决这个问题可以通过postmessage。以登录为例，登录后获取的用户信息通过localstorage存储在A.xx.com下，若B.xx.com下的页面需要获取用户信息可以做如下操作：

A.xx.com 存储用户信息到localstorage

<!doctype html>
<html>
    <head>
        <style type="text/css">
            html,body{
                height:100%;
                margin:0px;
            }
        </style>
    </head>
    <body style="height:100%;">
        <script type="text/javascript">
             window.οnlοad=function(){
                var user = JSON.stringify({
                    "uid":window.localStorage.getItem("uid"),
                    "nickname":window.localStorage.getItem("nickname"),
                    "avatar":window.localStorage.getItem("avatar"),
                    "token":window.localStorage.getItem("usertoken")
                });
                window.parent.postMessage(user,'*');
            }
           
        </script>
    </body>

</html>

B.xx.com 向A.xx.com发起消息获取用户信息

<!DOCTYPE html>
<html>
<head>
    <title>Post Message</title>
</head>
<body>
    <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
        <div id="color">Frame Color</div>
    </div>
    <div>
        <iframe id="child" src="http://A.xx.com"></iframe>//通过iframe发起消息
    </div>


    <script type="text/javascript">
        window.οnlοad=function(){
            window.frames[0].postMessage('getuser','http://A.xx.com');
        }


        window.addEventListener('message',function(e){
            var user= JSON.parse(e.data);

            if(user.uid != null){

                //如果用户信息不为空 时逻辑               

                ...

            }else{

                //用户信息为空时逻辑

                ...
            }
            
        },false);
    </script>
</body>
</html>