window.postMessage - 前端跨域通信

你越是认真生活，你的生活就会越美好！

公司里近期引入了付费的葡萄城插件，处理 Excel，因为葡萄城按域名数量收费，为了节约成本，内部单独起了一个前端项目来用葡萄城插件，哪个项目需要使用，通过 iframe 引入，这时需要解决跨域通信的问题，通过 postMessage 可以解决

window.postMessage()

window.postMessage() 方法可以安全地实现跨源通信。

通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及主机 (两个页面的模数 Document.domain 设置为相同的值) 时，这两个脚本才能相互通信。

window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。

接收消息的窗口可以根据需要自由处理此事件 (en-US)。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

ps:

• opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。
• 当使用 window.open() 打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息。

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

• otherWindow

其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。

• message

将要发送到其他 window 的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。(如果报错了,可以尝试把 message 里的对象 JSON.stringify 处理下)

• targetOrigin

通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串 "*"（表示无限制）或者一个 URI。

在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。

这个机制用来控制消息可以发送到哪些窗口；例如，当用 postMessage 传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的 origin 属性完全一致，来防止密码被恶意的第三方截获。

如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的 targetOrigin，而不是*。

不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。

• transfer

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

The dispatched event

执行如下代码，其他 window 可以监听分发的 message:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
    
    
  var origin = event.origin
  if (origin !== "http://example.org:8080")
    return;

  // ...
}

message 的属性有：

• data

从其他 window 中传递过来的对象。

• origin

调用 postMessage 时消息发送方窗口的 origin . 这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。例如 “https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。

请注意，这个 origin 不能保证是该窗口的当前或未来 origin，因为 postMessage 被调用后可能被导航到不同的位置。

• source

对发送消息的窗口对象的引用; 您可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。

安全问题

如果您不希望从其他网站接收 message，请不要为 message 事件添加任何事件侦听器。 这是一个完全万无一失的方式来避免安全问题。

如果您确实希望从其他网站接收 message，请始终使用 origin 和 source 属性验证发件人的身份。

任何窗口（包括例如 http://evil.example.com ）都可以向任何其他窗口发送消息，并且您不能保证未知发件人不会发送恶意消息。 但是，验证身份后，您仍然应该始终验证接收到的消息的语法。 否则，您信任只发送受信任邮件的网站中的安全漏洞可能会在您的网站中打开跨网站脚本漏洞。

当您使用 postMessage 将数据发送到其他窗口时，始终指定精确的目标 origin，而不是*。 恶意网站可以在您不知情的情况下更改窗口的位置，因此它可以拦截使用 postMessage 发送的数据。

示例

/*
 * A 窗口的域名是<http://example.com:8080>，以下是 A 窗口的 script 标签下的代码：
 */

var popup = window.open(...popup details...);

// 如果弹出框没有被阻止且加载完成

// 这行语句没有发送信息出去，即使假设当前页面没有改变 location（因为 targetOrigin 设置不对）
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// 假设当前页面没有改变 location，这条语句会成功添加 message 到发送队列中去（targetOrigin 设置对了）
popup.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
    
    
  // 我们能相信信息的发送者吗？(也许这个发送者和我们最初打开的不是同一个页面).
  if (event.origin !== "http://example.org")
    return;

  // event.source 是我们通过 window.open 打开的弹出页面 popup
  // event.data 是 popup 发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);

// 注销页面或离开页面时 最好注销监听事件
window.removeEventListener("message", receiveMessage, false);

/*
 * 弹出页 popup 域名是<http://example.org>，以下是 script 标签中的代码：
 */

//当 A 页面 postMessage 被调用后，这个 function 被 addEventListener 调用
function receiveMessage(event)
{
    
    
  // 我们能信任信息来源吗？
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source 就当前弹出页的来源页面
  // event.data 是 "hello there!"

  // 假设你已经验证了所受到信息的 origin (任何时候你都应该这样做), 一个很方便的方式就是把 event.source
  // 作为回信的对象，并且把 event.origin 作为 targetOrigin
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

window.addEventListener("message", receiveMessage, false);

注意

任何窗口可以在任何其他窗口访问此方法，在任何时间，无论文档在窗口中的位置，向其发送消息。 因此，用于接收消息的任何事件监听器必须首先使用 origin 和 source 属性来检查消息的发送者的身份。 这不能低估：无法检查 origin 和 source 属性会导致跨站点脚本攻击。

与任何异步调度的脚本（超时，用户生成的事件）一样，postMessage 的调用者不可能检测到侦听由 postMessage 发送的事件的事件处理程序何时抛出异常。

分派事件的 origin 属性的值不受调用窗口中 document.domain 的当前值的影响。

仅对于 IDN 主机名，origin 属性的值不是始终为 Unicode 或 punycode;

在使用此属性时，如果您期望来自 IDN 网站的消息，则最大程度地兼容性检查 IDN 和 punycode 值。 这个值最终将始终是 IDN，但现在你应该同时处理 IDN 和 punycode 表单。

当发送窗口包含 javascript: 或 data: URL 时，origin 属性的值是加载 URL 的脚本的

HTMLIFrameElement.contentWindow

contentWindow 属性返回当前 HTMLIFrameElement 的 Window 对象.

你可以使用这个 Window 对象去访问这个 iframe 的文档和它内部的 DOM . 这个是可读属性, 但是它的属性像全局 Window 一样是可以操作的.

关于contentWindow的示例

let x = document.getElementsByTagName("iframe")[0].contentWindow;
//x = window.frames[0];

x.document.getElementsByTagName("body")[0].style.backgroundColor = "blue";
// this would turn the 1st iframe in document blue.

vue项目中使用代码参考

跨域通信，通过 iframe 引入

a页面

<!-- template里的内容 -->
<!-- 右边 iframe 组价 -->
<div class="basis-info-right" v-loading="iframeLoading">
   <iframe key="report-basis" id="iframe"
   :src="`//groupprice.vvupup.com/evaluation/#/skyeye?target=${origin}`"></iframe>
 </div>

mounted () {
    
    
   this.onMessage()
},
destroyed() {
    
    
    window.removeEventListener('message', this.onMessageFn, false)
  },
methods: {
    
    
	onMessage () {
    
    
      // 接受 组价那边 返回的数据
      window.removeEventListener('message', this.onMessageFn, false)
      window.addEventListener('message', this.onMessageFn, false)
    },
        onMessageFn(e) {
    
    
      // 不是 组价 那边的消息 不做处理
      if (!e.origin.includes('groupprice.vvupup.com')) {
    
    
        return
      }
      console.log('on message e:', e)
      console.log('e.origin:', e.origin)
      console.log('e.data:', e.data)

      if (e.data.type === 'created') {
    
    
        this.iframeLoading = false
        this.isSpreadInit = true
        // 葡萄城组件初始化完成 可以接收 spreadJson 数据
        let iframe = document.getElementById('iframe')
        let params = {
    
    
          type: 'init',
          message: '天眼发送初始化的数据给组价',
          data: {
    
    
            downloadReportPdf: getAlias(this.$store.state.permissionTree).includes('download-report-pdf'),
            downloadReportExcel: getAlias(this.$store.state.permissionTree).includes('download-report-excel'),
            type: 'admin',
            reportEditRight: this.reportEditRight
          }
        }
        iframe.contentWindow.postMessage(params, `${
      
      location.protocol}//groupprice.vvupup.com`)
        // console.log('iframe:', iframe)
        if (!this.localFormData.spreadJson && this.localFormData.reportUrl) {
    
    
          if (this.reportFile) {
    
    
            params = {
    
    
              type: 'file',
              message: '天眼发送 File 给组价 组价渲染',
              data: this.reportFile,
              fileName: this.localFormData.fileName
            }
            // 向 组价 发送跨域数据
            iframe.contentWindow.postMessage(params, `${
      
      location.protocol}//groupprice.vvupup.com`)
          }
        } else if (this.localFormData.spreadJson) {
    
    
          params = {
    
    
            type: 'spreadJson',
            message: '发送 spreadJson 给组价',
            json: this.localFormData.spreadJson,
            fileName: this.localFormData.fileName
          }
          // 向 组价 发送跨域数据
          iframe.contentWindow.postMessage(params, `${
      
      location.protocol}//groupprice.vvupup.com`)
        }
      }

      if (e.data.type === 'spreadJSON' && e.data.json) {
    
    
        if (!this.isFree) return
        console.log('获取最新的 this.localFormData.spreadJson')
        try {
    
    
          if (e.data.isSubmit) {
    
    
            // 判断是否有编辑 有的话 手动触发一次保存 保存后再触发提交
            // 只判断 spreadJson(需要从组价获取最新的 json) validTimeStart 如果是复审 还得判断 relaReportId
            console.log('this.copyLocalFormData.validTimeStart:', this.copyLocalFormData.validTimeStart)
            console.log('this.localFormData.validTimeStart:', this.localFormData.validTimeStart)
            if (this.copyLocalFormData.validTimeStart !== this.localFormData.validTimeStart) {
    
    
              console.log('有效时间 发生了变化 触发保存后再提交')
              this.compressFn(e)
              return
            }
            console.log('this.copyLocalFormData.relaReportId:', this.copyLocalFormData.relaReportId)
            console.log('this.localFormData.relaReportId:', this.localFormData.relaReportId)
            if (this.localFormData.auditType === '复审') {
    
    
              if (this.copyLocalFormData.relaReportId !== this.localFormData.relaReportId) {
    
    
                console.log('关联报告发生了变化 触发保存后再提交')
                this.compressFn(e)
                return
              }
            }
            if (JSON.stringify(this.copyLocalFormData.spreadJson).length !== e.data.json.length) {
    
    
              console.log('JSON.stringify(this.copyLocalFormData.spreadJson.length:', JSON.stringify(this.copyLocalFormData.spreadJson).length)
              console.log('e.data.json.length:', e.data.json.length)
              console.log('spreadJSON 发生了变化 触发保存后再提交')
              this.compressFn(e)
              return
            }
            console.log('没有发生变化 直接走提交')
            this.$emit('afterSave')
            this.loading = false
            this.isFree = true
          } else {
    
    
            this.compressFn(e)
          }
        } catch (error) {
    
    
          console.log(error)
        }
      }
      if (e.data.type === 'downLoadPdf') {
    
    
        this.downReport('exportUrl')
      }
      if (e.data.type === 'downloadExcel') {
    
    
        this.downloadExcel()
      }
    }
}

iframe 页面

// 插件初始化完执行
let data = {
    
    
   type: 'created',
   message: '组价葡萄城初始化完成，可以接受 spreadJson 数据',
 }
 window.parent.postMessage(data, this.$route.query.target);

mounted () {
    
    
    window.removeEventListener('message', this.onMessageFn, false)
    window.addEventListener('message', this.onMessageFn, false);
  },
  destroyed () {
    
    
    window.removeEventListener('message', this.onMessageFn, false)
  }
 methods: {
    
    
 	async postMessage (isSubmit=false) {
    
    
      let data = {
    
    
        type: 'spreadJSON',
        message: '来自 组价 的消息',
        fileName: this.fileName,
        isSubmit, // 由天眼传过来 是否是点击提交按钮触发的保存
      }
      if (!this.spreadJson) {
    
    
        // 没有 json 说明天眼那边没有上传过审核报告 或者没有数据
        data.json = this.spreadJson
      } else {
    
    
        this.getJson()
        data.json = JSON.stringify(this.spreadJson)
        data.jsonSize = JSON.stringify(this.spreadJson).length / 1024 / 1024 + 'MB'
      }
      console.log('组价传递 spreadJSON 给天眼')
      window.parent.postMessage(data, this.$route.query.target);
    },
	onMessageFn (e) {
    
    
      console.log('葡萄城 监听 message')
      if (e.origin !== this.$route.query.target) {
    
    
        return;
      }
      console.log('on message e:', e);
      console.log('e.origin:', e.origin)
      console.log('e.data:', e.data)
      let type = e.data.type
      let data = e.data.data
      if (type === 'init') {
    
    
        this.downloadReportPdf = data.downloadReportPdf
        this.downloadReportExcel = data.downloadReportExcel
        this.reportEditRight = data.reportEditRight
        this.setProtect()
        if (data.type === 'admin') {
    
    
          this.skyEye = 'admin'
        }
        if (data.isTask) {
    
    
          this.spreadJson = null
        }
      }
      if (type === 'file') {
    
    
        this.importExcelFile = e.data.data
        this.fileName = e.data.fileName
        console.log('旧数据没有 spreadJSON 只有 excel 的 url 地址 拿到天眼发过来的 file 解析')
        this.loadExcel('oldData')

      }
      if (type === 'spreadJson') {
    
    
        if (e.data.json) {
    
    
          console.log('组价收到 spreadJSON 开始根据 json 渲染表格')
          this.spreadJson = e.data.json
          this.fileName = e.data.fileName
          console.log('this.spreadJson:', this.spreadJson)
          this.importJson()
        }
      } else if (type === 'getJson') {
    
    
        // 发送最新 json 给天眼
        this.postMessage(data && data.isSubmit || false)
      } else if (type === 'no-task') {
    
    
        this.spreadJson = null
        this.skyEye = 'admin'
        this.reportEditRight = true
      } else if (type === 'downLoadPdf') {
    
    
        this.loadingPDF = false
      } else if (type === 'downloadExcel') {
    
    
        this.loadingExcel = false
      }
    }
}

参考

postMessage - 跨域消息传递

window.postMessage – MDN

推荐阅读

Vue源码学习目录

Vue源码学习完整目录

连点成线 - 前端成长之路

连点成线 - 前端成长之路

---

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强