CSS Injection on GitHub Profiles: From Unicode Exploits to New Bypass Techniques

Steve Matindi
3 min readJun 8, 2024

--

GitHub profiles are a great way for developers to showcase their work, and customizing these profiles can add a personal touch. However, customization comes with risks, especially when users find ways to inject e.g CSS into their profiles, which can potentially compromise the security and integrity of the platform. This blog explores a previously noted and blocked CSS injection method using the \unicode command and I will later show a new way to bypass the filter.

The Original Exploit: Unicode Command Injection

Initially, users discovered a method to inject CSS styles into their GitHub profiles using LaTeX math mode with the \unicode command. Here’s an example of the code that was used:

$$\ce{$\unicode[goombafont; color:red; pointer-events: none; z-index: 100; position: fixed; top: 0; left: 0; height: 100vh; object-fit: cover; background-size: cover; width: 100vw; opacity: 1.0; background: url('https://github.com/stevemats/stong/blob/master/Rotating_cube_SMIL.svg?raw=true');]{x0000}$}$$

This code used LaTeX to inject styles into the profile page, altering its appearance by placing an image as the background and applying various CSS properties.

GitHub’s Response: Blocking the Unicode Command

To prevent this exploit, GitHub implemented a filter to block the \unicode command in LaTeX math mode. This was a necessary step to maintain the security and integrity of the platform. Users attempting to use the \unicode command now receive an error message: "The following macros are not allowed: \unicode."

A Way to Bypass The Filter: HTML Character Encoding

Despite the filter, users have found new ways to bypass these restrictions. One such method involves using HTML character encoding to disguise the \unicode command. Here’s an example of the updated code:

```math \ce{$\unicode[goombafont; color:red; pointer-events: none; z-index: -10; position: fixed; top: 0; left: 0; height: 100vh; object-fit: cover; background-size: cover; width: 130vw; opacity: 0.5; background: url(‘https://user-images.githubusercontent.com/30528167/92789817-e4b53d80-f3b3-11ea-96a4-dad3ea09d237.png?raw=true');]{x0000}$}

Replace https://user-images.githubusercontent.com/30528167/92789817-e4b53d80-f3b3-11ea-96a4-dad3ea09d237.png?raw=true with your image.

How it Works

  1. HTML Character Encoding- The sequence \ is the HTML entity for the backslash (\). By encoding the backslash, the code avoids directly writing the \unicode command, which GitHub’s filter is designed to block.

2. LaTeX Math Mode - The code is still enclosed within LaTeX math mode markers ($$...$$), allowing the use of LaTeX commands.

3. Chemical Equation (ce) Environment - The \ce command is used as a wrapper, potentially disguising the intent of the code.

4. Unicode Command Injection - Once decoded and processed, the \ entity is interpreted as a backslash, effectively executing the \unicode command with the specified CSS properties.

Why It Bypasses the Filter

  • Encoding Trick: By using \, the command is hidden from the filter that blocks \unicode.
  • Command Interpretation: When the encoded character is rendered, the LaTeX processor interprets it correctly as a backslash, executing the command.

Why GitHub This Loophole is Being Addressed

GitHub decided to close this issue and restrict the use of the \unicode command and might do so for the new methods for several important reasons:

  1. Security Risks - Allowing arbitrary CSS injection can lead to significant security vulnerabilities. Users could manipulate the appearance of not only their profiles but also create misleading or malicious elements that could trick others.
  2. Site Integrity - CSS injection disrupts the consistent appearance and functionality of the site. If everyone could freely alter page layouts, it would make the platform look unprofessional and untrustworthy.
  3. Abuse Prevention - Without restrictions, malicious actors could use CSS injection for harmful activities, such as phishing or spreading misinformation.
  4. User Experience - Excessive or disruptive styles injected through CSS could lead to poor user experiences, making some profiles unusable or visually overwhelming.

Overview

--

--

Steve Matindi

“Knowing is not enough; we must apply. Wishing is not enough; we must do.” — Von Goethe