Posted in 2017, Lightbeam, Outreachy, Random

Lightbeam – Behind the scenes

It’s more than 2 weeks now. I haven’t had the time to write anything down. So here’s a quick post on what’s happening!

San Fransisco – Mozilla All Hands 2017

Before

The week of June 26 – 30 was Mozilla All Hands 2017 at San Fransisco. It was my first time into the United States and I was pretty excited about this trip. After a tiring 11 + 3 hour long haul flight, when I presented my Mozilla invitation letter at the immigration, the border security officer at the SFO airport was excited to find out that I too was attending the All Hands. It appeared to me that he already processed other fellow attendees and he knew about it. His cheerfulness made me forget my tiredness and I had a warm welcome into the city. With the kind of ongoing news and rules about US airport security, I was too paranoid. But everything went smooth, from gaining B1 visa, carrying laptop in hand baggage and the security clearance itself.

During

The All Hands itself was a great experience. I and Bianca came up with a timeline of the next tasks that we could work on for until the internship period. Our main focus is to improve the graph performance. The idea is to use canvas instead of SVG. Here is an article I have written why canvas is a better choice.

After

I did a bit of sight-seeing at SFO via the big-bus tour.

One week at SFO was great. I wish to go back and explore more of the city at some other time.

Berlin – Home, away from home

Store

store is an integral component of Lightbeam. We use asynchronous message passing for communications between the background and page scripts. Our mentor Jonathan helped us a lot with code improvements on this store.

Visualisations

28039210-b72434a8-65c1-11e7-932f-63a725a4438e
Lightbeam graph using D3 force layout
28042023-6cee9a36-6580-11e7-8de5-5089702ae68c
Node overlap/colliding bug

I have used D3 in the past, but D3’s force layout algorithm is new to me. We are able to draw the Lightbeam graph using this algorithm, but there are so many more things to learn. I am sure, over the coming weeks our graph would see significant improvements.

This week I am working on to fix the node overlap/colliding issue and to get a canvas prototype for D3’s force layout.

Quite exciting times with Lightbeam 🙂

Posted in 2017, Lightbeam, Outreachy

Lightbeam – ‘tale of 2 stores’

Thanks to Bianca, my fellow Outreachy-Lightbeam project partner for coining the above title in her blog and asking me questions to explain about the bug(PR) I recently fixed for Lightbeam. I  started explaining her last evening via quick diagrams and I already had an idea to make my next blog post colourful 😉

I have been inspired by Lin Clark’s code cartoons and Mariko Kosaka who always draw and make technical reading fun! Here is an attempt to write a post and explain Lightbeam’s store architecture via diagrams 🙂

To revamp Lightbeam into a web extension we decided to follow the following architecture:

20170623_125927

A web extension consists of a collection of files and we employed the following directory structure to achieve the above architecture:

20170623_125810

We were able to chalk out an MVP soon, everything behaved as expected, until we found this bug.

  • Open Lightbeam
  • Open console
  • Clear the storage manually through the console: browser.storage.local.remove('websites').then(()=>console.log('removed')).catch(err=>console.log(err))
  • Also set store._websites=null manually through the console
  • Refresh the page – graph disappears
  • Refresh the page again, graph appears with old values

Thanks to Jonathan for pointing out that there were two store instances created and thus began – ‘tale of 2 stores’.

Following was the code implementation to achieve the above architecture:

The problem with this approach was that store.js file was loaded from two different places and that’s how we ended up having two store instances.

In other words, this was the problem:

20170623_130426

Now to debug the above specified bug:

  • capture.js had one store instance because of store.js loaded via background script
  • lightbeam.js had another store instance because of store.js loaded via the script tag
  • index.html page was loaded and lightbeam.js got the required websites to display via getAll() from it’s store instance
  • Next, web extension storage was manually cleared via browser.storage.local.remove and store._websites was explicitly set to null
    • in the first page load, there was nothing to display because the getAll() returned nothing from it’s store instance (because of the above manual deletion)
    • on second page load, capture.js had done a setFirstParty() call to it’s store instance which in turn wrote to the browser.storage.local.set
      • capture.js is triggered when a tab (re)loads
      • capture.js‘s store instance had its copy of _websites already populated (when the manual store._websites=null was done, it was done on lightbeam’s store instance) and setFirstParty() used this already populated _websites value and wrote to the browser.storage.local.set
  • This is how the visualisations appeared back on the second page load

To fix this bug, we now have storeChild.js which acts as an interface, or is the only point to talk to the background store.js. With the child and parent architecture, the parent will always be in charge of when the write happens and so will serialise the writes which will behave like a locking database.

20170623_130453

The page script storeChild.js talks to the background script store.js via message passing.

Posted in 2017, Lightbeam, Outreachy

Lightbeam 2.0 – MVP

It’s been 4 weeks now, since we started working on Lightbeam 2.0. And we have an MVP!

Here are my earlier posts on Outreachy and Lightbeam:

The first milestone in this internship is this initial MVP. Every time, I and Bianca went astray from this milestone, we had our mentor Jonathan to guide and help us focus towards this direction.

Here is the summary of what’s been achieved so far:

Setup the basic web extension

lightbeam-setup-initial

The Backend

  • Setup the communication with the browser and capture the first & third party websites
  • Create the capture & viz objects and the store API
    • capture object stores into the store object
    • viz object draws to a canvas
    • The lightbeam page code reads from the store, draws with the viz to a canvas in index.html

The Frontend

  • UI
    • In this initial MVP, the goal was to replicate the old UI. CSS Grid layout is used in the new codebase
  • Visualisations
    • While visualisations will be a major part in the post-MVP, in this initial MVP we are drawing small circles using the Canvas API to show the first and the third party websites

Overall, the whole team is very happy with the work and the progress done so far.

Presenting, Lightbeam 2.0

Screen Shot 2017-06-18 at 18.46.11

 

Posted in 2017, Lightbeam, Outreachy

Lightbeam – Q & A

The Mozilla Learning Network rallies and connects leaders who want to advance the promise of the Internet for learning in a networked world. This is done by fuelling new approaches to digital learning through Mozilla Hives, Clubs and Gigabit cities.

As part of the Internet Health Basics learning activity, there is a module on Privacy and Security and there is a chapter on tracking cookies using Lightbeam.

The objective of this course is to:

  • Understand and explain cookies and how they track users’ Web browsing.
  • Understand and use online tools such as Lightbeam to monitor online tracking.
  • Reflect on distinguishing between appropriate and invasive uses of tracking.

My mentor at Outreachy – Lightbeam, Luke Crouch, conducts web literacy classes at the Tulsa Library. Recently, he conducted a session on Lightbeam and below is the summary of the answers from the questionnaire filled by the attendees.

Q: Have you ever used a tool like Lightbeam before?

  • Turned off the cookies button
  • OpenDNS which shows domains contacted

Q: If you had to summarise what Lightbeam does, what would you say?

  • Adds to the awareness of how little privacy we have
  • Informs users of tracking activity and who is tracking
  • Easy to view a centralised map of all cookie connections encountered during a browsing session
  • Visual display of Internet locations contacted
  • Lists your cookies in a graph
  • Visualisation tool for showing links between cookies and sites

Q: Was there anything that you found especially valuable? 

  • Graph was valuable along with link identification by colour.
  • Visual of the volume of the connection activity was interesting
  • Good to see logos
  • An eye opener

Q: Was there anything that you found especially confusing?

  • I would prefer the ability to set the graph size
  • Coloured lines were bit confusing

Q: Would you use Lightbeam again?

  • Yes
  • No
  • Maybe

Q: What habits can you develop – and what strategies and tools can you use – to prevent yourself from being followed online?

  • Use private browsing with tracking protection
  • Delete cookies
  • Clear the history
  • Incognito mode

Q: How might you learn more about online privacy? What would you search for?

  • Wouldn’t try to learn online because I don’t trust a lot of what’s out there. I learned from reading a book ‘I know who you are and know what you did
  • Search for privacy and legislative actions. Browse computer science and technology online reports and magazines.
  • Search for online privacy best practices
  • Go to the Tulsa library class 🙂

The above Q & A sheds light on how users find Lightbeam to be an eye opener in the web privacy space. This survey is also useful for us to improve the current UI/UX issues.

The existing Firefox addon will be revamped using web extensions during the course of my Outreachy internship. If you haven’t tried Lightbeam yet, you can instal this Firefox addon and leave us your feedback.

It’s time to make the Internet healthy 🙂

Posted in 2017, Lightbeam, Outreachy

Lightbeam – why & what

Lightbeam is a key tool for Mozilla to educate the public about privacy.

In this blog post, you will know why I chose Lightbeam and what does it do.

As I was browsing through the Outreachy project list, Lightbeam caught my attention for the following reasons:

  • front-end web development (all things JavaScript)
  • visualisations (D3.js)
  • a project from Mozilla (healthy, open and accessible Internet for all people)

But I was not sure about the following:

  • web privacy
  • security engineering

JavaScript topped the list and I decided to give it a try. I must say, I am now very cautious about the online third party trackers and care for web privacy and security.

The key part of this project (internship) is to convert the existing Firefox add-on to a web extension and explore simpler ways to convey complex privacy and security concepts to all  Firefox users.

Web security & privacy are vast topics  and after playing around with a few keywords, I found these two interesting papers online:

A healthy internet is secure and private. While web tracking isn’t 100% evil (personal data can make your browsing more efficient; cookies can help your favourite websites stay in business), its workings remain poorly understood. Using interactive visualisations, Lightbeam’s main goal is to show web tracking, aka, show the first and third party sites you interact with on the Web.

Your personal information is valuable and it’s your right to know what data is being collected about you – your age, income, family’s ages and income, medical history, dietary habits, favourite web sites, your birthday…the list goes on. The trick is in taking this data and shacking up with third parties to help them come up with new ways to convince you to spend money, sign up for services, and give up more information.  It would be fine if you decided to give up this information for a tangible benefit, but you may never see a benefit aside from an ad, and no one’s including you in the decision.

One key area Lightbeam can help you in making the difference is in user control – deciding who can collect your data.

Lightbeam is your guide to help you surf the web while keeping your privacy intact.