Browser Extension - maintain login auth session across multiple domains

Question

Had to ask this question as I couldn't find the correct way of asking Google.

I am building a browser extension that requires the user to login using his/her credentials.

Lets keep the OAuth2 way aside for a moment there. After logging in, I am storing the JWT token received from the server in the local storage.

Now when the user navigates to another website, the extension does not have access to the stored local storage data due to cross domain access restriction.

I would like to know if there is any way to maintain the session across multiple domain. Can't ask the user to keep on logging in for every other site, he/she navigates to.

Anywhere else we can store the token to make it accessible everywhere?

Edit:

1. For the storage via content script, have used chrome.storage.local.
2. On page load, the content script sets the value from the chrome.storage.local into window.localStorage, if any.
3. An iframe is embedded into the web page. Display none by default. Iframe does not have any URL set.
4. Then User clicks on the browser Action button, the iframe is displayed.
5. User enter the login credentials. These are captured by the script file loaded in the head section of that iframe.
6. Now on submit, AJAX call is made and then on its success, stores the JWT token in the storage via window.localStorage.

Here, I also want to store the same token in the chrome.storage.local so that when the page is refresh or navigated to another domain, the Step 2 from above will execute and set the window.localStorage with the same token as the previous one has. This way, user is logged in already.

Anything wrong with the above? If not, then how to send the token from the iframe to the content or background script?

Answer 1

I would use a background script. Therefore add

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

to your manifest.json.

Basically a background script is like an extra browser window instance, just running in the background concurrent to all active sites. Here you can find an explanation how to send messages between your active sites (content script) and the background script of your application: https://developer.chrome.com/extensions/messaging

Explaining all of this goes beyond the scope of this answer.

Basically you are interested in the "Long-lived connections" section. You should first establish a connection between your content script and your background script. If an event (like login) occures in the content script you can use the connection to notify the background script or vice versa.

In your background script you have an object chrome.store.local, which basically is the same as your local storage. There you can save your JWT.

Via the message passing you can persist the JWT in the background script and access it (when you navigate) through the message system in every window, and therefore it is domain independent. Certainly you can also check if the domain is the right one in your content script.

EDIT:

As I understand your question, your problem is to get the token out of the iframe. I am not sure how your authentication in the iframe works, but lets assume it is a form.

Then you can access the DOM of the iframe via:

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

If you are not the creator of the iframe you should probably wrap the onsubmit function, by something like this:

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

Otherwise you can just delegate the event to your background / content script. Your background script can than do the authentication.

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

Here the authenticate_background sends the arguments to the background script. Keep in mind that you cannot send dom elements to the background script. Therefore you first must serialize the arguments.

In general I do not like the approach of using an iframe, but if you have a given authentication provider this could be the only viable option. Also there might be a more elegant way than wrapping the onsubmit function. Maybe the script running in the iframe has a special mechanism (callback) where you can register your authentication.