Gone Phishin’ 🎣

Using Tailwind, Gulp, and GoPhish to build out phishing campaigns quickly

Introduction

Before proceeding, I want to make clear that you should absolutely NEVER do this without the consent of all parties involved or out of the context of professional security training. This article is written under the assumption that you are creating an enterprise phishing campaign to train your employees and should not be taken out of that setting.

Okay, on to the fun stuff.

Alright, so before diving in to why these three tools are such a beautiful trio, we need to talk about what these tools are.

Tailwind CSS logo. Two horizontal blue wave symbols aligned vertically to one another.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
- tailwindcss.com

Tailwind is a CSS framework that makes scaffolding up a new webpage or custom email template (I’m sure you see where I’m going with this) very easy to do.

Gulp logo. A sodo mug with a deep red color and handwritten “Gulp” across the center.

Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.
- gulpjs.com

Gulp is a toolkit to automate & enhance your workflows. It is a very popular NPM package primarily used in web development to perform tasks like minifying code, static site bundling, or injecting browser compatibility to javascript/css. But Gulp is built on the backs of the NPM package community, so if you can think of it, there’s a gulp plugin for it.

We’ll be leveraging this in our build pipeline here shortly.

GoPhish logo. A hexagonal container with a fishing hook in the center.

GoPhish is a powerful, open-source phishing framework that makes it easy to test your organization’s exposure to phishing.
- getgophish.com

Understanding our constraints

When creating HTML templates that will be sent out from GoPhish as phishing campaigns, we don’t have a lot of the same luxuries as a standard static website when it comes to linking resources. What do I mean by this?

  1. No static file linking
This won’t work anymore with no directory to serve from.

This puts us in a position where we can either write all of our CSS inside of a <style>tag, or we can use our nifty CSS framework Tailwind in tandem with Gulp to convert any css stylings that we use within our HTML into inline CSS.

Gross, I know.

Luckily Gulp makes it easy to separate our built templates from our source code so we don’t have to look at this ugly output that email clients want.

2. No Javascript in the template

For obvious security-related reasons, we can’t put JS in our email templates. This would open up a Pandora’s box for end users and create the possibility for emails to become even more dangerous than they already are.

Getting Started 🚀

Before beginning your template creation journey, you’ll need a few things.

  1. Install NodeJS
  2. Install the Gulp CLI
npm install --global gulp-cli

Now that we’ve got all the dependencies to get up and running, let’s create a new project to contain our templates.

# Start the project
npx mkdirp my-project-name && cd my-project-name
# Install dependencies
npm install gulp-concat gulp-connector htmlmin html-rename sugarss postcss-variables gulp-inline-css puppeteer gulp-tap
# Create directories
mkdir -p src/styles src/pages src/emails templates screenshots

In order to meet the constraints of our project, we’ll need a few essential plugins for Gulp accompanied by a couple luxuries.

The plugins included in the gulpfile.js allow us to do the following:

  1. Minify HTML
  2. Bundle custom CSS files
  3. Parse post-css syntax
  4. Inject CSS styles inline
  5. Rename our files before output
You do not need all of these plugins by any means. But if you want to follow along with my configuration, these are all included.
Our gulp configuration sets us up with a few re-usable variables in the form of a JavaScript object. This keeps our methods clean and easy to update.
Our connect function enables us to use hot-reloading so changes to the src are visible right away.

Creating Gulp Functions 🔨

This allows us to write CSS using modern post-css syntax and bundle it down into a single CSS file for easy linking.

If you don’t plan on writing any custom CSS and prefer linking your stylesheets via CDN, this function won’t be relevant to you.

This function is the core of the build pipeline. From top to bottom, this pipeline does the following:

  1. Gets the source HTML from our config
  2. Applies all CSS classes and properties from both CDN-linked CSS and inline style tags into inline styles. This is the crucial step to ensure the templates work as emails.
<!-- Before -->
<div class="text-black"> example </div>
<!-- After -->
<div style="color: black;"> example </div>

3. Minify HTML

4. Auto-organize templates into files and folders by template type and current year.

Templates from the emails folder go into templates/2020/emails/ and templates from the pages folder go into templates/2020/pages . This is an easy way to keep stuff organized and scalable.

5. Hot-reloads the live development server so you see your changes right away

This function is the meat and potatoes of the article.

This function is 100% unnecessary, but why not? Often times you’ll be making these phishing templates for people who don’t have time to spin up a live server to preview your work-in-progress templates. They just want to see what it looks like.

So this function does exactly that by running a headless version of chromium to screenshot each of your finished template files into consistent-looking preview images. Nifty, right?

This function is 100% unnecessary, but why not, right?

Writing Templates 📝

Let’s leverage the power of Tailwind CSS to quickly scaffold up a phishing email that could be easily used for internal phishing campaigns.

This template makes a simple, clean looking phishing email with all links directing the user to your GoPhish campaign’s landing page. It is a spoof of a Spotify account change email but should have enough weirdness to it that a trained employee can catch that it’s phishing.

If we wanted to lower the difficulty a bit, add improper punctuation here and there along with a couple spelling errors. If an employee still doesn’t catch it, they likely need further training.

Hopefully Alan.Jackson@tidal.com is enough of a cue though.

After running our gulp command proceeded by gulp screenshot , we’re left with the following phishing template in our /templates/2020/emails folder and a screenshot in screenshots/phishing-email.png .

You’re ready to go ahead and upload the new file from the templates directory in your GoPhish campaign and kick it off!

The {{.Tracker}} doesn’t show up in the actual email and all template variables are replaced by GoPhish when the campaign starts.

Conclusion

Gulp, Tailwind, and GoPhish make an amazing team. If you’re looking to make the process of growing your phishing library extremely streamlined, I can’t recommend the trio enough.

--

--

--

Security Operations Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

5 Surprising Angular Features You Might Not Have Known About

A simple Micro Frontends explainer

Redux-Thunk, What’s the deal?

My Study Tips for the JS129 Assessment

Competence Hierarchy adapted from Noel Burch by Igor Kokcharov

Implicit data type conversion in Javascript vs explicit data type conversion in Python

Creating a React Component, Without Using React

Baby steps to Mobile Development with Javascript

TypeScript has continuously got more popular among developers in the past years. More than

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Britton Hayes

Britton Hayes

Security Operations Engineer

More from Medium

⚙️ ❮ Gems & Node Modules With ZI ❯

Scalable Peer-to-Peer Access Control using Capability in Private Networks

Install Flutter on macOS & M1 chip — 2

360° IT Check #45 — Massive Tech Layoffs, Apple’s Record-Breaking Q1 2022, And More!