将身份验证传递到其他域iframe

Question

我必须使用要求完全相同验证的不同应用程序，并且我试图将本地存储中的身份验证信息从一个应用程序传递到另一个应用程序，而无需用户两次登录。我正在尝试使用以下指南btu我不确定如何进行操作：

https://levelup.gitconnected.com/share-localstorage-sessionstorage-between-different-domains-eb07581e9384

这是我想传递给Iframe的信息：

token: 1234567890abcdef
user: someUserName
expires: 987654321

我的组件如下所示：

<template>
    <v-container grid-list-md text-xs-center>
      <v-content>
    <div>
      <ToolBar/>
    </div>
      <vue-friendly-iframe id="frame" name="frame" src="http://localhost:8081"></vue-friendly-iframe>
    </v-container>

</template>

<script>

import ToolBar from '@/components/component/ToolBar'

  const domains = [
    "http://localhost:8080",
    "http://localhost:8081"
  ]

  export default {

    name: 'Dashboard',

      components: {
        ToolBar
    },

    data () {
      return {
        //
      }
    },

  }
</script>

不确定在这里如何进行

Answer 1

  

TLDR：确实没有完美的解决方案。

话虽如此，您可以采取几种方法。

使用反向代理

如@David所建议，请使用Nginx或HAPorxy之类的反向代理来服务来自同一域-protocol://host:port的两个应用程序。这三样都应该相等。

使用Cookie代替LocalStorage

如果您使用Cookie而不是LocalStorage，则主机端口不会参与确定站点策略。因此，在同一主机上运行但端口不同的两个应用程序将共享cookie，而无需进行任何额外的工作。为了保护cookie，请使用仅HTTP的cookie，即相同站点的cookie。

使用URL共享-仅IFrame

如果您使用的是iFrame，则可以使用URL共享令牌。当外部窗口加载iFrame时，通过http://localhost:8081/somepage#token=1234

之类的哈希发送此信息

使用哈希将允许页面将数据发送到内部页面，而无需通过有线发送。

使用window.postMessage-仅IFrame

使用window.postMessage，您可以简单地将所需数据传递到内部窗口/ iFrame。只要控制两个端点，就可以轻松进行跨域消息发送。

最后，这实际上取决于您的安全要求，易于维护等。