Question

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

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.