URLinks

Know before you click.

Comment

Inspiration

With data being increasingly common in everything we do, we were inspired to create URLinks because of the increasing number of phishing attacks and malicious websites circulating throughout the internet. We built a website that provides visitors with information to protect themselves online and a real-time link scanner. Our goal was to make cybersecurity knowledge more accessible and to provide a simple, intuitive way to verify if a website is safe.

What it does

URLinks is a cybersecurity education and protection website. Our website includes two short interactive lessons that introduce users to the fundamentals of social engineering and web security. Additionally, URLinks features a live URL scanner that allows users to input any link to instantly check whether the site is classified as safe, phishing, malicious, or associated with unwanted software. The scanner uses Google's WebRisk API to perform real-time threat analysis with Geo.ipify to provide further insight to your website.

How we built it

  • Frontend: HTML, Javascript, Bootstrap CSS
  • Backend: Vercel, Firestore, Firebase, Google WebRisk API, Geo.ipify API, CORS proxy

The frontend of URLinks was built using HTML, JavaScript, and Bootstrap CSS for styling familiarity. The project's backend uses Vercel, which deploys the public website. We used Firestore in Firebase to store user data and remember their login information when they revisit the website. We integrated the Google WebRisk API through secure fetch calls and used a CORS proxy service to overcome browser restrictions and communicate with external APIs directly from our frontend. Lastly we used Geo.ipify’s API to source the IP and display more information.

Challenges we ran into

Time was our biggest challenge throughout this hackathon, especially with continuous ambitious ideas that we wouldn’t achieve fully in 48 hours. Given this, we focused more on the accessibility and functionality of our website, and with more time, our UI design would be more refined and visually pleasing. One major challenge we faced was handling CORS (Cross-Origin Resource Sharing) errors, since Google's WebRisk API does not natively allow frontend calls. We had to research and implement a CORS proxy solution to reroute our requests, making sure the build remained fast and responsive. Another significant challenge was that we were familiar with HTML, CSS, and JavaScript, but not with backend frameworks like Next.js. Because of this, we could not easily build a server-side backend to securely call the APIs that required protected keys. This challenge forced us to focus on purely frontend solutions, which made API integration much more difficult and limited which APIs we could use safely. Throughout development, we went through four different APIs before settling on WebRisk. Many APIs had heavy restrictions, required backend usage, or did not provide the real-time security scanning features we needed. Finding an API that supported frontend access, fit our requirements, and worked reliably under CORS limitations was a major hurdle. Finally, we also faced API quota limitations during testing, which forced us to optimize and carefully manage how often we called the WebRisk endpoint to avoid hitting our daily usage limits.

Accomplishments that we're proud of

We are proud that we successfully built and deployed a fully functional cybersecurity website with a live URL scanner powered by a real threat database. We are also proud of our modular and organized HTML file structure, collaborative development process with successful GitHub merges, and front-end design improvements. Most importantly, we are proud that URLinks not only works but also teaches and protects users simultaneously.

What we learned

Throughout this project, we learned how to integrate APIs securely within a frontend environment. We gained experience in handling CORS issues, setting up proxy routing, and managing API authentication. We also learned about real-time frontend rendering based on live API data and how crucial it is to design a clear and user-friendly UI in cybersecurity tools to build trust with users. Some of the smaller things we learned were basic git operations and collaboration in a group.

What's next for URLinks

Moving forward, we plan to expand the educational side of URLinks by adding more cybersecurity lessons aimed at beginners and non-technical audiences. We also hope to introduce a link history feature, allowing users to save and review their previous scans. Another goal is to integrate additional threat intelligence APIs (such as VirusTotal or IBM X-Force Exchange) to enhance detection accuracy. Finally, we envision developing a browser extension version of URLinks, enabling users to scan links instantly without leaving the page they are browsing.

Built With

Share this project:

Updates