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.

What is Tailwind?

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.

What is Gulp?

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.

What is GoPhish?

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 🚀

Installation

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

Creating a project

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

Configuring our gulpfile

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 🔨

CSS Function

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.

HTML Function

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.

Screenshot Function 📷

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.

Our phishing email

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 .

Complete 🌟

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.