As a cybersecurity enthusiast, I wanted to make a project that looks like a "sci-fi" movie but is also functional and helpful for the users.
What it does
TraceIT allows you to visualize all the web requests happening on your browser in a 3d interactive earth globe. A request could either be classified safe, tracking, or malicious; and you could visually see where the request originated from (your machine's location) and where it is headed (server's location). If a request is believed to be "tracking" or "malicious", it is flagged in yellow or red color to better identify it, and it provides you with reasons to support the claim. Lastly, I integrated Gemini's API so that it is possible to explain the results, and the reasons behind them.
How we built it
The frontend is built with HTML, CSS, and Javascript, so that I could use the three.js library, which creates a 3d space and makes that interactiveness possible in a web application. The earth is basically a sphere, and the countries are presented in hundreds of 3d boxes, where the coordinates are extracted from a .geojson file. All the requests from the user's browser are sent from an extension, which then is processed and filtered on the server.js of the web app. To determine if a website is "tracking" you, I used a list from EasyPrivacy that has most known trackers that websites use. Additionally, it checks if the website has an SSL certificate, so that it can determine if it is dangerous or suspicious for the user. It also has checks such as suspicious domain names (.ru, .cn...).
Challenges we ran into
The thought of making this idea seemed impossible, because a web application (a website) can not access or view what the user is currently browsing, and what requests are being sent outside the current website. So I came up with the idea to make an extension, give it permissions to read all requests on the browser, and then I linked it with my website. It logs the requests and compare them against tracking websites, determine which website actually initiated those trackers, and then it sends a post request to the web application, which will be interpreted by the server.js and add the cyber line (visual request) with the arguments that it got.
Accomplishments that we're proud of
I always thought the idea of having a 3d interactive website was fascinating, and I never had the chance to do something similar. I'm proud that I actually initiated and made this idea tangible. As I am very interested in the cybersecurity field, I was excited to do something related to that, and luckily it turned out as expected.
What we learned
I learned that you have to be willing to go the extra mile to succeed. I travelled from Michigan just to attend this hackathon, and I don't regret any of the decision I made.
What's next for TraceIT
I'm excited to grow this project, it could have much more impactful features such as blocking tracking websites, identifying phishing websites, and much more!
Log in or sign up for Devpost to join the conversation.