How does this bookmark allow you to stay on this site?

Question

I met the Evernote booklet and wondered how it worked.

You can simply drag it to your bookmark and go to any web page, click on this bookmarklet, and it will first ask you to log in. All this I have already done and I know how it works.

The bit that I don’t understand is that when you log in, they authenticate you and allow you to send materials (in this case, the URL of the site, etc.). When you are done, the bookmarklet, which places a small overlay on the page you are viewing, will disappear.

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

I see that they use iFrame when their bookmarklet loads an overlay onto a page - but do they set cookies or something else? If so, is it safe? Anyone can change the values? Or they use some kind of private / public key system.

Btw, I would like to play this bookmark using PHP / Javascript (possibly jQuery). I would appreciate it if someone could help me understand how they do it or point me to the appropriate tutorials.

Thanks to everyone for any help.

Answer 1

To begin with, here is the code that executes the bookmarklet:

(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 he does is relatively simple. It tries to grab the script from the Evernote website and adds a timestamp to the request so that it always retrieves a new copy. If this succeeds, a bunch of JavaScript is added to the page, which builds an iframe from which all Evernote functionality is called, and the iframe can then use standard cookies, etc., to make sure you are logged in and then process the request.

The catch block, just in case a dynamic script download fails, as a result of which you are redirected to the Evernote website, therefore (I assume) that it can clip the content from there.

To answer a specific question about how you are still logged in, you are still logged in because your browser now has session cookies for the Evernote website (www.evernote.com), so when the iframe opens on the second site, these cookies come with it, and Evernote acknowledges that you are logged in. The use of cookies is pretty much the standard for sessions on the web, so they don't do anything special here, and I'm sure you can look for SOs for security issues related to cookie sessions.

The main thing is that the iframe is essentially like opening a separate window, except that it allows you to transfer some limited data to the base page in the iframe so that it knows which website you are on.

Hope this helps.

Answer 2

They are probably using cookies. Most likely, they open an iframe from JavaScript to a php page on their site, then the site looks for a cookie to log in, if there is one, the site retrieves user information and does its job.

Just be careful, you need to check that the cookie was not created by the user in order to trick the site. I would save a random string in a cookie as well as in the database (in the user table). Create a random string whenever a user logs in. When a user tries to use the bookmarklet, compare the two lines and allow access if they are equal, if they are not, delete cookies and ask the user to log in. This allows you to make sure that the attacker cannot just create a cookie with the user ID and take over their account (the attacker will need a random line generated by every login that will be difficult to obtain). Also, set a cookie to delete when the browser session is over.

Hoping to help, Max