postMessage前端跨域并前端监听

ytwman 发布于2019-08-23 12:38 / 2590人阅读

摘要：有时候会遇到傻需求，比如前端单点登陆遇到需求，就要去想解决办法，这里我给大家做一个简单的前端单点登陆的解决方案，用到的就是跨域信息传输以及的监听。可选是一串和同时传递的对象这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

有时候会遇到傻X需求，比如前端单点登陆！遇到需求，就要去想解决办法，
这里我给大家做一个简单的前端单点登陆的解决方案，
用到的就是postMessage跨域信息传输以及onstorage的监听。
本文用到的知识点 koa架设静态资源服务、跨域、postMessage的用法
、onstorage监听storage

第一步、架设两个不同端口的服务

我们这里用koa2来搭建两个服务到不同的端口，来模拟一下真正的工作中需要出现的跨域情况。
非常的简单主要用到 koa-static这个中间件
搭建起来也是非常容易的，如果大家想学node相关的知识可以加我微信shouzi_1994 或者在博客下面留言你的联系方式这里就不多说废话了直接上代码视频内会有详细的搭建步骤

// localhost:4000
const Koa = require("koa");
const path = require("path")
const static = require("koa-static")
const app = new Koa();

//设置静态资源的路径 
const staticPath = "./static"

app.use(static(
    path.join( __dirname,  staticPath)
  ))

  
console.log("服务启动在4000端口")

app.listen(4000);


// localhost:3000
const Koa = require("koa");
const path = require("path")
const static = require("koa-static")
const app = new Koa();

//设置静态资源的路径 
const staticPath = "./static"

app.use(static(
    path.join( __dirname,  staticPath)
  ))


console.log("服务启动在4000端口")

app.listen(4000);

第二步、跨域通讯postMessage

我们首先来看一下 postMessage的API

otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message
将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]
targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串""（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
transfer 可选
是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

怎么样是不是很容易理解，这里给大家中文化一下。
要传输的那个（父）子窗口.postMessage(传输的内容, 传输到哪个地址, [权限是否转移（一般不用）]);

提前说一下，要想跨域传输，必须是父子页面，也就是说，是通过js Open的页面，或者ifream嵌套的页面
好了我们开始来写代码




    
    
    
    Document


        
    我是端口3000网站的内容




    
    
    
    Document


        
    我是端口4000网站的内容

写到这里我们已经实现了父子页面的跨域通讯，但是这个通讯只发生在一个窗口内啊，并没有达到我想要的效果，该怎么办呢。

监听数值变化，做出及时反应

到这里大家需要思考，什么东西是浏览器上的所有同域名网站都能看到的呢？
没错，storage，我们只需要对这个进行监听就好了。

这里我们选择监听 loacalStorage 现在我们对子页面做一下改进




    
    
    
    Document


        
    我是端口4000网站的内容

看，我们是不是到现在就能够针对跨域传输的内容做出响应了呢？

思考

现在我们做到了两个页面的跨域通讯，那么三个到多个的跨域通讯怎么做呢？其实一个道理啦。现在道理说给你了，写法自己去体验一下吧。

写在最后

大家有什么工作上的坎，想不通的问题，学习上的难点，都可以给我微信发信息，或者在博客评论，我都会尽力帮助大家，经典问题我会做成视频和大家分享。基础入门视频我还是会持续制作，不过我觉得教基础是真的难，还好我手里还有很多免费的入门视频，需要的也可以找我。完全免费。

GPU云服务器云服务器前端前端前端编程前端前端培训前端前端前端学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98874.html

同源策略和跨域知识点学习

摘要：同源策略在这之前需要先熟悉一下这个概念，同源指请求协议相同，主机名相同，端口相同，涉及安全的策略。同源策略主要限制的是不同源之间的交互操作，对于跨域内嵌的资源不受该策略限制。问题起因是在使用weibo api的时候，发现有一个报错。weibo api是https协议，我本地是模拟的回调域名，然后进行数据通信，本地http协议，于是乎就报错了。出于对postMessage的不是很熟悉，...

baiy 2019-08-20 12:08 评论0 收藏0
前端常见跨域解决方案（全）

摘要：需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。目前，所有浏览器都支持该功能需要使用对象来支持，也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略，不是协议的一部分。什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源...

canger 2019-07-25 15:04 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

edgardeng 2019-08-23 14:57 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

justCoding 2019-08-02 14:10 评论0 收藏0