GridShatter

Shatter the cloud grid with breach drills, secure in real-time.

Comment

Inspiration

Writing Terraform configurations is easy; keeping track of what connects where as a project scales is not. Typically, understanding HCL files means trying to assemble a mental map out of raw block files. When it comes to security, static analyzers (like tfsec or Checkov) just spit out long, dry terminal lists of warnings. Most developers ignore them until something breaks.

I wanted to build something different. I wanted to see my configurations come to life immediately as I typed. More importantly, I wanted to witness how an attacker breaches an architecture. Seeing an S3 bucket or an EC2 instance turn red and animate the exploit path makes security vulnerabilities real and urgent. That is the inspiration behind GridShatter—turning static HCL configurations into a live, interactive DevSecOps sandbox.

What it does

GridShatter parses Terraform HCL code and CircleCI YAML pipelines right in the browser, instantly converting raw code blocks into dynamic, interactive architecture layouts.

Once generated, developers can run a Threat Attack Simulation. The app launches active breach drills on the canvas, illuminating compromised nodes and network edges in red while logging exploit steps in a retro console terminal. GridShatter also acts as a static security scanner—validating custom configs for unencrypted databases, public buckets, overly permissive IAM privileges, and open firewall ports, returning a diagnostic report with HCL remediation codes. Finally, it includes a Practice Arcade tab featuring 14 levels of hands-on cloud security challenges.

How we built it

GridShatter is engineered entirely client-side to ensure zero data leaves the browser:

  • AST HCL Engine: Since heavy Go binaries (like Terraform itself) can't run in a standard browser, I built a lightweight AST (Abstract Syntax Tree) parser in Javascript that reads HCL configurations and maps top-level block attributes.
  • Coordinate Layout Engine: I wrote a layout coordinator that maps parent-child structures (like subnets containing servers inside a VPC) and automatically positions them on a dynamic SVG canvas.
  • Visual Breach Simulation: The threat simulator highlights vulnerable network links and resources (using SVG group indicators) while feeding a real-time console log in a retro terminal wrapper.
  • Global Security Scanner: I implemented dynamic security checks that run static rule-sets on resources like S3 public blocks, database encryption options, IMDSv2 requirements, load balancer listener protocols, and open firewall ranges.

Challenges we ran into

  1. Parsing HCL in JS: Writing an HCL parser in pure JavaScript is a challenge due to Terraform's flexible syntax (specifically nested blocks like inline security group ingress rules). I ended up implementing regex-based body extraction helpers to capture nested variables that standard AST parsers missed.
  2. SVG Edge Routing: Drawing SVG connection paths between parent-child groups without overlapping lines or running straight through container borders required a lot of coordinate math and layout adjustments.
  3. Dynamic State Management: Building an app that handles two entirely separate modes—a free-form "File Parser" (with custom uploads) and a progressive "Practice Arcade" (with 14 validation challenges)—required keeping the active canvas and AST states strictly separated.

Accomplishments that we're proud of

I successfully wrote a lightweight HCL syntax compiler and layout generator that runs completely client-side in under a second. I am also proud of the visual attack simulator—syncing SVG flashing animation states with chronological attacker exploit terminal logs makes analyzing complex network pathways highly intuitive.

What learned

I learned how powerful visual learning can be for cybersecurity. Designing the interactive challenge arcade showed us that gamifying infrastructure tasks (e.g., writing the code to fix a security group bypass and watching the threat scan turn green) is far more engaging than reading security docs. I also got a deep appreciation for pure SVG layout mechanics.

What's next for GridShatter

I want to expand the parser to support multi-file Terraform workspaces, render AWS IAM role trust policies visually, and add support for Docker Compose layouts.

Built With

Share this project:

Updates