# Shadow DOM

<details>

<summary><a href="https://cloud.hacktricks.xyz/pentesting-cloud/pentesting-cloud-methodology"><strong>☁️ HackTricks Cloud ☁️</strong></a> -<a href="https://twitter.com/hacktricks_live"><strong>🐦 Twitter 🐦</strong></a> - <a href="https://www.twitch.tv/hacktricks_live/schedule"><strong>🎙️ Twitch 🎙️</strong></a> - <a href="https://www.youtube.com/@hacktricks_LIVE"><strong>🎥 Youtube 🎥</strong></a></summary>

* ¿Trabajas en una **empresa de ciberseguridad**? ¿Quieres ver tu **empresa anunciada en HackTricks**? ¿O quieres tener acceso a la **última versión de PEASS o descargar HackTricks en PDF**? ¡Consulta los [**PLANES DE SUSCRIPCIÓN**](https://github.com/sponsors/carlospolop)!
* Descubre [**The PEASS Family**](https://opensea.io/collection/the-peass-family), nuestra colección de [**NFTs**](https://opensea.io/collection/the-peass-family) exclusivos.
* Obtén el [**swag oficial de PEASS y HackTricks**](https://peass.creator-spring.com).
* **Únete al** [**💬**](https://emojipedia.org/speech-balloon/) [**grupo de Discord**](https://discord.gg/hRep4RUj7f) o al [**grupo de Telegram**](https://t.me/peass) o **sígueme** en **Twitter** [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks\_live)**.**
* **Comparte tus trucos de hacking enviando PRs al** [**repositorio de hacktricks**](https://github.com/carlospolop/hacktricks) **y al** [**repositorio de hacktricks-cloud**](https://github.com/carlospolop/hacktricks-cloud).

</details>

## Información básica

Shadow DOM es parte del conjunto de características de [Web Components](https://developer.mozilla.org/es/docs/Web/Web_Components), que tiene como objetivo permitir a los desarrolladores de JS crear elementos personalizados reutilizables con su funcionalidad encapsulada lejos del resto del código del sitio web.

Básicamente, puedes usar el Shadow DOM para **aislar el HTML y CSS de tu componente del resto de la página web**. Por ejemplo, si creas IDs de elementos en un Shadow DOM, **no entrarán en conflicto con los IDs de elementos en el DOM principal**. Cualquier selector CSS que utilices en tu Shadow DOM solo se aplicará dentro del Shadow DOM y no al DOM principal, y cualquier selector que utilices en el DOM principal no penetrará dentro del Shadow DOM.
```js
// creating a shadow DOM
let $element = document.createElement("div");
$shadowDomRef = $element.attachShadow({ mode: "open" }); // open or closed
```
Normalmente, cuando adjuntas un **shadow DOM "abierto" a un elemento**, puedes obtener una referencia al shadow DOM con **`$element.shadowRoot`**. Sin embargo, si el shadow DOM está adjunto en modo **"cerrado"**, no puedes obtener una referencia de esta manera. Incluso después de leer toda la documentación para desarrolladores que pude encontrar, todavía tengo algunas dudas sobre el propósito del modo cerrado. [Según Google](https://developers.google.com/web/fundamentals/web-components/shadowdom):

> Hay otro tipo de shadow DOM llamado modo "cerrado". Cuando creas un árbol de shadow cerrado, **JavaScript externo no podrá acceder al DOM interno de tu componente**. Esto es similar a cómo funcionan los elementos nativos como `<video>`. JavaScript no puede acceder al shadow DOM de `<video>` porque el navegador lo implementa utilizando un shadow root en modo cerrado.

Sin embargo, también afirman:

> Los shadow roots cerrados no son muy útiles. Algunos desarrolladores ven el modo cerrado como una **característica de seguridad artificial**. Pero seamos claros, no es una característica de seguridad.

## Accediendo al Shadow DOM

### window.find() y selecciones de texto <a href="#introducing-windowfind-and-text-selections" id="introducing-windowfind-and-text-selections"></a>

La función **`window.find("texto_de_búsqueda")` penetra dentro de un shadow DOM**. Esta función tiene efectivamente la misma funcionalidad que ctrl-F en una página web.

Es posible llamar a **`document.execCommand("SelectAll")`** para expandir la selección tanto como sea posible y luego llamar a **`window.getSelection()`** para **obtener el contenido** del texto seleccionado dentro del shadow DOM.

En **firefox**, puedes usar `getSelection()` que devuelve un objeto [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection), donde `anchorElement` es una **referencia a un elemento en el shadow DOM**. Por lo tanto, podemos filtrar el contenido del shadow DOM de la siguiente manera:
```js
getSelection().anchorNode.parentNode.parentNode.parentNode.innerHTML
```
Pero esto no funciona en Chromium.

### contenteditable o inyección de CSS <a href="#contenteditable-or-css-injection" id="contenteditable-or-css-injection"></a>

Una forma en la que podríamos interactuar con el shadow DOM es si tenemos una **inyección de HTML o JS dentro de él**. Hay algunas situaciones interesantes en las que puedes obtener una inyección dentro de un shadow DOM donde no podrías en una página normal con crossorigin.

Un ejemplo es si tienes algún **elemento con el atributo `contenteditable`**. Este es un atributo HTML obsoleto y poco utilizado que declara que el **contenido de ese elemento puede ser editado por el usuario**. Podemos usar selecciones junto con la API **`document.execCommand`** para interactuar con un elemento contenteditable y obtener una inyección de HTML!
```js
find('selection within contenteditable');

document.execCommand('insertHTML',false,'<svg/onload=console.log(this.parentElement.outerHTML)>')
```
Quizás aún más interesante, **`contenteditable`** puede declararse en cualquier elemento en chromium aplicando una propiedad CSS obsoleta: `-webkit-user-modify:read-write`

Esto nos permite **elevar una inyección de CSS/estilo a una inyección de HTML**, agregando la propiedad CSS a un elemento y luego utilizando el comando `insertHTML`.

## CTF

Ver este writeup donde se utilizó esta técnica como un desafío CTF: [https://github.com/Super-Guesser/ctf/blob/master/2022/dicectf/shadow.md](https://github.com/Super-Guesser/ctf/blob/master/2022/dicectf/shadow.md)

## Referencias

* [https://blog.ankursundara.com/shadow-dom/](https://blog.ankursundara.com/shadow-dom/)

<details>

<summary><a href="https://cloud.hacktricks.xyz/pentesting-cloud/pentesting-cloud-methodology"><strong>☁️ HackTricks Cloud ☁️</strong></a> -<a href="https://twitter.com/hacktricks_live"><strong>🐦 Twitter 🐦</strong></a> - <a href="https://www.twitch.tv/hacktricks_live/schedule"><strong>🎙️ Twitch 🎙️</strong></a> - <a href="https://www.youtube.com/@hacktricks_LIVE"><strong>🎥 Youtube 🎥</strong></a></summary>

* ¿Trabajas en una **empresa de ciberseguridad**? ¿Quieres ver tu **empresa anunciada en HackTricks**? ¿O quieres tener acceso a la **última versión de PEASS o descargar HackTricks en PDF**? ¡Consulta los [**PLANES DE SUSCRIPCIÓN**](https://github.com/sponsors/carlospolop)!
* Descubre [**The PEASS Family**](https://opensea.io/collection/the-peass-family), nuestra colección exclusiva de [**NFTs**](https://opensea.io/collection/the-peass-family)
* Obtén el [**swag oficial de PEASS y HackTricks**](https://peass.creator-spring.com)
* **Únete al** [**💬**](https://emojipedia.org/speech-balloon/) [**grupo de Discord**](https://discord.gg/hRep4RUj7f) o al [**grupo de Telegram**](https://t.me/peass) o **sígueme** en **Twitter** [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks\_live)**.**
* **Comparte tus trucos de hacking enviando PRs al** [**repositorio de hacktricks**](https://github.com/carlospolop/hacktricks) **y al** [**repositorio de hacktricks-cloud**](https://github.com/carlospolop/hacktricks-cloud).

</details>