Summary of "Глазами реверс-инженера: Google Docs Internals"

Summary of “Глазами реверс-инженера: Google Docs Internals”

This video is a deep dive into reverse engineering Google Docs from the perspective of a seasoned reverse engineer. The speaker explores the internal workings of Google Docs, focusing on its JavaScript codebase, event handling, UI elements, and rendering mechanisms. The session is part tutorial, part live exploration, and part interactive problem-solving with chat participation.

Key Technological Concepts and Analysis

1. Reverse Engineering Approach

Reverse engineering here means analyzing the existing Google Docs product without access to source code to understand its internal logic.
The goal is to solve a targeted task (e.g., programmatically applying text formatting like bold, italic, underline) by bypassing or supplementing Google Docs’ official plugin API.
The API is highly abstracted and sandboxed, limiting performance and functionality, especially for large documents.

2. Google Docs Codebase Overview

Google Docs is a massive, complex JavaScript project, likely over 1.5 GB uncompressed.
The core code is minified/compressed, making direct analysis challenging.
Code structure and file loading mechanisms have changed recently, complicating familiar reverse engineering methods.
The core file often referenced is called KCKScore (or similar variants), which contains a huge amount of code.

3. Developer Tools Usage and Challenges

The speaker uses Chrome Developer Tools extensively, including:
- Searching script tags and source files.
- Setting breakpoints on event listeners (e.g., button clicks).
- Using features like “Search in anonymous and content scripts” and “Pretty print” to improve readability.
- Using the “Live Heap Profile” to monitor RAM usage.
Developer Tools sometimes behave erratically or glitch when working with large, complex projects like Google Docs.

4. UI and Event Handling

Buttons like “Bold” have identifiable IDs and event listeners.
Event handling in Google Docs involves complex abstraction layers and managers that handle keyboard and mouse events.
Attaching breakpoints on button click events reveals deep call stacks with multiple layers of abstraction.
Google Docs now renders document content on a canvas element, complicating direct DOM event hooking for text formatting.

5. Functional Programming Style

Google Docs code uses a heavy functional programming style, including function composition and identity functions.
This style adds complexity but also modularity.

6. Code Exploration for Bold Functionality

The speaker traces the “Bold” button event through multiple functions, narrowing down to a key function named UDI (or variants like di, VD, Z8C, QYC).
A critical discovery is a function F from E (functions F and E), whose presence or absence controls whether bold formatting is applied.
Removing or overriding this function disables bold formatting, confirming its central role.
The speaker identifies a large object (A) passed through many layers, representing document state or formatting context.

7. Document Model and Text Properties

The document is internally represented by nested objects describing paragraphs, styles, fonts, colors, and formatting flags (e.g., TSF for font, TSIT for italic, underline flags).
Modifying these internal objects and refreshing the document can update text styles, indicating these structures are used for rendering.
The document is divided into paragraphs, each with formatting properties.

8. Search and Pattern Matching

Regular expressions are used extensively to search for identifiers like “bolt” (bold), “italic”, “underline” in the minified code.
Despite minification, some meaningful identifiers survive, aiding analysis.

9. Limitations and Workarounds

Directly hooking into Google Docs internals is complicated by obfuscation, minification, and canvas rendering.
The official plugin API is limited and slow, prompting attempts to call internal APIs directly.
The speaker discusses possible workarounds like macro recording or simulating UI actions.

10. Use of AI Tools

The speaker briefly mentions feeding the code to AI models like ChatGPT to assist in finding relevant functions but notes limitations due to code size and abstraction layers.

11. Debugging and Experimentation Techniques

The speaker frequently sets and removes breakpoints, inspects call stacks, stores variables globally for inspection, and modifies functions at runtime.
Emphasizes the importance of patience, creativity, and iterative exploration in reverse engineering.

Product Features and Insights

Google Docs uses a highly modular, layered JavaScript architecture.
The rendering of document content shifted from DOM-based to canvas-based rendering, complicating event interception.
Formatting buttons trigger complex chains of events and function calls that manipulate internal document state objects.
The internal document model includes detailed font and style properties that control text appearance and formatting.