phishguard-trainer - Open source phishing awareness trainer. Interactiv

项目说明

PhishGuard Trainer

> 🌐 También disponible en Español.

PhishGuard Trainer is a static, bilingual phishing awareness trainer built with HTML, CSS, and Ja. It helps learners practice spotting suspicious signals in realistic but fully fictional email and SMS scenarios.

<p align="center">
<img src="docs/demo-en.gif" alt="PhishGuard Trainer walkthrough: home, scenario selection, message analysis, and results" width="780">
</p>

Why it exists

The project is designed for defensi education. It does not use real brands, collect credentials, send emails or SMS messages, clone login pages, or store personal data.

Features

Preview

The first screen introduces the training flow, then learners choose a scenario, inspect a simulated message, select suspicious elements, and review a score with explanations.

Build CSS

Tailwind CSS is compiled at build time. After cloning, install de and generate the stylesheet:

Use npm run dev:css to rebuild automatically while editing.

The generated web/assets/css/tailwind.css is committed to the repository so the site can be ser a build step.

Run locally

No backend or runtime build step is required, but the project should be ser a static HTTP server from the web/ directory. Opening web/index.html directly from the filesystem can beha from a real static server.

Python:

Node.js:

Then open:

The language toggle stores the selected language in localStorage. Main page sections use hash anchors:

Run syntax checks and scoring tests before opening a PR:

For manual UI checks, use docs/QA.md. For scenario safety review, use docs/CONTENT_SAFETY.md. For open source credits, see docs/ACKNOWLEDGMENTS.md.

Project structure

Editing scenarios

Scenario content lives in:

Each scenario uses:

Each selectable element uses:

New scenarios should be fictional, defensive, and safe to publish. Prefer opening an issue before a large scenario PR, and review docs/CONTENT_SAFETY.md.

Scoring

Scoring is implemented in:

Formula:

The score is clamped between 0 and 100.

Current scenarios

Spanish / Colombia:

1. urgente de cuenta bancaria.
2. Mensaje de de tributaria.
3. Cuota de correo institucional.
4. Notificacion de comparendo pendiente.

English / United States:

1. Payroll request.
2. Package delivery fee notice.
3. MFA reset alert.
4. Unpaid toll payment notice.

Contributing and security

Please read CONTRIBUTING.md before proposing changes, especially new scenarios or user-facing content.

To report security issues, unsafe content, or misuse risks, follow SECURITY.md.

License

This project is licensed under the MIT License.

项目信息

开发语言：JavaScript

Star 数：3

技术要点

该项目属于防护思路方向的开源资源，代码结构清晰，适合安全研究人员学习参考。项目围绕Open source phishing awareness trainer. Interactive fictional scenarios for defensive security education. No backend required.展开，提供了可运行的实现，对理解相关安全机制、工具原理与攻防技术具有较高的研究价值。

从技术实现角度看，此类项目的核心在于对底层原理的深入理解与工程化落地。开发者在研究过程中可以结合官方文档与社区讨论，梳理项目的初始化流程、核心模块职责与数据流转，逐步掌握其中的技术细节与设计思路。

使用与学习建议

1. 下载源码压缩包，解压到本地环境。

2. 根据项目类型准备对应的运行环境与依赖。

3. 按照 README 中的步骤完成配置与部署。

4. 在隔离的测试环境中运行验证，避免影响生产系统。

免责声明

本资源来源于开源社区，仅供安全研究、技术学习与合法授权范围内的攻防演练使用，请勿用于任何非法或侵害他人权益的用途。使用本项目产生的一切后果由使用者自行承担。