DOM Framework Coupling, Migrating, and Leaky Abstractions for Bug Bounty Use - sgml/signature GitHub Wiki

Race Conditions

CVE-2022-4037 – GitLab OAuth Email Verification Race

  • Impact: Account Takeover
  • What Happened: A race condition in GitLab’s OAuth flow allowed attackers to forge verified email addresses. If a user signed in via a third-party provider and quickly changed their email before verification completed, they could hijack accounts tied to that email.
  • Relevance: Exploitable in high-latency or slow-rendering environments where timing gaps are more pronounced.

DOM Anecdote – Hidden Admin Fields and Conditional Removal

  • Scenario: A web app rendered admin-only form fields (e.g. role=admin) by default, then removed them via JavaScript if the user lacked privileges.
  • Exploit: On slow devices or networks (e.g. 2G, ISDN), attackers could intercept and submit the form before the DOM mutation occurred.
  • Impact: Privilege escalation or unauthorized access to admin features.
  • Lesson: Never rely on client-side logic to enforce access control. Always validate on the server.

CVE-2022-24800 – October CMS File Upload Race

  • Impact: Remote Code Execution
  • What Happened: A race condition in the fromData method allowed unauthenticated users to upload files with attacker-controlled names. If timed correctly, this bypassed validation and led to RCE.
  • Relevance: Exploitable via slow file systems or concurrent requests.

DOM Timing Anecdote – Flash of Unstyled Content (FOUC) and Data Leakage

  • Scenario: A site briefly displayed sensitive content (e.g. internal pricing tiers or debug flags) before CSS rules hid them.
  • Exploit: On slow connections, attackers could scrape the DOM before styles applied.
  • Impact: Information disclosure.
  • Lesson: FOUC isn’t just cosmetic—it can leak privileged UI states if not handled carefully.

Here are some resources related to the issues we discussed:

  1. Race condition in email verification (CVE-2022-4037):
    https://huntr.dev/bounties/3723b4e2-2cdb-40e1-a513-02c7e35ad36b/

  2. Form field manipulation via DOM race (theoretical analysis):
    https://portswigger.net/research/bypassing-hidden-form-field-controls-with-timing-attacks

  3. Bug bounty case involving form input race condition abuse:
    https://hackerone.com/reports/670478

  4. Client-side race condition exploitation using slow devices:
    https://blog.doyensec.com/2020/03/17/client-side-race-conditions.html

  5. OWASP: DOM-based access control issues:
    https://owasp.org/www-community/attacks/DOM_Based_Attacks

  6. Hidden functionality can be uncovered by examining ways user inputs are validated: https://par.nsf.gov/servlets/purl/10172957&ved=2ahUKEwiJiLmBrI-OAxVnPkQIHTBAFPAQFnoECBgQAQ&usg=AOvVaw1j2T4yNbV41NuVQNLgEuS8

  7. Time-of-Check-Time-of-Use race condition: https://www.youtube.com/watch?v=__Yx7Zw3O2E

Featuritis

Test Suites

UIKit

Flash to Haxe

Flash to Unity

React to Vue 2

Ember to Vue 2

Angular.js to Vue 2

jQuery to Vue 3

Vue 2 to Svelte

Polymer.js to Lit.js

Server-Side Rendering

Design Languages

Form Validation

jQuery

Angular

Reactive forms provide synchronous access to the data model, immutability with observable operators, and change tracking through observable streams.

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Vue

Wherever something can be easily accomplished in plain JavaScript, Vue render functions do not provide a proprietary alternative. For example, in a template using v-if and v-for:

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

This could be rewritten with JavaScript's if/else and map() in a render function:

props: ['items'],
render() {
  if (this.items.length) {
    return h('ul', this.items.map((item) => {
      return h('li', item.name)
    }))
  } else {
    return h('p', 'No items found.')
  }
}

In a template it can be useful to use a

v-model on a component was an equivalent of passing a value prop and emitting an input event

React

Use pass { capture: true } as the third argument to document.addEventListener:

document.addEventListener('click', function() {
  // Now this event handler uses the capture phase,
  // so it receives *all* click events below!
}, { capture: true });

Note how this strategy is more resilient overall — for example, it will probably fix existing bugs in your code that happen when e.stopPropagation() is called outside of a React event handler. In other words, event propagation in React 17 works closer to the regular DOM.

MobX

Animation

Polyglot Integration

JavaScript Migration

Binary Data

Framework Comparison

Leaky Abstractions

Vendor Specific Components

https://blogs.msdn.microsoft.com/partnercatalystteam/2015/06/19/optimizing-ember-and-ember-cli-on-windows/ https://engineering.linkedin.com/blog/2017/03/glimmer--blazing-fast-rendering-for-ember-js--part-1 https://engineering.linkedin.com/blog/2017/06/glimmer--blazing-fast-rendering-for-ember-js--part-2 https://engineering.linkedin.com/blog/2017/12/the-glimmer-binary-experience https://engineering.linkedin.com/blog/2018/03/how-we-built-the-same-app-twice-with-preact-and-glimmerjs https://engineering.salesforce.com/software-is-about-people-cf5b813e0f67 https://blog.heroku.com/future-of-emberjs

Canvas Abstractions

Vendor Specific CSS

Games

⚠️ **GitHub.com Fallback** ⚠️