浏览器扩展-跨多个域维护登录身份验证会话

Question

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

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

让我们在那里暂时保留OAuth2方式。登录后，我将从服务器接收的JWT令牌存储在本地存储中。

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

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

我们可以在其他任何地方存储令牌以使其在任何地方都可以访问吗？

编辑：

1. 为了通过内容脚本进行存储，使用了chrome.storage.local。
2. 在页面加载时，内容脚本会从chrome.storage.local到window.localStorage（如果有）设置值。
3. iframe嵌入到网页中。默认情况下不显示任何内容。iframe没有设置任何网址。
4. 然后，用户单击浏览器的“操作”按钮，将显示iframe。
5. 用户输入登录凭证。这些是由该iframe头部加载的脚本文件捕获的。
6. 现在提交，进行AJAX调用，然后成功调用，通过将该JWT令牌存储在存储中window.localStorage。

在这里，我还想将相同的令牌存储在中，chrome.storage.local以便在刷新页面或导航到另一个域时，Step 2从上方执行并设置window.localStorage与上一个相同的令牌。这样，用户已经登录。

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

Answer 1

我会使用背景脚本。因此添加

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

到您的manifest.json。

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

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

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

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

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

编辑：

据我了解您的问题，您的问题是将令牌从iframe中取出。我不确定您在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) */
}

否则，您可以将事件委托给您的后台/内容脚本。您的后台脚本可以执行身份验证。

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

在这里authenticate_background将参数发送到后台脚本。请记住，您无法将dom元素发送到后台脚本。因此，您首先必须序列化参数。

通常，我不喜欢使用iframe的方法，但是如果您具有给定的身份验证提供程序，则这可能是唯一可行的选择。也可能有比包装onsubmit函数更优雅的方法。也许在iframe中运行的脚本具有一种特殊的机制（回调），您可以在其中注册身份验证。