How to split the local storage token from my site to my WebExtension?

Question

I have a firefox / chrome WebExtension bookmark (using standard scripts popup, contentand background). On my api servers, there is a / login route that returns JSON Web Token and web applications that are stored in local storage. I have full control over the extension, api and web applications.

A barefoot way to do this is to log in via a popup window and save the auth token in background.js in the local WebExtension store. But I really would only like to ask the user to authenticate on my site and use the same auth for extension.

Is there any way to share auth token? I see that Pocket and many others are doing this, but I don’t know how to do it.

Answer 1

You can save the token as a cookie . Cookies work like localStorage, but in addition, they are also included by default in every HTTP request to the server. And here is the trick. The Chrome extension can access HTTP requests using the webRequestAPI. This way, he can look into the request headers and find out your cookies. Having this token as a cookie makes it accessible for extension.

, , HTTP- , ? , . ajax .

, , :

:

"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 Policiy. - iframe , wOxxOm , , CSP whitelisting -. . ,

EDIT:

, : iframes, , . ( ), CSP - .

iframe, . window.postMessage API

, , :

:

// 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);
}

EDIT:

, - iframe, , X-frame-options . , , URL- .

Answer 2

, " T T- W", :

cookie - auth, .

script

browser.cookie.get({name: 'https://website-W.com', name: 'auth_token'})
.then(function(cookie) {
     console.log(cookie); // {..., value: "bearer-token-value" }
     var token = cookie.value;
     // send message to background script to store cookie globally
     // continue rendering successfully
})
.catch(function(error) {
    console.error(error);
    // handle not logged in
})