In Depth: Using CSS Clickjacking to Steal Passwords

[In Depth #26] It's time for some nightmare fuel with a sneaky inline CSS vulnerability I found in a popular Laravel package!

In Depth: Using CSS Clickjacking to Steal Passwords

What if I told you I could use Inline CSS to steal user passwords, and other sensitive information from your app, through a vulnerable input field like a comment box? (Yes, you read that correctly: inline CSS!) 😱

I haven't found a commonly used name for this attack, so I'm calling it "CSS Clickjacking", but it falls under the categories of Clickjacking and UI Redressing, as well as Injection or XSS (Cross-Site Scripting), given what you can do with it and how it works.

If you haven't heard of an attack like this before, you're not alone! I didn't really consider it an attack vector myself until I stumbled upon some suspicious code during a recent security audit! So let me take you on the journey I took to finding the vulnerability and figuring out how to exploit it, through to my client tracing it back to a popular third-party package (from a team which may have just passed 1 billion downloads...), and how it was resolved on their end.

⚠️
Disclaimer: All client details have been changed, and the maintainer of the third-party package agreed to my writing this article, and has seen and approved it prior to publishing.

Stumbling Upon Suspicious Code

One of the important parts of my security audits is reading through my client's code, looking for anything obviously vulnerable, or even just a little bit suspicious. You may be familiar with the term "code smell" used with overly complicated and potentially buggy code, and I get that same feeling with code that might be exploitable in some way - it just doesn't feel right.

I was working through my clients code, checking out some of the tools they had in place for formatting output, when I came across code that looked something like this: