#php full stack development and development training

Solving challenges & scoring points

To complete a challenge, the player had to achieve the goal within one of the listed categories.

In XSS challenges, the player would need to cause the browser to create an alert dialog (e.g. alert()).

Conversely, in SQL Injection challenges the player would need to read the flag column from the flags table in that challenge's database.

When the player successfully solved the challenge they were awarded with a flag, each in the format ofTumblr{s0mE_cHalL3nGe_j0kE-abcdef012}. That last piece is a unique hash for the user, per challenge, so that they couldn't directly share their flag. They can help others — even provide the solution — but they can't simply give away their flag.

Each challenge, when solved, is worth a certain number of points based on the challenge's difficulty and whether or not the player used the challenge's hints.

There were 3800 points available, though no player was able to break 1000!

At the end, we locked the leaderboard and announced the winners.

Prizes

We awarded the top four players based on their ranking on the leaderboard. First place got first dibs from the list. Second place gets to select theirs from the remaining lot, and so on.

Up for grabs this year:

Hak5 Elite Field Kit

Proxmark3 RDV2 Kit

Samsung Chromebook Plus

Lockpick set and a "how to" manual

Challenge snapshot

Throughout the eight categories we had a total of 46 challenges. We wanted to have a wide range of challenges that welcomed players of all backgrounds and experience levels.

The goal for XSS challenges was to get an alert dialog to appear. The player is presented with a vulnerable web page and they needed to determine where the vulnerability is and how to exploit it. Example:

These challenge levels ranged everywhere between simple non-sanitized output to DOM reflection to CSP bypasses.

One fo the more unique challenges to develop was SQL Injection. These offered players the ability to put their SQL skills to the test with a variety of basic input injection, blind injection, and filter bypassing challenges.

In at least one of the SQLi challenges, players had to inject into an INSERT statement. When creating challenges like this, special care had to be taken to give players the full capabilities of MySQL but also prevent them from revealing the flag to other players — it's a tricky thing making vulnerabilities secure!

The infrastructure

A frequent question I receive when I talk about deving on the CTF is "are you using CTFd?" Short answer? Nope! A slightly less short answer is that CTFd wasn't out when we started this =P.

The framework we're using is called "Security Training Grounds" and it's a custom-written project using PHP, PhantomJS, and MySQL (with HTML + JavaScript too, of course), running in Amazon Web Services.

An advantage of writing this in-house was that it gave us the ability to create a dynamic and robust system that has endless capabilities.

PHP + MySQL

The website was created from scratch, written in PHP with a little bit of jQuery + Bootstrap on the frontend and MySQL as the database.

The big thing here are the challenges themselves. Each challenge is hosted on its own subdomain. This enables us to provide live and interactive challenges like XSS or SQLi while still providing support static challenge types like Crypto or Reverse Engineering.

We accomplished this by allowing dynamic hostnames on the webserver and defining a subdomain hostname for each challenge that's stored in MySQL. When a web request comes in, the app checks whether it's a subdomain or not. If so, it hits the database to determine what to display.

For most challenges, we were able to handle all of the dynamic pieces directly in PHP. For some, such as the C or Java reverse engineering challenges, we did need to shell out to gcc or javac to build the custom binaries for each user.

PhantomJS

A difficulty for XSS and CSRF challenges is determining whether or not the participant successfully exploited the system. Surely we don't want to manually confirm for each flag, and attempting to pattern-match on their input would be crazy.

Our solution: execute what the player submits!

This is my own little baby, a piece of the system I'm so excited by. See, what better way to test XSS than to actually test XSS. As mentioned in the "Challenge snapshot" section above, when a player is working on a XSS challenge, they are given a website that has a XSS vulnerability. Their goal is to make an alert dialog appear. This is key and the requirement of the XSS framework itself.

On the client, we use this fancy little snippet:

var ctf_alert = alert; alert = function(msg) {    ctf_phantomjs_alert_test(document.location, msg); };

This overrides the window's actual alert() function and lets us put some processing logic in the middle. The logic is to take a snapshot of the current page - the URL, query string, POST parameters, the cookies and then pass the full snapshot to a backend PhantomJS service (via a PHP proxy, to help prevent tampering).

The PhantomJS service replicates that entire request and loads the target web page. If the page invokes an alert() call, which we catch via PhantomJS's onAlert, then we return with a "success" and the PHP proxy will return the user's flag. Our alert() overriding logic will then replace whatever message the user attempted to display and display their flag instead. Fancy af.

CSRF has a similar setup, except the player needs to submit their full CSRF payload:

After submitting the payload to the PHP proxy, we pass the payload to PhantomJS. This executes the payload in the context of an empty web page. If the PhantomJS worker successfully falls victim to the targeted action, the PHP proxy will return a flag to the user!

Open source

The framework code, as-is, is still relatively hacky and written with internal dependencies. We do believe in OSS though! We expect a near-future initiative to rewrite portions of it so we can release it for others to use for their CTF events, too.

Wanna Play?

Online Resources

https://www.w3schools.com/

Starting out, W3 schools will probably be pretty omnipresent for help. They have tutorials for HTML, CSS, JavaScript, PHP, ASP, and many other web technologies. They pride themselves in being the largest web developer site, and unfortunately that has a downside. They don’t always update all of their articles to the most current specifications. This is a wonderful resource, as they do a good job of explaining a lot of these concepts in a beginner friendly way, but when you’re ready for nitty-gritty details, it’s almost always best to go with a more specialized developer resource.

https://css-tricks.com/

CSS is a powerful and flexible tool. Every day I see projects where developers have pushed it to new heights, but sometimes it’s a little arcane too. Well the wizards over at CSS-Tricks have collected a large number of articles and tutorials that explain everything from how z-index works to how to use newer layout-centric rules like Flexbox or Grid. If a CSS rule is misbehaving, 9 times out of 10, I can find a clear and concise reason on this site, and more importantly, I find many recommendations on how I can achieve the same effect differently.

https://flexboxfroggy.com/

Speaking of Flexbox, Flexbox Froggy is a one-note kind of resource, but it teaches all of the core concepts behind flexbox, and it can also teach CSS savvy managers why moving to a new layout methodology would benefit your work flow.

https://cssgridgarden.com/

Created by the same developer as Flexbox Froggy, and it does the same thing with Grid concepts.

https://developer.mozilla.org/en-US/

Mozilla’s developers have been at this game a long time, and their resources are next to none. In my opinion, this collection does not do much help a beginner understand, but the trade-off is that once you’re over that initial hurdle, the information you’re looking for is almost always only a few clicks away. This is the first, and often the last, place I go whenever I’m looking to solve a weird JavaScript bug that the rest of the internet is too clever to have encountered, (or to explain why only IE9 is seeing it).

http://php.net/manual/en/index.php

I know PHP isn’t a popular language right now, but it’s powerful, it’s flexible, and it’s still the primary language of the largest and most popular CMS on the planet, for better or worse, WordPress. Especially if you’re going to work freelance, you owe it to yourself to at least be familiar with PHP, and this will be your best friend. It’s no nonsense, and not beginner friendly, but it’s clear, and the comments on the articles are often as helpful as the articles themselves.

https://codex.wordpress.org/Developer_Documentation

Speaking of working in freelance (or even for a firm like I do), I have my own opinions about the way WordPress works, but you’re going to be doing projects in WordPress, and you aren’t going to be able to accomplish them without this. I have a small problem with the way functions and parameters are explained (it isn’t always easy to differentiate how one calls a function manually, or if it is called by filters, or how it is different from they three other functions named roughly the same thing), but I do know that the WordPress core developers work very hard, so there is always a method to the madness, even if you don’t have the key to see it.

https://stackoverflow.com/

When you get to the debugging stage, you’re going to become familiar with Stack Overflow pretty fast, as it almost always dominates the first few google results for a problem. Now, I’ve had developers try to scare me away from using Stack Overflow because it is open for beginners and experts, and sometimes it’s hard to tell quality of answers, but I strongly disagree with that. While it’s true you should always look cautiously at using someone else’s code right out of the box, there are a lot of members of the community that go out of their way to explain what the code is doing, and those are the answers you should be looking for. You don’t have to use their code, but if you can understand why you had the problem in the first place, you grow as a developer, and now have the tools to solve the problem. Stack Overflow is a big part of the Open Source community, so it’s always nice to give back at least as much as you take, so if you see a question you have the answer to, feel free to share.

https://github.com/

Eventually, you’re going to run into a project where you need a plugin developed by someone else, either because you don’t yet have the knowledge or you don’t have the time, but the client needs the functionality. 9 times out of 10 you’ll find what you need on GitHub, and honestly, you should be getting together your own GitHub with plugins and projects of your own. No matter how single purpose they may be, you’d be surprised how useful things can be in very specific situations. GitHub, like Stack Overflow, is a big part of the Open Source community, so it’s always nice to give back when you can. Make suggestions or report problems you have with any projects you pull, and in doing so you’ll make the community a better place.

Applications for Windows Based Developers

Now, for the next section let’s get into some tools. I love gaming, so I have a Windows computer at home. I don’t really know why we’re wasting money on a Windows license at work, but we are so I can mirror the full stack in both locations. Here’s what I use.

https://notepad-plus-plus.org/

When I first started, my boss insisted I use Dreamweaver for everything. I have nothing against Adobe, and their products are quality, but Dreamweaver was way more trouble than it was worth. Everything I cared about from Dreamweaver I can do in this free and Open Source program, with some extra functionality I find it extremely hard to mimic in Dreamweaver. Notepad++ is fast, stable, and hugely extendable. If you’re doing this as a full time job, I strongly recommend switching to a dark theme for the sake of your eyes. Blackboard is among my favorites (unless you’re trying to write Python). I also really love its macro functionality, I have a couple of re-used DOM structures programmed in there right now as well as my multi-line comment format.

https://winscp.net/eng/download.php

Arguably, the best part of Dreamweaver is the built in FTP client that lets you push changes directly to the server, but set Notepad++ as your primary editor in this, and suddenly you even have that feature, as this will sync temp folders back to the server. This is probably the best FTP client I’ve seen on Windows, with full support for SFTP and SSH (built on PuTTY) with all sorts of encryption and authentication options. It’s also hugely configurable and fairly dependable. If you’re working on a remote server using a Windows machine, this is probably how you should be accessing the file system.

https://www.putty.org/

I hope that as a web developer you don’t have to learn to be a server administrator, but as a web developer I am telling you you’ll probably have to learn at least a little bit about Unix/Linux server administration, as they are by far the most popular web server stacks out there, and you’ll be controlling them with an SSH client at some points, even if a web interface is available. This is a great one, with all sorts of authentication options, so if (like us) you know you need root access to a server remotely, but you don’t like the idea of protecting that with just a simple password, you can set up Public/Private key pairs with encryption passphrases.

http://www.wampserver.com/en/

Let me be clear on this: WAMP, which stands for Windows Apache, PHP, MySQL, is great to have. It’s good for training, it’s good for prototyping tools without having to wait for a virtualized server to start up, but the differences in environments between running Apache, PHP, and MySQL on Windows versus Linux will bite you eventually. Don’t expect to be able to push anything you worked on in WAMP directly to your Linux based server without having to fix a few problems here and there. That said, I have a number of things I run in my WAMP server all the time (linting, IP geolocation, domain DIGs, and a few others). It’s a great tool, but it isn’t a replacement for a staging server.

https://www.virtualbox.org/

You should be using a virtual machine for your staging server. That way you can simulate things like network communications and how your code will actually be run on Linux. Virtual Box is free and powerful. You’ll need to get ISOs for whatever operating system you intend to run, and you should be aware that at least some versions of Windows have it written into their License agreement that you can’t run them virtualized.

https://www.gimp.org/

Gimp is powerful. I don’t really know how to use it well. It’s always been one of those things where I know I need to sit down and teach myself, but since I’ve fallen far into the trenches of server backend work, I haven’t ever had the motivation. Mostly, I use this to resize images when I notice that a website is loading a 14MB PNG on the homepage for some unknown reason. Please designers, think of the mobile phones, keep total page loads (Including all resources, pictures, scripts, and DOM structure) as close to or below 1MB as you can, especially if your site is supported by ad revenue, as there’s no telling how much the ads will need to load on top of that.

https://tools.stefankueng.com/grepWin.html

GrepWin is an implementation of Grep functionality on Windows. For those of you who aren’t aware, Grep is a terminal tool on Linux/Unix that uses a very efficient algorithm to search through large amounts of text for whatever you define, be it flat text, or something represented by a regular expression. It’s super useful for renaming an included document or global variable, and can really save your bacon if your error reporting is being vague. I like this particular implementation because it has context menu integration, so it’s as easy to use as right clicking in the directory you want to search in and telling it to search. It also supports text replacement with backups, so this simple tool is extremely useful more often than I’d like to admit.

https://gitforwindows.org/

The last tool is an implementation of Git for windows that also includes a Bash terminal. This is important because a lot of developers work in Linux, and so installation directions might only be available as Bash code, this makes it easy to move past that step without being bogged down translating that into Windows CMD code. This is a full implementation of Git, so it comes with all of the version control features and easy project building that Git provides. If you end up working with Electron or Node.JS in general, you’ll end up leaning on this pretty hard.

And that’s it. I’m hoping that later this week I can get into more interesting stuff, but I wanted to have a foundational post of the resources I might reference and the tools I’m using for people to fall back on. It’s the kind of thing I wish I had to reference when I was starting out, especially since all of the tools I’m using now are free and Open Source, and making that change has sped up my workflow significantly, as the only application I’ve listed here with any noticeable boot time is Gimp, something I hated about Dreamweaver every time I had to shut the computer down for whatever reason.

I plan on coming back to this post periodically and updating it as my opinions change, or I become aware of other resources that should be on here. Eventually I’ll also be lining out a software for Linux section, but I’m still shopping around for an affordable and stable Linux development machine.