跨域 OAuth……如何得到响应？

Question

我正在创建一个 Chrome 扩展程序，它将与一个特定的流行网站进行交互。

它将 html 注入到添加新功能的站点中。 这些功能的一部分取决于登录的用户，为了获取登录的用户信息，我们需要使用本网站的 OAuth 身份验证 API 对扩展程序进行身份验证。

例如，假设流行的站点（显然我们不拥有）是www.github.com 。

当用户访问 www.github.com 时，我们的扩展程序会在站点上注入一个按钮，上面写着“与 GitHub 连接”。

当该按钮被点击时，Githubs OAuth API 会弹出一个弹出窗口，它会询问用户：“您想授予应用程序 XYZ 访问您的 GitHub 帐户的权限吗？” 是/否'。

一旦他们点击“是”，我们的扩展程序就通过了身份验证，现在可以使用 GitHub API 访问他们的用户名等信息，并将其直接注入 github.com 网站。

所有这一切都是我们希望它工作的方式，但问题是我们在当前窗口 ( www.github.com ) 和我们自己的服务器的弹出窗口 ( www.server.com ) 之间进行通信时遇到了很多困难。

在弹出窗口中发生的 Oauth 成功回调返回令牌，我们无法将其传送回主页，因为“协议、域和端口”不匹配。

从弹出的 oauth 成功窗口中捕获该令牌的最佳方法是什么，以便我们可以在位于另一个域上的扩展程序中使用此令牌？

Answer 1

以下如何：在身份验证流程的最后阶段，您可以重定向到server.com 。 由于您拥有server.com您可以在最后注入一个脚本，通过window.opener.postMessage将数据传递给扩展程序

例如，在server.com呈现的最终页面中：

window.opener.postMessage({"userhash": "abc1234567890"}, '*');

然后在扩展中的窗口注册一个事件监听器

window.addEventListener('message', function(e) {
  console.log(e.data);
});

这应该适用于 chrome 和 firefox。

Answer 2

也许您无法得到响应，因为 Chrome 具有“同源策略”。 https://en.wikipedia.org/wiki/Same-origin_policy

通常，您可以通过让 www.server.com 将 www.github.com 放在响应中的 Access-Control-Allow-Origin 标头中来解决这个问题。

另请参阅此问题的答案以获取示例： Access-Control-Allow-Origin 标头如何工作？