Protego: Revolutionizing Data ownership

Protego

Take control and protect what really matters.

Every time we browse social media, shop in an online store, or simply just visit a webpage, our data is being sent to third-party companies where it could be sold then used to track and create a profile of who you are. These companies might just know you better than you know yourself. We decided that taking control of your data and being able to keep an eye on where it is being sent and how it is being used is an important part of technology today.

What is Protego?

Protego is a privacy-forward Chrome Extension that allows users to monitor where their data is being sent and how it is being used. Our application securely monitors network traffic and intercepts it in-flight. Then, we decode raw bytes of the payload or request body, and using a data processing protocol we are able to determine whether or not it contains information that the end user may deem sensitive. The user can opt-in to be notified instantly via push notification, SMS message, or even by email. Furthermore, users can whitelist and blacklist domains they want to allow and disable Protego to analyze. Similar to a firewall or a DNS sinkhole, we are able to capture network data for the benefit of our users. All userdata is stored locally, as to prevent any complication or risk exposure. Lastly, our users are able to submit automated data erasure requests to domains! This enables them to take control of their data and gives them complete control over the assets they own.

Features

  • Monitor specifically what data is being sent to companies
  • Specify the data that is important to you
  • Log the websites and companies that are using your data
  • Whitelist and blacklist trusted or untrusted domains.
  • Get alerted via SMS or Email whenever your data is being sent over the internet
  • Easily request removal of data from companies.
  • Understand where their sensitive data is being sent.
  • Analyze and follow their footprints around the internet.
  • Explore how they are being tracked by analytics companies and advertising companies, and more.
  • Instantly receive push notifications in-browser alerting the user that their data was transferred to a server or domain.
  • Export their userdata in CSV or JSON format.
  • Act as a DNS sinkhole (Pi-Hole) at the browser level, listening to network traffic and picking out the malicious actors and the payloads that contain your information.

Tech

Protego is built using:

  • Figma - User Experience/User Interface related construction
  • Adobe XD (Experimental Design) - Perfect application to create our prototypes and export our assets.
  • Google Chrome API (webRequest, tab querying, message passing)
  • JavaScript - The backend, server, and some front-end interaction and animations are created with Javascript.
  • HTML & CSS - The front end was created using HTML and CSS, with no UI framework.
  • Express - Serverside communication was done via the implementation of Express. We used rate limiting middleware to prevent malicious attacks as would occur in the real world. In addition, we created and managed various API endpoints.
  • Twilio - Twilio provided a great service for allowing us to automate the forwarding and sending of SMS notifications and alerts to our users. It's a scalable platform that would allow our application to thrive in the real world.
  • Nodemailer - Nodemailer was fantastic for us, being able to automate many email messages to end users. We used their Gmail client, which was reliable and easy to understand.
  • jQuery - jQuery enabled us to setup different animations and interact with the DOM easily.

The Development Process

We created the idea of Protego after thinking about the issues that the modern technological world is facing, and realized that privacy was an increasing issue. Losing your privacy is losing your rights, even if your actual identity might not be attached, though in most cases it actually is. We created a flow chart of what the program would need to do, and planned out the tech stacks needed to achieve what we wanted. Flowchart A design of the UI was also made using Adobe Xd. This was a very time consuming process, but it helped a lot in the actual coding process. During this process, we also worked on a few modules in our server, including the Twilio API and Nodemailer module.

UI UI UI UI After finishing our plans and outlining what needed to be done, the coding begun. We faced many issues, especially over designing and finishing a UI that was this extensive, and also needing to connect the tech stacks together. We managed by using an efficient workflow with Github, and spending a few hours into the night to work on it. Communication was done over Discord, where we were also able to share our screens with each other, as well as bounce ideas over voice chat. Our entire team is based in the United States, so it was fairly easy to communicate with each other throughout the duration of the hackathon, not to mention most of us reside in the same city!

End UI The development of the extension was done on the second day, with UI design also continuing. After creating the first page, the rest were easier. The actual request interceptor was created with our knowledge in web requests and extensions. Connecting to our server we made previously was also done. We faced many bugs, but eventually got through it all.

Inspiration

As all of the members of our team have work experience at their own or other companies, we were inspired to create something that felt modern and fit the requirements of a modern-world application. We utilized Adobe Experimental Design and Figma in order to create the user interface you can view in this post.

What we learned

We learned a lot about UI/UX design along the way, as well as connecting the stacks and creating Chrome Extensions. It was a long process, but we learned a lot along the way, solving many problems and squashing a lot of bugs. We also learned that great things take time to build, and at times throughout our development process, we were starting to believe that we had set out to achieve something too unrealistic -- we found that our passion to create and explore empowered us to be able to complete our project, despite starting only 20 hours before the deadline.

Future Endeavors

Although we came up with this project just yesterday, we feel that it could be a viable business idea. Our peers and us are heavily considering developing this idea as an actual product. We'll be sure to update this post if we ever do so.

Installation

Protego is easily installed by importing the code into the developer panel at chrome://extensions/ ~ although we would have liked to have published it onto the Chrome Webstore, there was simply not enough time during this event for us to do so.

Conclusion

In our modern society, technology rapidly improves and changes faster than anything else. It's critical that user data is protected and disclosed solely to those that it belongs to and trusted organizations and companies. We believe that the line between whitehat tech and blackhat tech lies only in the execution of an idea. Where bad actors may conduct MITM attacks by rerouting network traffic, we use virtually the same technology in order to protect end users. Although many stores and websites have implemented cookie notices and policies under GDPR and similar legislation, it is reported that most sites are still non-GDPR-compliant. This indicates that a large majority of internet users across the globe are being tracked without their consent or knowledge by a plethora of companies and organizations.

There must be more transparency when it comes to where our information goes, and what is being done with it. We predict a heavy increase and rise in data erasure and removal services within the next ten years, as the internet continues to exponentially grow not only in size but in terms of how dangerous it can be.

We pride ourselves on coming up with this idea without initial inspiration from other products on the market or competition. We're extremely happy that we were able to make this project our brain child over the course of the 24 hours we spent on it. Having come up with the idea ourselves and studying the potential implications if released to modern society, we believe Protego is a viable business idea and one that has potential to succeed in the real world and as an enterprise solution as well. We predict a product similar to our idea will be implemented by a company in the near future, if not one created by our team, as data privacy is such a hot topic and should continue to be one as technology continues to develop. As of our knowledge, nobody has built anything similar to our idea in the current market, which we take a ton of pride in (if you haven't noticed).

In our opinion, are many projects out there that are technically impressive, but not many that have the type of potential benefits on society that we believe ours could potentially have. Not to mention, the build we produced this past weekend was a simple prototype, if it is to be considered for a real product. We would rewrite the entire codebase and plan things out, tinkering with every last detail. Technically impressive does not always translate to applicable in the real-world, although they are great achievements. Not to say our project wasn't impressive in the least bit, it's just that -- we would have loved for our application and system to be even more technically impressive, by incorporating statistics or ML, tons of more functionality, and an even smoother UX. However, we were tasked with a ton, and honestly, we are proud that we were able to even complete the checklist we had set before us. You really cannot do it all, and we had to settle for a balance. You already see products that are in a similar niche, such as NextDNS, taking the web by storm. We believe our project could be extremely beneficial to users all across the world, and would pave the path for a more safe and secure web.

Empowering the citizens of the internet. We are Protego.

Thanks for reading our project writeup & huge shoutout to TeenHacksLI,

The Protego Team

UPDATE:

Andy has recorded an audio recording that talks more about why we chose to create Protego and how it applies to the real world. He did not, in fact, create a script for it so it is a bit wordy and disorganized at times, although we hope you enjoy.

We've also added 2 of our team members that were asleep or away for most of the hackathon, however still contributed to our project! Ian helped design some of the serverside structure; and Matthew was able to provide us with intellectual insight from his experience working at real-world companies, despite being busy in a different state for almost the entirety of the event.

Why We Made Protego | Audio

+ 7 more
Share this project:

Updates