New Year, New Look, New Version

New Year, New Look, New Version

When CTFd was first written, it was very different from how it is today.

Administrative tasks were done using a completely separate Flask server, the page editor didn’t exist, and the only CTFd theme was written using Foundation.

Not exactly a looker, but it got the job done

CTFd was written to replace aging CSAW CTF code but the decision to switch from Bootstrap to Foundation was not the brightest. Bootstrap ended up dominating the front end space and Foundation became less common. In a large and painstaking pull request, an OSIRIS Lab member replaced Foundation with Bootstrap and created the CTFd theme that most users are familiar with.

Old and busted

Even though CTFd looked much better, the front end code was disorganized and tough to work with. During development there was a disregard for the Bootstrap utility classes and lots of inline and repetitive CSS.

Despite the shortcomings, CTFd was still very heavily customized by organizers

Organizers using CTFd still made excellent custom themes but it was clear that more could be done to help differentiate CTFs. We began to officially create custom themes and found that making themes was more tedious than it needed to be. Thus in this version improving the front end was the main focus.

After many hours the “original” CTFd theme was revamped into the “core” theme.

New hotness

Most of the user-facing changes don’t affect functionality. Things just look much better thanks to updates in CTFd, Bootstrap, FontAwesome, and Google Fonts.

However, for CTF organizers, there are a variety of improvements in the admin panel that should be noted.


Statistics

The Statistics page has been combined with the Graphs page and the “Solve Percentage per Challenge” calculation has been turned into a graph on the new Statistics page.

The new Statistics page should provide a more comprehensive understanding of the competition without having to dig through each of the pages.

Challenges

The administrative interface for working with Challenges has been updated so information is clearer and easier to understand. The hard to use and outdated challenge board interface is now more tabular and inline with the rest of the CTFd design.

In addition, while previous versions of CTFd integrated the Flags, Files, Hints, and Tags attributes under a single challenge interface, in 1.1 they are separated into their own individual buttons and interfaces.

Originally these attributes were combined into the challenge interface to make it easier to add new types of challenges. Separating these attributes was done for a variety of reasons:

  • Managing nested modals from a Challenge Type plugin was unnecessary and annoying
  • These attributes are not often customized because they are core to how CTFd operates. If a change does need to be made, the plugin can still implement new behavior outside of CTFd’s core functionality.
  • The underlying challenge templates were slated for change so it made sense to separate this code now instead of later.

In addition to separating out the attribute modals, you can now preview challenges from the admin interface. This allows you to test your keys and get an understanding of what the user sees.

Plugins

In prior versions, CTFd made use of Handlebars in order to give plugins the ability to control how challenges are rendered. This allows us to create challenges that do not conform to the standard flag format. Unfortunately while Handlebars is full featured, it doesn’t make much sense inside of a Flask project which uses Jinja templates on the server.

Instead of Handlebars, CTFd now uses Nunjucks which is a Jinja-like templating engine for Javascript.

While a seemingly small change, this allows some plugin ideas which were not possible before. The most notable being that challenge information can now be rendered server side instead of client side.


Conclusion

Version 1.1.0 brings quite a few changes. You can see the full list on the Github release page and you can try them out on the demo CTFd instance.

Some of the highlights include:

  • Pausing of a competition
  • Automatic update checking
  • Rate-limiting for sensitive endpoints

In a lot of ways, CTFd v1.1.0 is a maintenance release. There aren’t many new features and many plugins and themes are broken (intentionally) in this new release. However, version 1.1 implements long needed bug fixes and improvements that incorporate feedback from CTF organizers and plugin developers.

CTFd has come a long way since its use as a private project for CSAW CTF. A lot of progress has been made but there’s still plenty more to go. It’s a new year and a whole new style for CTFd. Only time will tell what else is in store.

As always, you can join the CTFd Slack if you need help upgrading your CTFd instance. If you have a hosted CTFd instance it has already been upgraded to version 1.1.

Show Comments