# 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>

* Travaillez-vous dans une **entreprise de cybersécurité** ? Voulez-vous voir votre **entreprise annoncée dans HackTricks** ? ou voulez-vous avoir accès à la **dernière version de PEASS ou télécharger HackTricks en PDF** ? Consultez les [**PLANS D'ABONNEMENT**](https://github.com/sponsors/carlospolop) !
* Découvrez [**The PEASS Family**](https://opensea.io/collection/the-peass-family), notre collection exclusive de [**NFTs**](https://opensea.io/collection/the-peass-family)
* Obtenez le [**swag officiel PEASS & HackTricks**](https://peass.creator-spring.com)
* **Rejoignez le** [**💬**](https://emojipedia.org/speech-balloon/) [**groupe Discord**](https://discord.gg/hRep4RUj7f) ou le [**groupe Telegram**](https://t.me/peass) ou **suivez** moi sur **Twitter** [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks\_live)**.**
* **Partagez vos astuces de piratage en soumettant des PR au** [**repo hacktricks**](https://github.com/carlospolop/hacktricks) **et au** [**repo hacktricks-cloud**](https://github.com/carlospolop/hacktricks-cloud).

</details>

## Informations de base

Shadow DOM fait partie de la suite de fonctionnalités [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web\_Components), qui vise à permettre aux développeurs JS de créer des éléments personnalisés réutilisables avec leur fonctionnalité encapsulée loin du reste du code du site web.

Essentiellement, vous pouvez utiliser le Shadow DOM pour **isoler le HTML et le CSS de votre composant du reste de la page web**. Par exemple, si vous créez des identifiants d'éléments dans un Shadow DOM, ils **ne seront pas en conflit avec les identifiants d'éléments dans le DOM parent**. Tous les sélecteurs CSS que vous utilisez dans votre Shadow DOM s'appliqueront uniquement dans le Shadow DOM et non dans le DOM parent, et tous les sélecteurs que vous utilisez dans le parent ne pénétreront pas dans le Shadow DOM.
```js
// creating a shadow DOM
let $element = document.createElement("div");
$shadowDomRef = $element.attachShadow({ mode: "open" }); // open or closed
```
Normalement, lorsque vous attachez un **shadow DOM "ouvert" à un élément**, vous pouvez obtenir une référence au shadow DOM avec **`$element.shadowRoot`**. Cependant, si le shadow DOM est attaché en mode **"fermé"**, vous **ne pouvez pas obtenir de référence** de cette manière. Même après avoir lu toute la documentation des développeurs que j'ai pu trouver, je ne suis toujours pas tout à fait clair sur le but du mode fermé. [Selon Google](https://developers.google.com/web/fundamentals/web-components/shadowdom):

> Il existe une autre variante de shadow DOM appelée mode "fermé". Lorsque vous créez un arbre de shadow fermé, **le JavaScript externe ne pourra pas accéder au DOM interne de votre composant**. C'est similaire au fonctionnement des éléments natifs tels que `<video>`. JavaScript ne peut pas accéder au shadow DOM de `<video>` car le navigateur l'implémente en utilisant un shadow root en mode fermé.

Cependant, ils précisent également:

> Les shadow roots fermés ne sont pas très utiles. Certains développeurs considéreront le mode fermé comme une **fonctionnalité de sécurité artificielle**. Mais soyons clairs, ce n'est **pas** une fonctionnalité de sécurité.

## Accéder au Shadow DOM

### window.find() et les sélections de texte <a href="#introducing-windowfind-and-text-selections" id="introducing-windowfind-and-text-selections"></a>

La fonction **`window.find("texte_recherché")` pénètre à l'intérieur d'un shadow DOM**. Cette fonction a essentiellement la même fonctionnalité que ctrl-F sur une page web.

Il est possible d'appeler **`document.execCommand("SelectAll")`** pour étendre la sélection autant que possible, puis d'appeler **`window.getSelection()`** pour **retourner le contenu** du texte sélectionné à l'intérieur du shadow DOM.

Dans **firefox**, vous pouvez utiliser `getSelection()` qui renvoie un objet [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection), où `anchorElement` est une **référence à un élément dans le shadow DOM**. Ainsi, nous pouvons exfiltrer le contenu du shadow DOM de la manière suivante:
```js
getSelection().anchorNode.parentNode.parentNode.parentNode.innerHTML
```
Mais cela ne fonctionne pas dans Chromium.

### contenteditable ou injection CSS <a href="#contenteditable-or-css-injection" id="contenteditable-or-css-injection"></a>

Une façon dont nous pourrions interagir avec le shadow DOM est si nous avons une **injection HTML ou JS à l'intérieur de celui-ci**. Il existe des situations intéressantes où vous pouvez obtenir une injection dans un shadow DOM où vous ne pourriez pas le faire sur une page normale avec crossorigin.

Un exemple est si vous avez des **éléments avec l'attribut `contenteditable`**. Il s'agit d'un attribut HTML obsolète et peu utilisé qui déclare que le **contenu de cet élément peut être modifié par l'utilisateur**. Nous pouvons utiliser des sélections ainsi que l'API **`document.execCommand`** pour interagir avec un élément contenteditable et obtenir une injection HTML !
```js
find('selection within contenteditable');

document.execCommand('insertHTML',false,'<svg/onload=console.log(this.parentElement.outerHTML)>')
```
Peut-être encore plus intéressant, **`contenteditable`** peut être déclaré sur n'importe quel élément dans chromium en appliquant une propriété CSS obsolète : `-webkit-user-modify:read-write`

Cela nous permet de **élever une injection CSS/style en une injection HTML**, en ajoutant la propriété CSS à un élément, puis en utilisant la commande `insertHTML`.

## CTF

Consultez cette solution où cette technique a été utilisée comme défi 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)

## Références

* [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>

* Vous travaillez dans une **entreprise de cybersécurité** ? Vous souhaitez voir votre **entreprise annoncée dans HackTricks** ? ou souhaitez-vous avoir accès à la **dernière version de PEASS ou télécharger HackTricks en PDF** ? Consultez les [**PLANS D'ABONNEMENT**](https://github.com/sponsors/carlospolop) !
* Découvrez [**The PEASS Family**](https://opensea.io/collection/the-peass-family), notre collection exclusive de [**NFT**](https://opensea.io/collection/the-peass-family)
* Obtenez le [**swag officiel PEASS & HackTricks**](https://peass.creator-spring.com)
* **Rejoignez le** [**💬**](https://emojipedia.org/speech-balloon/) [**groupe Discord**](https://discord.gg/hRep4RUj7f) ou le [**groupe Telegram**](https://t.me/peass) ou **suivez** moi sur **Twitter** [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks\_live)**.**
* **Partagez vos astuces de piratage en soumettant des PR au** [**repo hacktricks**](https://github.com/carlospolop/hacktricks) **et au** [**repo hacktricks-cloud**](https://github.com/carlospolop/hacktricks-cloud).

</details>