mirror of
https://github.com/carlospolop/hacktricks
synced 2024-11-27 07:01:09 +00:00
79 lines
7.8 KiB
Markdown
79 lines
7.8 KiB
Markdown
# 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>
|