TranSPArent: Taint-style Vulnerability Detection in Generic Single Page Applications through Automated Framework Abstraction

TranSPArent: Taint-style Vulnerability Detection in Generic Single Page Applications through Automated Framework Abstraction

Speakers: Senapati Diwangkara

Conference: NDSS Symposium 2026

YouTube: https://www.youtube.com/watch?v=IL6cRWIYFwo

Overview

This talk presents TranSPArent, a tool for detecting taint-style vulnerabilities (particularly cross-site scripting) in modern Single Page Application (SPA) frameworks like React, Vue, and Angular. The core challenge is that SPAs introduce framework-specific sinks that existing static analysis tools like CodeQL cannot detect because they rely on hardcoded definitions of DOM sinks. TranSPArent solves this through automated framework abstraction -- a two-stage analysis that first analyzes the SPA framework runtime to discover framework-specific sinks, then uses those sinks to augment off-the-shelf static analysis tools.

The tool discovered 19 intermediate SPA sinks across multiple frameworks, of which 14 were not listed by vanilla CodeQL. Applied to real-world repositories, TranSPArent found 11 zero-day vulnerabilities across different frameworks and syntaxes. The approach reduced false negative rates from 62% to 19.6% compared to vanilla CodeQL on SPA-involved CVEs, while maintaining a false positive rate of 42.1% -- comparable to existing tools.

Background

▶ Watch: SPA framework popularity and security question (0:00)

Single Page Application frameworks have become the de facto standard for building modern web applications. React, Vue, and Angular provide powerful features including variable binding (coordinating JavaScript and HTML), component composition and reuse (importing high-level components from rich library ecosystems), and single-file encapsulation (combining HTML, JavaScript, and CSS in one component file).

However, SPAs are still web applications and remain vulnerable to attacks like cross-site scripting (XSS). The critical difference is that SPA vulnerabilities manifest through framework-specific APIs and syntax rather than traditional DOM manipulation. For example, Vue's dangerouslySetInnerHTML equivalent uses different object patterns that look similar to DOM properties but are entirely different objects managed by the framework runtime.

This creates two compounding problems. Sink diversity: Each framework has its own syntax, and many frameworks support multiple syntaxes (JavaScript and HTML template variants). Manually hardcoding sink definitions for all frameworks and all syntaxes -- as current static analysis tools do -- cannot scale. Taint diversity: Analyzing the framework runtime directly (to trace from SPA APIs to DOM sinks) encounters massive JavaScript codebases with dynamic features like postMessage, higher-order functions, and dynamic property access that confound static analysis.

The talk demonstrated a real vulnerability in Bilibili Evolved, a popular add-on script for the Chinese video streaming platform Bilibili, where search result responses were vulnerable to reflected XSS through a Vue-specific sink that CodeQL could not detect due to missing sink definitions.

Key Findings

▶ Watch: Automated framework abstraction approach overview (4:00)

14 new SPA sinks unknown to CodeQL: TranSPArent's automated analysis discovered 19 intermediate SPA sinks across React, Vue, Angular, and other frameworks. 14 of these were not defined in vanilla CodeQL's sink library, representing a significant coverage gap in the industry-standard static analysis tool.

11 zero-day vulnerabilities: Applied to crawled GitHub repositories and CVE datasets, TranSPArent found 11 previously unknown XSS vulnerabilities across different frameworks and syntaxes. These were responsibly disclosed to maintainers, who responded with sanitization fixes or documentation warnings.

62% to 19.6% false negative reduction: When TranSPArent's discovered sinks were added to CodeQL, the false negative rate on SPA-involved CVEs dropped from 62% to 19.6%. The remaining false negatives were attributed to incomplete data flow modeling in the underlying static analysis engine.

Framework sanitization matters: Angular had only 2 discovered sinks compared to other frameworks because Angular implements Safe Types -- in-framework sanitization that inherently sanitizes URL and HTML inputs. The number of sinks per framework correlates with (a) how many syntaxes the framework supports and (b) whether in-framework sanitization exists.

Technical Deep Dive

▶ Watch: Three categories of SPA sinks: generic, fixed, reference (8:00)

TranSPArent's automated framework abstraction operates in two stages.

Stage 1: Analyze the SPA Runtime

The first sub-analysis is Dynamic Auto-Stage Analysis, which addresses taint diversity. SPA framework runtimes contain dynamic features (cross-origin messaging, higher-order functions) that static analysis tools cannot model. TranSPArent uses the framework's own unit test suites as a key insight -- large SPA frameworks ship with comprehensive test suites that exercise DOM sink interactions. The tool runs test cases that hit DOM sinks and collects stack traces, identifying successive function calls separated by unmodeled APIs (e.g., scheduleWork and performWork separated by postMessage). These are "stitched together" in the data flow graph as auxiliary taint rules.

The second sub-analysis is Static Taint Path Analysis, which uses the auxiliary taint flow rules to search for taint paths from SPA APIs to DOM sinks. Three categories of SPA sinks are identified:

• Generic sinks: The DOM sink is parameterized, and the API provides a way for the user to specify the key directly. The key analysis identifies translation mechanisms between API keys and DOM sink keys.
• Fixed sinks: DOM sinks are exposed through a particular key, and the API key flows to a condition (guard node) rather than the sink directly. Analysis focuses on the guard node structure.
• Reference-based sinks: The API provides a way to "smuggle out" raw HTML elements normally enclosed in components. Analysis traces taint flow backwards from element creation to the API.

Stage 2: Detect Vulnerabilities in Applications

After discovering JavaScript-syntax SPA sinks, TranSPArent derives HTML-syntax SPA sinks by analyzing the framework's transpiler (which converts HTML templates to JavaScript). Two mapping methods are used:

• Extrapolated mapping: If the HTML attribute name matches a known sensitive attribute (like innerHTML), it's extrapolated to the framework's template syntax (e.g., native-prop in Vue).
• Direct mapping: If no sensitive attribute pattern is found, a direct mapping to the discovered JavaScript syntax sink is used (e.g., v-html in Vue).

The discovered sinks are then provided to off-the-shelf static analysis tools (CodeQL or Semgrep) as additional sink definitions, enabling standard taint analysis to detect SPA-specific vulnerabilities.

Demo / Proof of Concept

▶ Watch: HTML syntax mapping via transpiler analysis (10:00)

No live demo was performed. The evaluation consisted of applying TranSPArent's augmented CodeQL to CVE datasets and crawled GitHub repositories. The Bilibili Evolved XSS vulnerability was shown as a concrete example of a vulnerability that CodeQL could not detect but TranSPArent could. The 11 zero-day findings were responsibly disclosed, with maintainers responding through either code fixes (adding sanitization) or documentation updates (warning about sensitive API usage).

Defensive Implications

▶ Watch: Angular Safe Types and framework sanitization impact (14:00)

Static analysis coverage gap: Organizations using CodeQL or similar static analysis tools for web application security should be aware that SPA-specific sinks are largely unmodeled. TranSPArent's additional sink definitions could be integrated into existing analysis pipelines to improve coverage.

Framework selection guidance: The finding that Angular's Safe Types dramatically reduce the number of exploitable sinks provides evidence-based guidance for framework selection. Organizations building new SPAs should consider in-framework sanitization as a security-relevant selection criterion.

Framework developer responsibility: The research demonstrates that framework developers can significantly reduce vulnerability exposure by implementing in-framework sanitization. This is a more effective defense than relying on individual application developers to handle sanitization correctly.

Remaining challenges: The 42.1% false positive rate and 19.6% false negative rate indicate that static analysis of SPAs remains imperfect. Non-controllable taint sources and unidentified sanitization (especially regex-based) are ongoing challenges. Dynamic analysis remains necessary as a complement.

Key Takeaways

• SPA vulnerabilities are prevalent but understudied -- framework-specific sinks create a coverage gap in existing static analysis tools
• TranSPArent discovered 19 intermediate SPA sinks, 14 of which were unknown to vanilla CodeQL
• Automated framework abstraction uses unit test-derived stack traces and transpiler analysis to discover sinks without manual reverse engineering
• 11 zero-day XSS vulnerabilities found across multiple SPA frameworks and syntaxes
• False negative rate improved from 62% to 19.6% when augmenting CodeQL with TranSPArent's sinks
• Angular's Safe Types demonstrate that in-framework sanitization dramatically reduces exploitable sink count
• The approach works with any static analysis engine that supports custom sink definitions (CodeQL, Semgrep)

About the Speaker(s)

Senapati Diwangkara is a researcher at Johns Hopkins University working on web application security, particularly the intersection of modern frontend frameworks and static analysis. Diwangkara demonstrated deep knowledge of both the SPA framework internals (React, Vue, Angular runtime architectures, transpiler mechanics) and the limitations of existing static analysis tools, presenting a practical bridge between the two domains.