How does this Bookmarklet allow you to stay signed into this site?

Question

Hello all,

I have come across Evernote's bookmarklet and was wondering how this worked.

You can just drag it to your bookmark and go to any webpage, click that bookmarklet and it will first ask you to login in. All this I have done already and know how it works.

The bit that I don't understand is that when you log in they authenticate you and allow you to submit stuff (in this case, a site url etc). When you are done the bookmarklet which placed a small overlay on the page you are viewing disappears.

When you go to a new tab and use the bookmarklet again you are still logged in! How?

I can see they are using an iFrame when their bookmarklet loads the overlay onto the page - but do they set cookies or something? If so, is this secure? Anyone can change the values? Or are they using some sort of private/public key system

Btw, I would like to replicate this Bookmarklet using PHP/Javascript(JQuery maybe). I would appreciate if anyone can help me understand how they do this or point me to relevant tutorials.

Thanks all for any help.

Answer 1

They are probably using cookies. They most likely open up an iframe, with JavaScript, to a php page on their site, then the site looks for a login cookie, if it is there, the site pulls the user info, and does its thing.

Just be careful, you need a way to verify that the cookie wasn't created by the user to trick the site. I would store a random string in a cookie, and also in the database (in the user table). Create the random string whenever the user logs in. When the user tries to use the bookmarklet, compare the two strings, and only allow access if they are equal, if they aren't, delete the cookies, and ask the user to login.. This makes sure an attacker can't just make a cookie with the user's ID and take over their account (the attacker would need the random string, generated each login, which would be hard to obtain).. Also, set the cookies to delete when the browser session is ended..

Hoped that helped, Max

Answer 2

For starters, here's the code the bookmarklet executes:

(function(){
    EN_CLIP_HOST = 'http://www.evernote.com';

try{
    var x = document.createElement('SCRIPT');
    x.type='text/javascript';
    x.src = EN_CLIP_HOST + '/public/bookmarkClipper.js?' + (new Date().getTime()/100000);

    document.getElementsByTagName('head')[0].appendChild(x);

} catch(e) {

    location.href = EN_CLIP_HOST + '/clip.action?url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title);
}

})();

What it does is relatively simple. It tries to grab a script from the Evernote site and adds a timestamp to the request so that it always pulls a fresh copy. If that succeeds, a bunch of JavaScript is added to the page which builds an iframe from which all of the Evernote functionality is exposed and the iframe can then used standard cookies, etc. to make sure you're logged in and then process your request.

The catch block is just in case the dynamic script loading fails, in which cause you're redirected to the Evernote site so (I'm guessing) that it can clip the content from there.

To answer the specific question of how you are still logged in, you're still logged in because your browser now has the session cookies for the Evernote site (www.evernote.com), so when the iframe opens up on the second site, those cookies go with it and Evernote recognizes that you're logged in. Using cookies is pretty much the standard for sessions on the web, so they're not doing anything special here and I'm sure you can search SO for the security issues surrounding cookie based sessions.

The main point is the iframe is essentially like having a separate window open, except that it allows some limited data to be passed by the base page to the iframe so it know what website you're on.

Hope that helps.