限制页面在指定iframe框架外被访问的方法（前端解决）

        项目上遇到一个有意思的需求，我们自己做了一个Vue站点，然后站点被另外一个主站以iframe的形式引用，现在出于安全和两个站点形式统一的需求，要求我们的子站点不能被主站点以外的站点访问。

       首先我想到网上有如何让站点在iframe框架外不显示的方法，只要检测当前window是不是顶级window就行了，代码如下：

if (window !== top.window) {
  new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
  })
//window.close();
}

        这里不用window.close()是因为某些浏览器可以阻止页面关闭自身从而阻止我们的限制访问。但是此方法只能限制页面被非iframe方式引用，至于是谁引用的没有限制，只要别人撸个html然后iframe或者frame引用一下我们的子站点照样可以正常访问，于是我想到要用主站点和子站点通信，然后发个token之类的东西。于是查到了window.postMessage()这个方法，它用于安全地实现跨源通信。关于它的文档可以查阅mdn，这里就不放链接了，然后我发现我们可以通过判断消息的orgin来判断消息是不是主站点发过来的，连token都省了。

        以下是代码实现，首先是主站点发出消息:

<script>
    const test_iframe=document.getElementById("iframe1");
    const iframe_win=test_iframe.contentWindow;
    console.log(iframe_win);
    window.onload=function () {
        iframe_win.postMessage({token: '6117c5f779c0a'}, "http://localhost:9528");
    }
</script>

        然后是子站点用一个window.addEventListener(type,listener)来监听消息，判断是否显示路由组件：      

<template>
  <div id="app">
    <router-view v-if="display" />
    <h2 v-else>you are forbidden to visit this page</h2>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return { display: false }
  },
  mounted() {
    window.addEventListener('message', event => {
      const k = event.origin || event.originalEvent.origin
      console.log(event.data, k)
      if (k === 'http://localhost:8080') {
        this.display = true
      }
    })
  }
}
</script>

        当然，此方法最后被我们leader否了，原因是在前端实现限制访问并不可靠，因为资源（包含关键数据）已经被发到前端再限制就晚了，最好的方法是限制条件不满足，后端就不发送数据，所以安全机制最好做在后端，例如在url里加一个token和时间戳，然后只有我们的主站点可以根据利用时间戳生成token的方法生成一个合法的token。但是对于防止小白把url拷出去访问，此方法有一定的意义，而且只用前端实现，也较为方便。

        当我们只需要在前端限制访问，而不需要作为安全机制的情况下，此方法有一定的借鉴意义。