google-chrome - 浏览器扩展 - 维护跨多个域的登录身份验证 session

Question

不得不问这个问题，因为我找不到正确的 Google 询问方式。

我正在构建一个浏览器扩展，要求用户使用他/她的凭据登录。

让我们暂时搁置 OAuth2。登录后，我将从服务器接收到的 JWT token 存储在本地存储中。

现在当用户导航到另一个网站时，由于跨域访问限制，扩展程序无法访问存储的本地存储数据。

我想知道是否有任何方法可以跨多个域维护 session 。不能要求用户继续登录他/她导航到的每个其他站点。

我们可以在其他任何地方存储 token 以使其随处可用？

编辑:

1. 对于通过内容脚本进行存储，使用了 chrome.storage.local。
2. 在页面加载时，内容脚本将 chrome.storage.local 中的值设置为 window.localStorage(如果有)。
3. 网页中嵌入了 iframe。默认不显示。 iframe 没有设置任何 URL。
4. 然后用户点击浏览器的操作按钮，显示 iframe。
5. 用户输入登录凭据。这些由加载到该 iframe 的头部部分的脚本文件捕获。
6. 现在在提交时进行 AJAX 调用，然后在调用成功时通过 window.localStorage 将 JWT token 存储在存储中。

在这里，我还想在 chrome.storage.local 中存储相同的 token ，这样当页面刷新或导航到另一个域时，第 2 步从上面将执行并设置 window.localStorage 与前一个具有相同的 token 。这样，用户就已经登录了。

以上有什么问题吗？如果不是，那么如何将 token 从 iframe 发送到 content 或 background 脚本？

Answer 1

我会使用后台脚本。 因此添加

"background": {
    "scripts": [ "background.bundle.js" ],
},

到您的 manifest.json。

基本上后台脚本就像一个额外的浏览器窗口实例， 只是在后台与所有事件站点同时运行。 在这里，您可以找到有关如何在事件站点(内容脚本)和应用程序的后台脚本之间发送消息的说明: https://developer.chrome.com/extensions/messaging

解释所有这些超出了这个答案的范围。

基本上您对“长期连接”部分感兴趣。 您应该首先在内容脚本和后台脚本之间建立连接。如果内容脚本中发生事件(如登录)，您可以使用连接通知后台脚本或 反之亦然。

在您的后台脚本中，您有一个对象 chrome.store.local，它基本上与您的本地存储相同。您可以在那里保存您的 JWT。

通过消息传递，您可以将 JWT 保留在后台脚本中，并通过每个窗口中的消息系统访问它(当您导航时)，因此它是域独立的。 当然，您也可以检查您的内容脚本中的域名是否正确。

编辑:

据我了解您的问题，您的问题是从 iframe 中获取 token 。我不确定您在 iframe 中的身份验证是如何工作的， 但让我们假设它是一种形式。

然后您可以通过以下方式访问 iframe 的 DOM:

my_iframe.contentWindow.document
      .getElementById("myForm")
      .onsubmit = function() { /* todo */ }

如果您不是 iframe 的创建者，您可能应该换行 onsubmit 函数，像这样:

var my_form = my_iframe.contentWindow.document
      .getElementById("myForm")
var old_handler = my_form.onsubmit
my_form.onsubmit = function() {
    /* todo */
    if(old_handler != undefined) {
        var result = old_handler.apply(this, arguments)
    }
    /* todo (maybe send to background) */
}

否则，您可以将事件委托(delegate)给您的背景/内容脚本。您的后台脚本可以进行身份​​验证。

var my_form = my_iframe.contentWindow.document
      .getElementById("myForm")
      .onsubmit = function() {
           var result = authenticate_background(arguments)
       }

此处 authenticate_background 将参数发送到后台脚本。 请记住，您不能将 dom 元素发送到后台脚本。 因此，您首先必须序列化参数。

一般来说，我不喜欢使用 iframe 的方法， 但是如果你有一个给定的身份验证提供者，这可能是唯一的 切实可行的选项。也可能有比包装更优雅的方式 提交功能。也许在 iframe 中运行的脚本有 一种特殊的机制(回调)，您可以在其中注册您的身份验证。