PhishGuard | Devpost

Website Frontpage
Extension UI
Highlighting Process
Post-analysis Pop-up

Inspiration

As concerned grandchildren and volunteers, we identified that many seniors have trouble identifying phishing (the act of impersonating trusted entities to receive personal or sensitive information) attacks online. To help protect our elders and others who may be less experienced with phishing attacks browse freely, we have developed PhishGuard.

What it does

PhishGuard is a simple and intuitive application that analyzes selected browser text and identifies malicious phishing content. To use the application, which is currently available in demo form as a Chrome Extension, a user must only open the extension from their hotbar and select the area of their window that they would like processed. A response is quickly displayed as a popup within the current window, which can either be closed or, in the case of positive recognition, contains an option to read more about protective action moving forward.

How we built it

We first began with a public Chrome Extension Boilerplate. As a team, we weren't familiar with React or Vite, so we had to undergo lots of challenging learning experiences to build our extension. Through scraping over hours of documentation on Chrome manifests, React tutorials, and TypeScript functionality, we were able to build a nice looking product using libraries like Bootstrap and IntersectionObserver API wrappers.

Challenges we ran into

Though not core to our application, one big challenge we faced was the development of an underwater flashlight feature on our website for further immersion into the phishing theme. CSS programming often results in brute force trial-and-error with divs misaligned, wrappers recursively within each other, and other hectic elements; this project proved no different. In particular, the integration of the radial gradient caused us difficulties, as the shadow effect used for the flashlight would often freeze or violently strobe the screen. After some group efforts and code rewriting, we solved the issue by manipulating relative and absolute positionings, translations, and developing efficient JavaScript mouse tracking.

Accomplishments that we're proud of

Through the development of PhishGuard we're incredibly proud of the accomplishments we've made along the way. Built on the latest chrome extension manifest, using TypeScript, React, Bootstrap,Node.js, Vite, and Cohere’s classification tool, our team was able to create a successful project. We are extremely proud of the heterogeneity of the tools we used to create a potentially incredibly useful application. Furthermore, our team's diverse skill set allowed for a unique collaboration method that emphasized our strengths, and covered our weaknesses. Overall, we are thoroughly proud of the creation we have been given the opportunity to make, and hope to further develop on PhishGuard moving forward.

What we learned

Though our group has various amounts of experience coding, we each tried to improve ourselves and take on something new beyond our comfort zones. This included the use of the Cohere API, JavaScript, Git and React. Beyond the coding itself, we tried to ensure a smooth weekend through long-term planning and organization of information using a Google Drive folder and the use of GitHub.

What's next for PhishGuard

The next step for PhishGuard is to extend its implementation to a full-scale desktop app, which could include moving from division-based area text scraping to true text recognition from images.