javascript - 如何将本地存储授权 token 从我的站点共享到我的 WebExtension？

Question

我有一个书签 firefox/chrome WebExtension(使用标准的 popup、content 和 background 脚本)。我的 api 服务器有一个/login 路由，它返回一个 JSON Web Token，Web 应用程序将其存储在其本地存储中。我可以完全控制扩展程序、api 和网络应用程序。

赤脚的方法是让用户通过弹出窗口登录并将 background.js 中的身份验证 token 保存到 WebExtension 的本地存储中。但我真的只想要求用户在我的网站上进行身份验证，并将相同的身份验证也应用于扩展。

有没有办法共享授权 token ？我看到 Pocket 和很多其他人这样做，但我不确定如何做。

Answer 1

您可以将 token 存储为 cookie。 Cookie 的工作方式与 localStorage 类似，但额外的是，它们还默认包含在对服务器的每个 HTTP 请求中。诀窍来了。 Chrome 扩展可以访问 HTTP 请求，使用 webRequest应用程序接口(interface)。因此它可以查看请求 header 并了解您的 cookie。将该网络 token 作为 cookie 使其可供扩展程序使用。

但是您仍然需要等待用户打开您的网站，让 HTTP 请求流动并准备好被窥视，对吧？并不真地。您可以直接从扩展程序发出 ajax 请求。

这里是为了说明整个事情是如何工作的:

list :

"permissions": [
          "webRequest",
          "webRequestBlocking",
          "*://*.my_site.com/*"
        ]

背景页:

function callback (details) {
    //
    token = func_extract_token_from_headers(details.requestHeaders);

    chrome.webRequest.onBeforeSendHeaders.removeListener(callback); 

    return {cancel: false} //     set to true to prevent the request 
                           //   from reaching  the server
}
chrome.webRequest.onBeforeSendHeaders.addListener (callback,
        {urls: ["http://www.my_site.com/*", "https://www.my_site.com/*"]},
        ["blocking", "requestHeaders"]);


var xurl = "https://www.my_site.com/";
var xhr = new XMLHttpRequest();
xhr.open("GET", xurl, true);
xhr.send();

我应该提一下，有一种更简洁的方法可以做到这一点，但由于 CSP--Content Secutiry Policy，它目前无法正常工作。正如 wOxxOm 在评论中提到的那样，在后台页面内的 iframe 中打开网站应该可行，并添加了网站的 CSP 白名单。这种方法还将避免提示用户输入凭据，并且会更简洁。不幸的是 not currently working

编辑:

抱歉，我最后的说法是错误的:打开外部页面的 iframe 在后台页面中被阻止。要在后台页面(或弹出窗口)中显示它，只需将 CSP 列入白名单——如下所示。

除了在 iframe 中打开页面的业务外，您还需要与其通信。这应该使用 window.postMessage 来完成接口(interface)

这里举例说明这一切应该如何结合在一起:

list :

// Whitelist your website
    "content_security_policy": "script-src 'self' https://my_site.com/; object-src 'self'"
// Have the background declared as html
  "background": { "page": "background.html"}

背景:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if(event.origin == "https://my_site.com"); //   you may want to check the 
                                             // origin to be your site 
  chrome.storage.storage.local.set({'auth_token': event.data});  // the token
}

iframe = document.createElement('iframe');
iframe.src = "https://my_site.com/";
// Have a div ready to place iframe in
document.getElementById('div').appendChild(iframe);

iframe.contentWindow.postMessage("give_token", "https://my_site.com")

网页:

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if(event.origin == "your_extension_id_aeiou12345");
     event.source.postMessage(''+localStorage.auth_token, event.origin);
}

编辑:

此外，要在 iframe 中显示网站，请确保 X-frame-options响应 header 未设置为阻止值。您可以将其删除，或将其设置为非阻塞值，或将扩展程序的网址列入白名单。