29

Context

My HapiJS web application is currently using OAuth 2.0 to access Google APIs. Once a user authenticates in the app, the server generates a JSON Web Token (JWT) which is stored on the client and sent back in the Authorization header of subsequent requests.

What I would like to accomplish

I now would like to use the same steps (authorization + creation of a JWT) with my Google Chrome extension which syncs data back to the app via a REST endpoint.

Current Thoughts

My idea is to use the same OAuth authorization as I have in my application to generate a JWT and then to save this JWT into the Chrome extension. This JWT will then be passed with each request from my chrome extension to my application to validate the request.

Unfortunately, it seems that the Chrome extension is using its own authorization through the Chrome Identity API and won’t let me use the authentication process I had in mind.

The diagram below describes the steps I’m envisioning to get the JWT created on my application then saved on my chrome extension (and also points to where the problem lies): diagram

The Question

So my question is: Is there another or a better way to store a JWT created on my application to my Chrome extension?

Hope my explanation is clear enough

p u
  • 1,395
  • 1
  • 17
  • 30
Anita
  • 2,741
  • 27
  • 28
  • Have you tried `storage` API? https://developer.chrome.com/extensions/storage – Moin Nov 23 '15 at 16:00
  • Show the relevant code that tries to obtain JWT. – wOxxOm Nov 23 '15 at 16:14
  • Reproduction steps/sample app would be nice It's not clear to me if the issue is getting the JWT to the extension or getting the extension to use the JWT – Number 9 Nov 23 '15 at 18:12
  • 1
    chrome.identity.launchWebAuthFlow returns you the redirect url, which presumably has your JWT somewhere. – Steve Campbell Nov 23 '15 at 22:10
  • Please find the example of the code [here](https://github.com/FAC-GM/gm-magic/blob/05d3cb1f0e40938fa6fa6bd8d3ebcd3ed5a4a347/chrome-extension/browser_action/js/main.js#L19-L37) We are working on JWT issue on the authentication branch. – Anita Nov 24 '15 at 11:02
  • Add an `iframe` element to the popup, assign its `src` attribute to that url? – wOxxOm Nov 24 '15 at 12:19
  • If the only problem is your note in red in your diagram, then it can be done with chrome.tabs.create (https://developer.chrome.com/extensions/tabs#method-create). Please see my answer posted below. – Joseph Shih Feb 02 '16 at 04:53

4 Answers4

5

You can use your localStorage to save your jwt from the web app, then, if your extension runs on the same domain, you can access saved information from the localStorage through a content script, that gets injected in that page. You can communicate with your popup using the Message Passing API for Chrome extensions.

The problem with this approach comes with the fact that saving sensible information like user info (which is encoded in the jwt) is frowned upon due to security concerns.

Ideally, you should have a server which handles the authentication back and forth, saves the information and emits a session token for its clients, which then you can save in the localStorage if you wish.

Avram Tudor
  • 1,468
  • 12
  • 18
0

If you want your popup.html to contain a link to allow users to open (leading to OAuth Google in your model), you need more work than a simple anchor link.

You will need to add event listeners to the link and use chrome.tabs.create.

Here is a demo code:

popup.html

<html>
    <body>
        <span class="link" data-href="https://www.google.com">link</span>
        <span class="link" data-href="https://www.bing.com">link</span>
        <span class="link" data-href="https://www.yahoo.com">link</span>

        <script>

            //get all links
            var links = document.getElementsByClassName('link');

            //loop through each link
            for (var ii = 0, nn = links.length; ii < nn; ii++)
            {
                //add listener
                links[ii].addEventListener('click', function(e)
                {
                    //grab link
                    var url = this.getAttribute('data-href');

                    //open link in new tab using chrome.tabs.create method
                    chrome.tabs.create({url:url});
                });
            }
        </script>
    </body>
</html>
Joseph Shih
  • 1,244
  • 13
  • 25
-1

I think you could use localStorage (or a library that do the same but could work better for your code)

Without code, i can't do better for you bro, sorry

Rorp
  • 126
  • 1
  • 15
-2

Did you try to use localStorage?

You can save the token like:

localStorage.setItem('token', 'abcde')

and can retrieve

localStorage.getItem('token')

but the information will be lost if reloads the page.

Dan Santana
  • 27
  • 6
  • 1
    that's incorrect, localStorage is a persistence layer, so your info will always be preserved until you clear specifically clear it – Avram Tudor May 13 '19 at 07:05