将身份验证传递给不同的域 iframe

Question

我必须使用需要完全相同身份验证的不同应用程序，并且我正在尝试将我的身份验证信息从 localStorage 从一个应用程序传递到另一个应用程序，而无需用户登录两次。我正在尝试使用以下指南，但我不确定如何继续：

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。只要控制两个端点，就可以轻松实现跨域消息发送。

最后，这真的取决于您的安全要求、易于维护等。