🎣 Phishing Websites: When Web Development and Cybersecurity Come Together
Tags: webdev, cybersecurity, career, learning
Published: 2024-02-06 13:00:00

In the landscape of web development, practical experience often proves to be the most effective teacher. As well as in cybersecurity. 

And one intriguing method that aspiring developers can explore is the **ethical replication of existing websites** for educational purposes. This approach allows learners to gain hands-on experience, honing their skills in a real-world context.

## Emulating websites for educational purposes

Before delving into the technicalities, it's crucial to draw a clear distinction between ethical learning and malicious activities. Ethical website replication involves creating projects with the sole purpose of learning and skill development, rather than aiming to deceive or harm users. Or to be used in Red Team engagements, always with permission.

The benefits of hands-on experience in web development cannot be overstated. By replicating existing websites, learners gain insights into various aspects of web development, from frontend design to backend functionalities.

## What can you learn from emulating websites?

### Server-Side Aspects

Learning how to manage servers is a fundamental skill for any web developer. Ethical website replication provides an excellent opportunity to practice server management in a controlled and educational environment. Security practices should be implemented to protect these projects, even if they are solely for learning purposes.

### Database Exploration

Understanding database management is a crucial aspect of web development. Replicating data structures from existing websites provides learners with a practical understanding of how information is stored and retrieved. Implementing secure database practices should be a priority, even in educational environments.

### Forms and Data Handling

Web forms are ubiquitous in online applications, and learning how to create them and handle data is an essential skill. Ethical replication allows learners to practically apply their knowledge in creating forms and responsibly handling user data.

## Benefits of emulating websites

### Skill Enhancement and Portfolio Building

One of the significant advantages of ethical website replication is the enhancement of practical skills. By tackling real-world challenges, learners build a robust portfolio that showcases their capabilities. Employers often value hands-on experience, and including ethical replication projects in a portfolio demonstrates proficiency and initiative.

### Cybersecurity Awareness in Educational Projects

Incorporating ethical hacking principles into web development education enhances cybersecurity awareness. By understanding potential vulnerabilities and responsibly disclosing and fixing them in educational projects, learners contribute to a safer online environment. This dual focus on development and security is invaluable in today's interconnected digital landscape.

## Some examples I made that worked during my Red Team engagements

> **WARNING** 
>
> The following pages are **FAKE** pages hosted on my [website](https://amtzespinosa.github.io/). They are harmless **"phishing"** pages. They are showcased for educational purposes and they have no real functionality of logging any credentials.

### Sign in with Google

{% embed https://amtzespinosa.github.io/assets/phishing/signin-google/ %}

Click the Sign in with Google button and it will take you to the fake login page.

### WordPress Backdoor plugin download page

Extracted from a longer post published on my website: [WordPress Backdoor Plugin: A Complete Phishing Scheme](https://amtzespinosa.github.io/posts/wordpress-backdoor-plugin/).

Here you can see a fake website where you can download a "security patch" from WordPress plugins repository. But that plugin is actually a backdoor.

{% embed https://amtzespinosa.github.io/assets/phishing/wordpress-backdoor/index.html %}

### Captive portals: TP Link, Vodafone and Starbucks.

These pages can actually be used with the tool **Wifiphisher**. And here you can see how they look:

- [TP-Link](https://amtzespinosa.github.io/assets/phishing/wifiphisher/tp-link/html/)
- [Vodafone Firmware Update](https://amtzespinosa.github.io/assets/phishing/wifiphisher/vodafone/html/)
- [Starbucks](https://amtzespinosa.github.io/assets/phishing/wifiphisher/starbucks/)

I know, the **WordPress Security Patch** website and the **Vodafone Firmware Update** page are simple copy/paste. But still you can learn about form submissions, data handling, server management...

## Conclusion

Phishing websites, when approached ethically, become a unique intersection where web development and cybersecurity converge. The lessons learned from emulating phishing scenarios contribute to a deeper understanding of security challenges as well as web development.