DOM Clobbering

Disclaimer

Przedstawione informacje można wykorzystywać tylko i wyłącznie w celach edukacyjnych.

Czym jest DOM Clobbering?

DOM Clobbering to technika polegająca na wstrzykiwaniu kodu HTML do strony w celu manipulowania DOM i ostatecznie zmiany zachowania JavaScript na stronie

1. Nowe właściwości w Window

Według specyfikacji HTML, nowe właściwości w window tworzy:

<img id="abc"></img>

<img name="xyz">

window.abc  // → <img id="abc">
window.xyz  // → <img name="xyz">

2. Nowe właściwości w Document

Według specyfikacji HTML, nowe właściwości w document tworzy:

<object id="abc"></object>

<img id="xyz" name="xyz">

document.abc  // → <object id="abc">
document.xyz  // → <img id="xyz" name="xyz">

⚠️ Można nadpisać wbudowane właściwości jak document.getElementById!

3. Nowe właściwości w Form

Według specyfikacji HTML, właściwości form tworzy:

<form id="f">
  <input name="action">
  <input id="method">
</form>

f.action  // → <input name="action"> (nadpisuje form.action!)
f.method  // → <input id="method"> (nadpisuje form.method!)

Kolizje nazw

<div id="abc"></div>
<div id="abc"></div>

window.abc zwróci HTMLCollection (iterowalną listę).

Zagnieżdżony dostęp

<img id="abc"></>
<img id="abc" name="second"></>

Możemy odwołać się do konkretnego elementu:

window.abc.second

toString() Magic

Większość elementów po konwersji na string zwraca [object HTMLElement].

Ale <a> i <area> zwracają swój href!

const a = document.createElement("a");
a.href = "tel:997";
a.toString(); // "tel:997"

Przykład 1: Obejście prostego sanitizera

Ręcznie pisane sanitizery często są podatne na DOM Clobbering.

const EVIL_TAGS = ['script', 'noscript', 'style', 'svg', 'math'];
function sanitize(html) {
    const doc = new DOMParser()...
}

Atakujący może nadpisać wbudowane metody i obejść walidację!

Demo

Przykład 2: Psujemy kod, aby usunąć style

DOM Clobbering może być użyty do zepsucia działania kodu JavaScript.

// Kod zakłada że document.querySelectorAll(); działa normalnie
    setTimeout(() => {
      const styles = document.querySelectorAll('#render style');
      styles.forEach(s => s.remove());
    }, 1000);

Wstrzyknięcie HTML może nadpisać document.querySelectorAll('#render style'); i zepsuć logikę!

Demo

Przykład: Angular Sanitizer

Błąd w sanitizerze Angulara pozwalał na ominięcie zabezpieczeń.

• Nieskończona pętla w Angularze spowodowana clobberingiem.
• Pull Request naprawiający błąd
• Demo błędu

Przykład: VKontakte (VK)

VK udostępnia kod embed do wklejania na strony.

<div id="vk_post_-1_1"></div>
<script type="text/javascript">
  (function(d, s, id) {
    // ... kod ładujący skrypt VK ...
  }(document, 'script', 'vk_openapi_js'));
</script>

Jeśli atakujący może wstrzyknąć HTML przed tym skryptem, może nadpisać zmienne używane przez skrypt VK i przejąć kontrolę nad ładowanym zasobem.

Jak się bronić przed DOM Clobbering?

Używaj sprawdzonych bibliotek do sanityzacji HTML:

• DOMPurify (cure53)
  Sprawdza czy element jest faktycznie elementem DOM
• safevalues (Google)
  Moduł no_clobber.ts chroni przed nadpisywaniem
• Closure Library (Google)
  Plik noclobber.js w sanitizerze HTML

💡 Kluczowa technika: sprawdzanie instanceof i używanie Object.getOwnPropertyDescriptor

Podsumowanie typów

• Typ 1: Nowe właściwości w window
• Typ 2: Nowe właściwości w document
• Typ 3: Nowe właściwości w form

Dziękuję za uwagę!

Prezentacja inspirowana prezką Michała Bentkowskiego (Google).

Pytanie na ocene: Ile razy pojawił się Teemo na prezentacji?

3

3